How I developed my first fullstack (MERN) project!

#react #node #mongodb #express

Learning a new Technology is not only watching tutorials and cloning the templates from the tutor's repository, always try to built your own project without sticking to the tutorials explore and read documentations,Design you own Schemas,Write custom Apis,etc... In this blog I will walkthrough my step by step process in developing my first MERN stack project.

Plan & Design

Always have a design/plan of the architecture that you have planned to build.In this project I have adopted the MVC architecture and done a initial design of Models , Controllers and even Routes and middlewares for backend. Below is the screenshot of my initial backend design.

For frontend,design your VIEW part of the application using any tools like figma ,adobe xd etc...

Execute

I started with writing my schemas for database I used the Nosql db Mongo and I had 4 MODELS in my application.
After that I started an EXPRESS SERVER in localhost and connected my Db with it and once my app is up and running I started with my backend controllers and wrote APIs for my application corresponding to the routes that I designed initially.
My backend File Structure,

Test

Side by Side while writing Apis make sure you test them, so that it won't be any problem at last.
I prefer using Postman for testing my Apis

Designing frontend

Once all backend stuffs are done and tested I moved to frontend.
By referring my figma design I stated to design my frontend using REACT (jsx).For a fresher like me it is not a easy task to design the frontend.I used my local server for my backend and used my custom Apis for the frontend and for state management I used REDUX for checking the Auth status of a user.