How to create a mern stack Crud application ?
Published: 2022-11-01 04:31:15

**Introduction**
In this tutorial we are going to learn that how we can create a beginners friendly crud application with the help of mern-stack.
**Prior knowledge**
To follow this tutorial you should have minimum knowledge of react,node and mongodb. This are the technologies that together combine to form a mern stack.
**To get the complete source code visit my github account**
{% embed https://github.com/Sachinsingh101/Mern-Crud-App %}
**THE FRONTEND**
**step-1**
First of open your vs code editor or any other editor you like 
then create a folder named it as mern stack crud.
Inside this folder create two folders named it as client or server.

![Mern stack crud app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr97byl9afnmsn0tx8ux.png)
**step-2**
Inside client folder we will create our react application.
open command line and Type ""npx create-react-app app" then hit enter to create a basic react application inside client folder.
after this you folder structure should look like this.

![React node.js and mongodb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vljo8xu21vsj8k8fgudo.png)
**step-3**
After the step mention above navigate to src folder and create a folder named it as component folder.
In this folder we will keep our all the components like 'Add user componet','edit user','all user' or the navbar component

![Mern stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xplgycvodjrnxwbmmzd2.png)
**step-4**
Navigate to src folder then component folder and create a file or component named it as 'add user' component
then write you code or copy the code mention below to create a basic 'add user' interface

```
import {useState} from 'react'
import axios from 'axios'
function Adduser(){
    const [user,setuser]=useState({
        Name:"",
        email:"",
        number:""
    });
    function changeHandler1(e){
        setuser({
            ...user,Name:e.target.value
        })
        
    }
    function changeHandler2(e){
        setuser({
            ...user,email:e.target.value
        })
    }
    function changeHandler3(e){
        setuser({
            ...user,number:e.target.value
        })
    }
    function submitHandler(e){
        e.preventDefault()
        const userdata={
            name:user.Name,
            email:user.email,
            number:user.number
            
        }
        try{
            axios.post('http://localhost:4000/add',userdata);
            setuser({
                Name:"",
                Email:"",
                number:""
            });
            alert("user added successfully !!!");
        }catch (err){
            console.log("react aios post error",err);
        }


        console.log(userdata);
        
    }

    
    return(
        <>
          <div className="container m-5">
            <h1 className="text-center text-dark">Add User</h1>
            <form onSubmit={submitHandler}>
             <input type="text" placeholder="Enter your Name" name="name" className="form-control m-3" onChange={changeHandler1} value={user.Name} required></input>
             <input type="email" placeholder="Enter your Email" name="email" className="form-control m-3" onChange={changeHandler2} value={user.Email} required></input>
             <input type="number" placeholder="Enter your Phone number" name="number" className="form-control m-3" onChange={changeHandler3} value={user.number} required></input>
             <input  type="submit"  className="btn btn-primary form-control m-3" ></input>
             <input type="reset" className="btn btn-danger form-control m-3"></input>
            </form>
          </div>
        </>
    )
}
export default Adduser;

```
Eplained:- In above code we are first creating a form after we are creating state to hold the input of the forms field then post these data to backend with the help of aios.
**step-5**
similarly create a file named as 'alluser.js' inside component folder and copy the code below or write you own code to get a basic all user interface

```
import {useState,useEffect} from 'react'
import {Link} from 'react-router-dom'
import axios from 'axios'
function Getallusers(props){

    const [Alluser,setuser]=useState({
        students:[]
    })
    useEffect(()=>{
        try{
            axios.get('http://localhost:4000/getallusers').then(res=>{
                setuser({
                    students:res.data
                });
                
            })
        }catch(err){
            console.log("error while getting users",err);
       }
    }) 
    
   
    return(
        <> 
          <table className='container-fluid text-center bg-light p-3'>
            <thead >
                <tr className='row p-3'>
                    <th className='col'>Name</th>
                    <th className='col'>Email</th>
                    <th className='col'>Phone number</th>
                </tr>
            </thead>
          </table>
          <table className='container-fluid'>
            <thead >

                {
                        Alluser.students.reverse().map(function(value,i){
                            return <tr className='bg-danger text-white text-center border border-dark'>
                                      <td className='border-end border-dark'>{value.name}</td>
                                      <td className='border-end border-dark'>{value.email}</td>
                                      <td className='border-end border-dark'>{value.number}</td>
                                      <Link to={`/Edit/${value._id}`} className='btn btn-danger text-dark' onClick={props.name} id="edit">Action</Link>
                                    </tr>
                            
                        })
                    }
            </thead>
          </table>
        </>
    )
}
export default Getallusers;

```
Eplained:- In the above code first we create a table then make a get request with aios then save the response to the state and use it in the table to show the alluser in our app.
**step-6**
similarly create a file named it as 'edituser.js' inside component folder and write your own code or paste it from here to create a edit user interface


```
import axios from "axios";
import {  useParams } from "react-router-dom";
import {useState,useEffect} from 'react';


function Edituser(){
    const [newdata,setnewdata]=useState({
        Name:"",
        Email:"",
        number:""
    });
    function changeHandler1(e){
        setnewdata({
           ...newdata, Name:e.target.value
        });
    }
    function changeHandler2(e){
        setnewdata({
           ...newdata, Email:e.target.value
        });
    }
    function changeHandler3(e){
        setnewdata({
           ...newdata, number:e.target.value
        });
    }
    const routeParams=useParams();
    const id=routeParams.id;
    function getsingledata(){
        axios.get(`http://localhost:4000/getsingleuser/${id}`).then(res=>{
            setnewdata({
                Name:res.data.name,
                Email:res.data.email,
                number:res.data.number
            });
            console.log(newdata);
        })
        console.log(id);
    }
    useEffect(()=>{
        getsingledata();
    },[]);
    function submitHandler(e){
        e.preventDefault()
        const updatedData={
            name:newdata.Name,
            email:newdata.Email,
            number:newdata.number
        }
        try{
            axios.put(`http://localhost:4000/Edit/${id}`,updatedData);
            setnewdata({
                Name:"",
                Email:"",
                number:""
            });
            alert("data updated successfully !!!");
        }catch(err){
            console.log("error while updating",err);
        }    
    }
    function deleteuser(){
        try {
            axios.delete(`http://localhost:4000/deleteuser/${id}`);
            alert("user deleted successfully !!!!");
            setnewdata({
                Name:"",
                Email:"",
                number:""
            });
            alert("user updated successfully !!!!1");
        }catch(err){
            console.log("error while making delete request",err);
        }
        
    }
    
    
    return(
        <>
          <div className="container mt-5">
          <form onSubmit={submitHandler}>
             <h1 className="text-center">Edit User</h1>
             <input type="text" placeholder="Enter your Name" name="name" className="form-control m-3" value={newdata.Name} required onChange={changeHandler1}></input>
             <input type="email" placeholder="Enter your Email" name="email" className="form-control m-3" value={newdata.Email}required onChange={changeHandler2}></input>
             <input type="number" placeholder="Enter your Phone number" name="number" className="form-control m-3" value={newdata.number} required onChange={changeHandler3}></input>
             <input  type="submit" className="btn btn-primary form-control m-3"></input>
         </form>
         <h5 className="text-center text-muted">OR</h5>
         <div className="btn btn-outline-danger form-control m-3 " onClick={deleteuser}>Delete</div>
          </div>
          
        </>
    );
    
}
export default Edituser;
```
eplained:- In the above code first we make a form then make a get request to fill up the form with the user details then maka a put request after user make some changes to his data to save it again to the database.

**step-7**
Import these componets to app.js file.
after that your app.js file should look like this.

```
// import logo from './logo.svg';
import {Routes,Route, redirect} from 'react-router-dom'
import './App.css';
import Navbar from './components/navbar.js';
import Adduser from './components/adduser';
import Getallusers from './components/alluser';
import Edituser from './components/edituser.js'

