MERN Stack Application

Presentation objective:

• Explain the FullStack Project Application Development

I. Overview of the application Stack

¿What does MERN stands for?

Project Application:

Team Management Tool for Product Developers

Backend

Example of Express App

Database layer

Frontend

II. Application backend setup

Project configuration and structure

• Structure solution by self contained components ("microservices architecture")

Code style practices

• We configure ESLint for type checking and Prettier for code formatting to improve developer experience.

Code style practices gif

// TODO OF THE APPLICATION CODE STYLE PRACTICES GIF

Express in the web layer

• Business logic and database access layer expect a custom context object from Express 
• Share common utilities across environments and components 

Express in our application

REST API Operations configuration

// TODO OF THE DATA MODELING

III. Application database layer setup

Entity Relationship Diagrams

We create our models with Mongoose

IV. Application frontend setup

IV. Application frontend setup

// TODO OF THE APPLICATION FRONTEND SETUP