Steps to Create a Backend Server

Step 1: Create a server using the following command in your terminal.

npm init -y

Step 2: Install the required packages.

npm install bcryptjs cors dotenv express cookie-parser jsonwebtoken mongodb mongoose morgan helmet nodemon

Travel Journal App with MERN Stack with API

In this article, we are going to explore the project which is a travel journalling app, where users can log in and register, make journal entries describing the various places they traveled to, and also upload their images. They can search through the various entries they’ve made and also delete them.

The website enables authentication and authorization i.e. only users who have accounts can explore the app and only authors of entries can view them. It is a great solution for all travel lovers. We are going to make it using the MERN stack (Mongo DB, Express, React, and Node).

Output Preview: Let us have a look at how the final output will look like.

Final Preview of the Website

Similar Reads

Prerequisites:

NPM & Node JS ReactJS MongoDB ExpressJS MERN Stack...

Approach to Create a Travel Journal App with MERN Stack:

Login/Register – The website enables users to login and register, so that only authenticated users can access the app. It also has the option of uploading profile pictures. Home Page – It lists down all the entries create by the user. It gives a snapshot of the original entry and viewers can click the Read More button to navigate to the whole entry. Users can also search for entries based on title, location and date. Create Page – This page is where users create the actual entries. They can also provide details like date of the entry, title of the entry, location and upto 3 images as memories. View Page – The view page basically showcases all the details about the entry in full detail. It also has an image carousel to flip through multiple images. Logout – Logout functionality will basically erase user data stored in browser cache. Authorization – We are using authorization to facilitate privacy i.e. only users who’ve created the journal entry can view them and delete them. Delete – Erases the journal entry. State Management – Context API is being employed to facilitate state management....

Steps to Create a Backend Server:

Step 1: Create a server using the following command in your terminal....

Project Structure(Backend):

Project Strucure...

Steps to Create a React Application and Installing Module:

...

Project Structure(Frontend):

...