The Tech Demystify: MERN-Stack Application Development

In this episode of the #TheTechDemystify, we hosted Isaac Oteng who works as an Oracle EPM Consultant and also doubles as a Software Developer at Rhema Systems and Associate. His session emphasizes a practical introduction to MERN-stack application development.

Overview of MERN Stack

MERN stack heavily relies on JavaScript-based technologies to develop end to end full-stack web application; the backend, frontend, and database interaction. It consists of four technologies namely: MongoDB, Express, React, and Node.js. And each of these technology performs the following functions:

• MongoDB: No-SQL database, it is used to store application data.
• ExpressJS: A node.js framework used to build the backend of a site.
• ReactJS: A frontend library to build UI components that create the user interface of the single page web application.
• Node.js: JavaScript runtime environment used to run JavaScript application on.

Overview of Project

The project will allow users to CRUD(create, read, update, and delete) operations on a resource, in our case a developer.

Tools needed for this project

1. Text editor/Integrated Development Environment(IDE): a tool to write the code. Here Visual Studio Code will be used but you can use an
2. Postman: The frontend might not be ready when developing the backend service usually called the Application Programming Interface(API) of our application. Postman helps in testing those backend services.
3. React: The UI & frontend of the application will be created using the react library.
4. Axios: We’ll use Axios, a lightweight promise-based component to make async and await request to the backend API.
5. Materialize CSS: A CSS library will be used to style the front end of the application.
6. Others could be a web browser for testing the frontend after integration with backend

Starting the Project

The project will be of two parts; frontend and a backend, our API. We’ll start by creating the backend using Node.js, Express, and MongoDB. Starting a new node.js project could be summarized as

1. Creating the project
2. adding dependencies:
3. Creating a server
4. Starting a server
5. Creating APIs for various resources available in the backend service
6. Creating the frontend UI with React JS & Materialize CSS
7. Connecting backend services to frontend

Detailed Resources:

For many details on how to work on the project, kindly follow the videos. And also a link to the GitHub repository has been provided to access the code.

Videos from the talk

1. First Video: https://facebook.com/niisign/videos/10163831711285438/
2. Second Video: https://facebook.com/niisign/videos/10163869462450438
3. Third Video: https://facebook.com/groups/DevCAccra/permalink/3987486157992724/

Project GitHub Repo

https://github.com/developercirclesaccra/MERN-STACK-APP

#TheTechDemystify is in every Sunday at 7 pm on Facebook Group, make sure to tune in and enjoy every reverting conversation as well as tutorial sessions to help you grow in tech.