How we Made a Community & E-Learning Platform using MERN Stack

This summer I worked with 6 friends to develop a Community & E-learning platform for the African Impact Challenge. The platform’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.

Our project management structure followed Scrum and Agile methodologies. We divided the work into 4 sprints. We had sprint retrospective and sprint planning meetings before each sprint. In these meetings, we selected five user stories we want to implement from the product backlog. We estimated the stories using the Poker Play strategy. Then, we divided each user story into specific backend and frontend tasks and assigned them to members.

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. When a user performs an action, they will interact with the Presentation Layer. This layer will send an HTTP API Request to the logic layer. If necessary, the logic layer sends a corresponding query to the MongoDB database.

The Three Tiered Architecture

The backend provides an API interface which clients can utilize to make request. The backend accept a request format, and responds with a response format. We store the formats 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 to the following categories:

  • Controllers: Create all API endpoints with the request and response format. Call the services to handle API requests.
  • Modules: Provide metadata that Nest uses to organize the application structure. This includes grouping controllers, services, and data access objects together.
  • Services: Format data to call the Data Access Object to perform relevant queries.

We wrote the backend documentation using Swagger. The documentation looks like this:

API Backend Documentation

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 integrated tests as part of Github Actions. Passing tests was a mandatory standard to merge a pull request.

GitHub Actions Runthrough

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, and MongoDB. And most importantly, I had a lot of fun working with my teammates and developing a cool project.

--

--

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