Build app using React JS, Node Express JS and Mongo DB (MERN Stack)

Introduction

In this tutorial, you'll learn how to build a simple to-do application using the MERN stack, which consists of MongoDB, Express, React, and Node.js. This guide will take you through the process step-by-step, from setting up your environment to creating both the backend and frontend of the application. By the end, you will have a functioning to-do app that you can expand upon.

Step 1: Install Prerequisites

Before you start building the application, ensure you have the following software installed:

• Node.js: This is required for running the backend server.
• MongoDB: The database that will store your to-do items.
• npm or yarn: Package managers for JavaScript.

Installation Steps

1. Download and install Node.js from nodejs.org.
2. Install MongoDB by following the instructions on mongodb.com.
3. Install a code editor like Visual Studio Code for writing your code.

Step 2: Create the MongoDB Database

You will need to create a database to hold your to-do items.

Database Setup

1. Open your terminal.
2. Start the MongoDB service using the command:

   mongod
   

3. Open another terminal and enter the MongoDB shell:

   mongo
   

4. Create a new database:

   use todoApp
   

5. Create a collection for your to-do items:

   db.createCollection("todos")
   

Step 3: Set Up the Backend with Node and Express

Next, you will create the backend of your application using Node.js and Express.

Backend Project Creation

1. Create a new directory for your backend project:

   mkdir backend
   cd backend
   

2. Initialize your Node.js project:

   npm init -y
   

3. Install the required packages:

   npm install express mongoose cors
   

4. Create a new file named server.js and add the following code to set up your Express server:

   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');
   
   const app = express();
   app.use(cors());
   app.use(express.json());
   
   mongoose.connect('mongodb://localhost/todoApp', {
       useNewUrlParser: true,
       useUnifiedTopology: true
   });
   
   app.listen(5000, () => {
       console.log('Server is running on http://localhost:5000');
   });
   

Step 4: Create the React Frontend

Finally, you'll set up the frontend of your application using React.

Frontend Project Creation

1. Open a new terminal and navigate to your projects directory.
2. Create a new React application:

   npx create-react-app frontend
   cd frontend
   

3. Install Axios for making HTTP requests:

   npm install axios
   

Basic React Component Setup

1. In the src folder, create a new file named TodoApp.js and set up a basic component:

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';
   
   const TodoApp = () => {
       const [todos, setTodos] = useState([]);
       const [todo, setTodo] = useState("");
   
       useEffect(() => {
           fetchTodos();
       }, []);
   
       const fetchTodos = async () => {
           const response = await axios.get('http://localhost:5000/todos');
           setTodos(response.data);
       };
   
       const addTodo = async () => {
           await axios.post('http://localhost:5000/todos', { name: todo });
           fetchTodos();
           setTodo("");
       };
   
       return (
           <div>
               <h1>Todo List</h1>
               <input 
                   value={todo} 
                   onChange={(e) => setTodo(e.target.value)} 
               />
               <button onClick={addTodo}>Add Todo</button>
               <ul>
                   {todos.map((todoItem) => (
                       <li key={todoItem._id}>{todoItem.name}</li>
                   ))}
               </ul>
           </div>
       );
   };
   
   export default TodoApp;
   

2. Modify src/App.js to render your TodoApp component:

   import React from 'react';
   import TodoApp from './TodoApp';
   
   const App = () => {
       return (
           <div>
               <TodoApp />
           </div>
       );
   };
   
   export default App;
   

Conclusion

You have now built a simple to-do application using the MERN stack. You set up a MongoDB database, created a backend with Node and Express, and developed a frontend with React.

Key Takeaways

• Ensure all prerequisites are installed before starting.
• Properly configure your Express server and MongoDB connection.
• Use Axios for communication between the frontend and backend.

Next Steps

• Expand the functionality by adding features like editing and deleting to-do items.
• Explore deploying your application to platforms like Heroku or Vercel.