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.
