How I built a MERN stack project in one week for my university assignment.

In this article I am going to share my experience of developing a MERN stack application.

The start

We were given instructions to build a “research management tool” for our university. We were instructed to build that application using MongoDB, Express, React Js, Node Js (MERN stack). It was a group project of four members. There were four main actors: student, admin, supervisor, panel member.

First, we completed the software requirement specification document. We included functional and non-functional requirements as well as several UML diagrams such as use case diagram, entity-relationship diagram, activity diagram etc. in the SRS document.

Then we divided the project between group members. My part was to create panel members. Update and delete their profiles and view all users lists and do modifications and deletions. So, my part had all CRUD operations to implement.

Learning

We did not have previous experience of implementing web application using MERN. We were also new to no SQL databases. So, we decided to learn above technologies. We attended to our university lectures and lab practical, we referred to several YouTube videos and followed courses in Sololearn platform. We also referred the documentations of the above technologies. Documentations took important role and helped us to solve many issues when we were implementing the application.

Building the solution

First, we created a git hub repository and a database using MongoDB atlas. I implemented the backend server configurations and MongoDB configurations and pushed it to the GitHub repository. Then other members cloned the repository and did their implementations.

First, I implemented the backend. I created separate directories to store my database schemas, APIs and controllers. I checked my APIs using postman.

Most of the time we referred to tutorial which explain react 17. But when we were implementing our application, we used React 18. Therefore, we had to learn new react features and build our application accordingly. Most troublesome error we got was, CORs policy error which was “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” When I was getting errors, I always search those errors in stack overflow. But the solutions for above error did not fix the error in our application. I spent several hours browsing and searching solutions to that error. Finally, I found that. We need to use cors before using any other middleware in the application.

All our members commit their code regularly. So, it helped us to finalize our application more easily. We decided to deploy our application to Heroku. Due to our decision earlier to use our database managed online with MongoDB Atlas, it actually circumvented that whole process of deploying. All in all, using Heroku with MongoDB Atlas, simplified the deployment process so much all we had to do was change environment variables.

Click here to visit the GitHub repository.

--

--

--

Software Engineering UG | Sri Lanka

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Secures REST APIs with Spring Security 5 and Auth0

Deploying Jakarta EE 9 applications to WildFly

upgrade pip3 on windows 10 fails

Experiment projects can land you a tech job at the unicorns 🦄

Creating a simple database using Python and SQLite

{UPDATE} Cinderella's Woods Nail Salon - Beauty Make-Over Design & Fashion Manicure Dress-Up (Free…

Create Serverless Microservice “Hello World”​ ​Step By Step: Adding Lambda to the Microservice

Make Your Enemies Facing the Threat- Game Dev Series 114

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nirasha Jayasiri

Nirasha Jayasiri

Software Engineering UG | Sri Lanka

More from Medium

My journey to Create a Beauty Products E-Commerce website in my Unit-4 Construct week using Backend…

Laravel and Vue: A Deadly Combination for Web Application Development

What is a REST API and Best Practices for REST API Design

How we did our MERN stack project