Notes Maker App using MERN Stack

The "Notes Maker" project is an helpful web application designed to help users effectively create, manage, and organize their notes. In this article we are utilizing the MERN (MongoDB, Express, React, Node) Stack, to build a notes maker application that provides a seamless user experience for note-taking.

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

Prerequisites

• MongoDB Atlas
• Express JS
• React JS
• Node JS
• MERN Stack

Approach to create Notes Maker App:

• The Notes Maker project is approached with a structured methodology, dividing responsibilities into stateful backend controllers and stateless frontend components.
• On the backend, Express.js connects to MongoDB Atlas, with server.js acting as the controller for CRUD operations.
• The frontend uses React.js, where App.js manages overall state and communication with the backend, while stateless components like AddNote.js and NoteList.js handle UI elements.
• A minimal directory structure ensures clarity, and CSS styling enhances the user interface.

Functionalities of Notes Maker App:

The project employs a backend built with Node.js and Express.js, utilizing MongoDB as the database for note storage. On the front end, React.js is employed to create an interactive user interface. The functionalities include:

• Adding new notes with titles and content.
• Displaying a list of existing notes.
• Update/Delete Notes.

Steps to Create the Project:

Step 1: Create a new directory for your project and navigate to it using the terminal.

mkdir notes-maker
cd notes-maker

Step 2: Create a server directory for your backend and navigate into it.

mkdir server
cd server

Step 3: Initialize a new Node.js project for the backend.

npm init -y

Step 4: Install the necessary backend dependencies.

npm install express mongoose cors body-parser

Project Structure (Backend):

Dependencies (Backend):

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.3"
 }

Step 5: Create a server.js file inside the server directory and add the following code:

To run the backend server run the following command.

node server.js

Step 6: Navigate to the root directory. Run the following command to initialize a new React app:

npx create-react-app client
cd client

Step 7: Install the required dependencies.

npm i axios

Folder Structure(Frontend):

Dependencies(Frontend):

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.6.5",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Add the given code in the respective files.

To run the application,type the following command:

node server.js

Output: