DEV Community

Cover image for How I developed my first fullstack (MERN) project!
Ajithmadhan
Ajithmadhan

Posted on

How I developed my first fullstack (MERN) project!

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.
MVC design

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

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,
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
Post man

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.
frontend

Tools and Technologies that I used in this project

Frontend - Reactjs,Material Ui Redux(state management)
Backend - Nodejs,Expressjs
Database - Mongodb

Tools - Coggle.it , Figma ,Postman ,Robo3T

Frontend Repository link - Hashfeed-Frontend
Backend Repository link - Hashfeed-Backend

And that's how I developed my first MVP of my app and will be still engaged in this project and will be adding more features to it

Stop sticking to tutorials and start your own project, your learning curve will grow exponentially

Discussion (2)

Collapse
newtonmusyimi profile image
Newton Musyimi

Very motivational πŸ‘ŒπŸΌπŸ”₯

Collapse
hariprasad profile image
Hari Prasad

πŸ”₯