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

Construct the Player Movement On Your Own- Game Dev Series 78

🔥 What’s Hot in Web Development? — Weekly Picks #103

Introducing Aleo Feature Bounties

How to train a your Scroll

How ERP Testing can Help your Organization Accelerate Business Processes

How to Create Virtual Environments Using Different Python Versions on Windows

Doctors hate my no-frills, 30-day new job winning strategy

Everything you need to know about Winter of Code!

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

How to add domain to new Lightsail instance

Contact Form Sending Data to Google Sheets and Auto Respond Email

How To Add A Tracked File To .gitignore.

How to get started with Git and GitHub? Let’s find out!