I am sure that when you first begin learning full-stack web development using the MERN stack, you will have questions like "What is it like to build a full-stack application?" What exactly are front and backend? How do we connect them? Is there any magic? etc., So I'm writing this tutorial to address your queries and show you how to build a full-stack web application.

Note: The goal of this tutorial is to provide you with a high-level overview of what it's like to build a full stack application, rather than a detailed explanation of MERN stack technologies.

Let's get started

Prerequisites

The Project

To keep things simple while covering more concepts, we will create a simple mini-project. We will create a simple productivity tracker application in which you can record what activities you accomplished during the day and for how much time. So that we may see how we are spending our time. We can also see all of the stuff on the home page.

How does this work?

We know what we need to do; now let's figure out how to do it.

Frontend/Client

What is a Frontend/Client application?

Client application refers to the frontend part of a full-stack application. The client sends requests to the server and receives responses. That request could be the client sending information to the server or asking for information. The client is the visible part of a full-stack application.

Let's start by making a client.

Design the app.

Add logic.

Backend/Server

The backend component of a full-stack application is frequently referred to as the Server. A server's job is to continuously listen to requests, implement some business logic, and return the results.

Database

Let's create a database first before we create a server. To record and add our activities, we need a database. We can use a cloud database instead of hosting a database. MongoDB offers a free cloud database (atlas) that may be used for small/hobby projects.

Server

We now have a database. Let us now build our application logic and connect it to the database.

This means the server is running successfully.

Connecting client and server

It is not difficult to connect the client and server. It's as simple as adding a URL.

Hosting full-stack application

Before hosting, we must keep secrets safe and avoid committing unnecessary files/folders.

node_modules
.env

Backend

Heroku will be used for the backend.

Frontend

Netlify will host our client/frontend part.


Add your features and share the URL in the comments.


Also read:


I hope this has given you an idea of how to develop a full-stack MERN application.

Don't forget to subscribe to my Newsletter.

Thank you!

Also Published here