This is a reference to learn MERN the fastest way possible.
Report an issue
MERN Stack is a Javascript Stack that is used for easier and faster deployment of full-stack web applications. MERN Stack comprises of 4 technologies namely: MongoDB, Express, React and Node.js. It is designed to make the development process smoother and easier.
MongoDB is a cross-platform document-oriented NoSQL database program. Let's think about MongoDB like a storage where we create, read, update or delete data from.
-
When we post a comment on Facebook, Facebook will create the data on its database that is MongoDB
-
When we open Facebook homefeed, Facebook will read all the comments data on its database that is MongoDB
-
If we decide to edit a comment on Facebook, Facebook will update the data on its database that is MongoDB
-
If we decide to delete a comment on Facebook, Facebook will delete the data on its database that is MongoDB
Express is a back end server framework for NodeJS that we will import as a dependency in our project to run our web application on it.
ReactJS is a front end framework language that we will use in our project to build our user interface.
Node.js is a back end language that we will use in our project to have a server that handles requests and responses.
The front end is principaly the visual user interface that a user sees when accessing the website. With client-side rendering (front end), the rendering of the content happens in the users computer instead of the remote web server using the de facto language of the web, JavaScript.
For the front end, we will use the ReactJS framework.
While front-end development is about making sites and web applications render on the client-side, back-end development is all about making these apps render server-side. But it's a bit more involved than that. While the previous statement holds true, back-end developers also create services that process business logic and access other resources such as databases, file servers, cloud services and more.
For the back end we will use NodeJS with the Express framework to create endpoints.
Now that we know what is a front end and a back end, we must glue them together to make everything work from end-to-end.
The flow is quite simple and it's like humans, it's all about communication.
- The front end has an action (for exemple: Alice that posts a new Tweet)
- Once the action is done (for exemple: Alice click on the
postbutton), the front end contacts the back ends endpoint with the data (of the post) - The back-end validates the data and since it's a new entry it creates the data inside the database
- Once the data created in the database, the back end responds to the front end that everything is ok
Now, lets see how the communication between front end and backend works with more details.
For the front end to contact the back end, it needs to talk with something and this something is REST APIs. The back end will have multiple endpoints/APIs available that the front end can call.
Basicaly, the back end is only here to host endpoints that the front end will consume. For that, it needs to respect a certain protocol. This protocol is what we call the HTTP protocol.
The HTTP protocol is based on requests and response.
The HTTP Request is what the front end sends to the backend and it must contain
- The HTTP method
- The endpoint path
- The host url of the back end to contact
- A body if needed (we will see this in the back end README section)
The back end must provide endpoints to the front end for the specific HTTP method that does a specific task.
Here is a mapping of the HTTP methods and database CRUD
The HTTP Response is what the back end sends to the front end. It contains
- The status code (https://httpstatusdogs.com/)
- The content-type of the response (we will see this in the back end README section)
- A body if needed (we will see this in the back end README section)