For our last project, let's build something with both a frontend and a backend, starting from scratch.
Yes, this will seem intimidating at first since it seems so free-form. But with your team's combined knowledge of flexbox, mongo queries, HTTP requests, and state management, this should be no problem 😁
In short, you'll be building a webpage for Benji's Animal Shelter (not real but should be) to manage pet adoption. You'll have design mockups to reference and understand the frontend flow, along with a product spec to explain the full stack features.
Head over here to view the mockup screenshots. There's also an interactive mockup to see how navigation works!
Looks like you don't have any code right now. Let's fix that!
Make an empty folder and open it from the terminal (cd is your friend)
Run this: npx express-generator backend. This will download the "express generator" program and use it to create an express app in a new backend directory.
Run this: npx create-react-app frontend. This is similar to the previous step, generating a ReactJS starter app in a new frontend directory.
Open this project in VS Code
Open the file backend > bin > www. Inside of here, find where it specifies port 3000 and change that string to 3001. This tells the backend to start running on 3001, so it won't try to run on the same port that the frontend is running on!
Open the file frontend > package.json and add this line anywhere after the opening {: "proxy": "[<http://localhost:3001>](<http://localhost:3001/>)",
This will route all of our API requests to talk to port 3001, where our backend should be running.
Start the full stack app just like you did the reddit project:
cd frontend
npm install # only have to run this the first time!
npm start
# open another terminal window (the two panel button in VS Code)
cd backend
npm install
npm start