function App() {
  
  return (
    <>
      <Navbar/>
      <Routes>
        <Route path="/" element={<Adduser/>}/>
        <Route path="/get" element={<Getallusers/>}></Route>
        <Route path={`/Edit/:id`} element={<Edituser/>}></Route>
        {/* <Route path="/redirect"></Route> */}
      </Routes>
    </>
  );
}

export default App;

```
Now our frontend part completed and this is first part of our tutorial.

**THE BACKEND**
**step-1**
Open the command line and navigate to server folder then install the dependencies mention below to start working with the backend.
first step:- npm init then 
1.Express(npm i epress)
2.mongoose(npm i mongoose)
3.nodemon(npm i nodemon)
4.cors(npm i cors)
5.body-parser(npm i body-parser)
6.dotend(npm i dotend)
Note:- you can also install these dependencies in one go just type
 'npm i epress mongoose nodemon cors body-parser dotenv '
and thats all we are ready to work with backend.

**step-2**
Inside server folder create the following folder or file mention below
1.routes
2.database
3.controllers
4.'.env'
5.app.js

**setp-3**
Navigate to app.js file and paste the code given below

```
import cors from 'cors'
import express from "express";
import bodyParser  from 'body-parser';
import dotenv from 'dotenv'
dotenv.config();
import router from './routes/userroute.js'
import connection from './database/connectDB.js';
import './database/model.js';
const app=express();
app.use(cors());
app.use(bodyParser.json({extended:true}));
app.use(bodyParser.urlencoded({extended:true}));
const port=process.env.PORT || '4000'
const DATABASE_URL=process.env.DATABASE_URL


