Introduction
Congratulation 🥳
Well if you reached this part of SHA full stack course; we want to congratulate you cuz now you can say that you worked so far on all of the technologies of MERN stack separately, the only thing left is to link all the puzzle.
So now you should have already built:
- A server using node js with express
- A database using mongo db
- also you already used React framework to build the frontend for our todo list app
So the only thing that you should do in this sprint is to link both your backend and frontend to come up with your first full stack app from scratch.
Takeaways
The primary purpose of this sprint is to give you the opportunity to compose together all the isolated concepts you’ve learned in the past 5 weeks. try to use Google (to find official documentation and helpful Stack Overflow answers) as your primary source of information.
A quick refresher
What is the MERN Stack?
MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.
- MongoDB – document database
- Express(.js) – Node.js web framework
- React(.js) – a client-side JavaScript framework
- Node(.js) – the premier JavaScript web server
How does the MERN stack work?
The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.
So your final app will follow up this architecture :
Instructions
-
Link the React front end app with your backend app to have a full MERN stack app.
-
Feel free to add your own edits and changes, so you will be able to connect the two parts(backend and frontend)
-
Make sure you have the right endpoints in both frontend and backend.
-
If you could not know from where to start then you can check axios
-
More Resources :
- Enhance your knowledge by trying more examples of CRUD operation.
Here’s some examples of how can you create a full MERN stack app from scratch :
React.js + Node.js + Express + MongoDB example: MERN stack CRUD App
GitHub Workflow
- Create a private repo
- Push your solution and add your instructors as collaborators.
- Click on the start quiz button 👇🏻 and submit your repo link.
