---
# System prepended metadata

title: 'Lesson3-1: State Management: Introduction'
tags: [Recat]

---

# Lesson3-1: State Management: Introduction
###### tags: `Recat`
{%youtube XBLRVoSqzVs%}
{%youtube XBLRVoSqzVs%}

# Get Project Files
Create React App will generate a number of default files and starter code that we need to get rid of. There will be two sets of changes you need to make, delete the starter content and add files that we're providing you.

But, we've already done this for you! Please clone [this repo](https://github.com/udacity/reactnd-contacts-app) and `checkout` the `starter-files-added` branch to have it all done for you.
![](https://i.imgur.com/0E3IjUG.png)
# The Backend Server
The Contacts app project that we're building is a front-end project. However, we'll eventually be storing the contacts on a backend server. Since we're only really focusing on the front-end for this course, we've gone ahead and built this server for you so you can focus on just the React parts of this program.

The server is just a simple Node/Express app. The repo for the project is at https://github.com/udacity/reactnd-contacts-server2. All you need to do is:
- clone the project with `git clone https://github.com/udacity/reactnd-contacts-server2.git`
- install the project dependencies with `npm install`
- start the server with `node server.js`

Once you've started the server, you can forget about it. The Contacts project we're working on will interact with this server, but we won't ever modify any of the server code.

> 💡 Running Two Servers💡
> At this point, you should be running two different servers on your local machine:

- Front-end development server: Accessible on **port 3000** (with `npm start` or `yarn start`)
- Back-end server: Accessible on **port 5001** (with node `server.js`)

> Please be sure that both are running before moving on in this Lesson.

![](https://i.imgur.com/urRfPdB.png)