app.get('/',(req,res)=>{
    res.send("Hello world from express");
})

app.use('/',router);
connection(DATABASE_URL)
app.listen(port,()=>{
    console.log("listening to 3000 port");
})
```
**step-4**
Navigate to route folder and create userroute.js file and paste the following code

```
import express from "express";
import {postfunction , getfunction , Editfunction ,Getsingleuser, Deleteuser} from "../controllers/usercontroller.js";
const router=express.Router();

router.all('/add',postfunction);
router.get('/getallusers',getfunction);
router.put('/Edit/:id',Editfunction);
router.get('/getsingleuser/:id',Getsingleuser);
router.delete('/deleteuser/:id',Deleteuser);

export default router;


```

**step-5**
Navigate to controllers folder and create controller.js file and paste the following code inside it

```
import userModel from "../database/model.js";


const postfunction =  (request,response)=>{
   const data=request.body;
   const userdata=new userModel(data);
   userdata.save()
   response.send(data);
   console.log(data);

}
const getfunction=(req,res)=>{
   // res.send("hello world");
   const allusers=userModel.find((error,data)=>{
      if(error){
         return next(error)
      }else{
         res.json(data);
      }
   });
   
}

const Editfunction=async (req,res)=>{
   try{
      const newdata=req.body;
      const param=req.params;
      const update= await userModel.findByIdAndUpdate(param.id,newdata);
      console.log(newdata,update)
   }catch(err){
      console.log("error while updating data",err);
   }
 
}
const Getsingleuser=async(req,res)=>{
   try{
      const Data= await userModel.findById(req.params.id,'name email number');
      res.json(Data);
      console.log(Data);
      // console.log(Data);
   }catch(err){
      console.log("error while getting each  user",err);
   }
}
const Deleteuser= async (req,res)=>{
   try{
      const id=req.params.id;
      await userModel.findByIdAndDelete(id);
      console.log(req.params.id);
   }catch(err){
      console.log("error while deleting user",err);
   }
}

export {getfunction,postfunction,Editfunction,Getsingleuser,Deleteuser}

```
**step-6**
Navigate to database folder  and create connectDb.js file and paste the following code inside it to connect with database
```
import mongoose from 'mongoose'

const connection = async(DATABASE_URL)=>{
    try{
        const Db_optiion={
            Dbname:"Sachimaa"
        }
        await mongoose.connect(DATABASE_URL,Db_optiion);
        console.log("Database connected successfully");
    } catch(err){
        console.log("error while connecting to Database ",err);
    }
}

export default connection;
```
**stpe-7**
Inside databse folder create another file named it as module.js and paste the following code given below

```
import mongoose from "mongoose";

const userSchema=new mongoose.Schema({
    name:{type:String,required:true},
    email:{type:String,required:true},
    number:{type:Number,required:true}
})

const userModel= mongoose.model('user',userSchema);

export default userModel;
```
**step-8**
Now our backend is completed and our Crud app is ready 
You can host it to github or any other platform.