How we Made a Community & E-Learning Platform using MERN Stack
This summer I worked with 6 friends to develop Baobab, a Community & E-learning platform for the African Impact Challenge. We chose the name Baobab as the Baobab tree is a tree indigenous to Sub-Saharan Africa that can thrive where little else can.
Baobab’s end goal is to serve young African entrepreneurs with a platform where they can connect with others, form teams, submit deliverables, and bring their ideas to life. Baobab is an all-in-one platform to help entrepreneurs build their brands, learn valuable skills, and meet new people. We implemented the ability to create posts, solve and get feedback on assignments created by mentors and admins, and create profiles.
We followed Scrum and Agile methodologies while developing the project. We divided the work into 4 sprints and held sprint planning and retrospective meetings, as well as regular standups. In the sprint planning meeting we selected five user stories to implement from the product backlog. We estimated how many points each story is worth using the Poker Play strategy. Then, we divided each user story into specific backend and frontend tasks and assigned them to members on Jira. We also created a sprint schedule and estimated the critical path to complete different user stories. In the sprint retrospective meeting we reflected on our progress and refined our processes for the next sprints. During the standups we discussed our progress and any blockers that we had.
Our project uses the MERN (MongoDB, Express, React, Node) stack. We wrote the backend using Nest.js — a framework that makes use of Express internally. We also use the Next.js React frontend framework. So we could also say our project follows the MNNN stack (MongoDB, Nest.js, Next.js, Node) but MERN is a more common name.
Our architecture follows the Three Tiered Architecture. This architecture organizes the application into three layers: the presentation layer, the logic layer, and the data layer. When a user performs an action, they will interact with the Presentation Layer (frontend). This layer communicates with our logic layer through REST APIs requests. We used data transfer objects (DTO) to specify the request and response type between the application’s frontend and backend. The logic layer sends a corresponding query to the MongoDB database. As this query can be time-consuming, we have also configured Redis to cache frequently accessed data. Setting up Redis has significantly reduced the latency of loading our website.
The backend provides an API interface that clients can utilize to make requests. We store DTOs in a separate common folder, and both workspaces store symbolic links to the common workspace folder. The main components of the backend follow the Nest.js standards, and are separated into the following categories:
- Controllers: Create all API endpoints with the request and response formats. Call the services to handle API requests.
- Services: Format data to call the Data Access Object to perform relevant queries.
- Modules: Provide metadata that Nest uses to organize the application structure. This includes grouping controllers, services, and data access objects together.
- Data Access Objects (DAOs): These are objects responsible for storing data. In the first two sprints we defined interfaces for these objects and implemented the interfaces in memory. In the third sprint we swapped the in-memory object with MongoDB implementations.
We wrote the backend documentation using Swagger. The documentation looks like this:
We used the default Jest testing framework to write integration and end-to-end tests. We used integration tests to ensure our Data Access Objects correctly update database information, and we used end-to-end tests to make sure our API requests perform the desired actions. We have also configured continuous integration on the project by setting up a GitHub workflow file to run the tests on pull requests. This workflow file runs all tests, as well as a code linter to ensure style standards are followed. Passing the tests was a mandatory standard to merge a pull request.
This project was an amazing learning experience to work with full stack development. I learned what it’s like to employ Agile methodologies in a real environment. I improved my knowledge of many technologies such as Jira, GitHub, TypeScript, React, Nest.js, Node.js, Redis, and MongoDB. And most importantly, I had a lot of fun working with my teammates and developing a cool project.