How To Build a Basic CRUD App With Node and React ?

//App.js

// Import React
import React from "react";

// Import Bootstrap
import { Nav, Navbar, Container, Row, Col }
    from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

// Import Custom CSS
import "./App.css";

// Import from react-router-dom
import {
    BrowserRouter as Router, Switch,
    Route, Link
} from "react-router-dom";

// Import other React Component
import CreateStudent from
    "./Components/create-student.component";
import EditStudent from
    "./Components/edit-student.component";
import StudentList from
    "./Components/student-list.component";

// App Component
const App = () => {
    return (
        <Router>
            <div className="App">
                <header className="App-header">
                    <Navbar bg="dark" variant="dark">
                        <Container>
                            <Navbar.Brand>
                                <Link to={"/create-student"}
                                    className="nav-link">
                                    React MERN Stack App
                                </Link>
                            </Navbar.Brand>

                            <Nav className="justify-content-end">
                                <Nav>
                                    <Link to={"/create-student"}
                                        className="nav-link">
                                        Create Student
                                    </Link>
                                </Nav>

                                <Nav>
                                    <Link to={"/student-list"}
                                        className="nav-link">
                                        Student List
                                    </Link>
                                </Nav>
                            </Nav>
                        </Container>
                    </Navbar>
                </header>

                <Container>
                    <Row>
                        <Col md={12}>
                            <div className="wrapper">
                                <Switch>
                                    <Route exact path="/"
                                        component={CreateStudent} />
                                    <Route path="/create-student"
                                        component={CreateStudent} />
                                    <Route path="/edit-student/:id"
                                        component={EditStudent} />
                                    <Route path="/student-list"
                                        component={StudentList} />
                                </Switch>
                            </div>
                        </Col>
                    </Row>
                </Container>
            </div>
        </Router>
    );
};

export default App;

// src/Components/StudentForm.js

import React from "react";
import * as Yup from "yup";
import {
    Formik, Form,
    Field, ErrorMessage
} from "formik";
import {
    FormGroup,
    FormControl, Button
} from "react-bootstrap";

const StudentForm = (props) => {
    const validationSchema =
        Yup.object().shape({
            name: Yup.string().required("Required"),
            email: Yup.string()
                .email(
`You have enter an invalid email address`
                )
                .required("Required"),
            rollno: Yup.number()
                .positive("Invalid roll number")
                .integer("Invalid roll number")
                .required("Required"),
        });
    console.log(props);
    return (
        <div className="form-wrapper">
            <Formik {...props}
                validationSchema={validationSchema}>
                <Form>
                    <FormGroup>
                        <Field name="name" type="text"
                            className="form-control" />
                        <ErrorMessage
                            name="name"
                            className="d-block 
                                invalid-feedback"
                            component="span"
                        />
                    </FormGroup>
                    <FormGroup>
                        <Field name="email"
                            type="text"
                            className="form-control" />
                        <ErrorMessage
                            name="email"
                            className="d-block 
                                invalid-feedback"
                            component="span"
                        />
                    </FormGroup>
                    <FormGroup>
                        <Field name="rollno"
                            type="number"
                            className="form-control" />
                        <ErrorMessage
                            name="rollno"
                            className="d-block 
                                invalid-feedback"
                            component="span"
                        />
                    </FormGroup>
                    <Button variant="danger" size="lg"
                        block="block" type="submit">
                        {props.children}
                    </Button>
                </Form>
            </Formik>
        </div>
    );
};

export default StudentForm;

// src/Components/create-student.component.js

// CreateStudent Component for add new student
// Import Modules
import React,
{
    useState,
    useEffect
} from "react";
import axios from 'axios';
import StudentForm
    from "./StudentForm";

// CreateStudent Component
const CreateStudent = () => {
    const [formValues, setFormValues] =
        useState(
            {
                name: '',
                email: '',
                rollno: ''
            })
    // onSubmit handler
    const onSubmit =
        studentObject => {
            axios.post(
'http://localhost:4000/students/students',
                studentObject)
                .then(res => {
                    if (res.status === 200)
                        alert('Student successfully created')
                    else
                        Promise.reject()
                })
                .catch(err => alert('Something went wrong'))
        }

    // Return student form
    return (
        <StudentForm initialValues={formValues}
            onSubmit={onSubmit}
            enableReinitialize>
            Create Student
        </StudentForm>
    )
}

// Export CreateStudent Component
export default CreateStudent

//src/Components/edit-student.component.js

// EditStudent Component for update student data
// Import Modules
import React,
{
    useState,
    useEffect
} from "react";
import axios from "axios";
import StudentForm
    from "./StudentForm";

// EditStudent Component
const EditStudent = (props) => {
    const [formValues, setFormValues] =
        useState(
            {
                name: "",
                email: "",
                rollno: "",
            }
        );

    //onSubmit handler
    const onSubmit = (studentObject) => {
        axios
            .put(
"http://localhost:4000/students/students/" +
                props.match.params.id,
                studentObject
            )
            .then((res) => {
                if (res.status === 200) {
                    alert("Student successfully updated");
                    props.history.push("/student-list");
                } else Promise.reject();
            })
            .catch(
                (err) =>
                    alert("Something went wrong")
            );
    };

    // Load data from server and reinitialize student form
    useEffect(() => {
        axios
            .get(
"http://localhost:4000/students/update-student/"
                + props.match.params.id
            )
            .then((res) => {
                const {
                    name,
                    email,
                    rollno
                } = res.data;
                setFormValues(
                    {
                        name,
                        email,
                        rollno
                    });
            })
            .catch(
                (err) =>
                    console.log(err)
            );
    }, []);

    // Return student form
    return (
        <StudentForm
            initialValues={formValues}
            onSubmit={onSubmit}
            enableReinitialize>
            Update Student
        </StudentForm>
    );
};

// Export EditStudent Component
export default EditStudent;

//src/Components/student-list.component.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Table } from "react-bootstrap";
import StudentTableRow from "./StudentTableRow";

const StudentList = () => {
    const [students, setStudents] = useState([]);

    useEffect(() => {
        axios
            .get("http://localhost:4000/students/")
            .then(({ data }) => {
                setStudents(data);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);

    const DataTable = () => {
        return students.map((res, i) => {
            return <StudentTableRow
                obj={res} key={i} />;
        });
    };

    return (
        <div className="table-wrapper">
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Roll No</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>{DataTable()}</tbody>
            </Table>
        </div>
    );
};

export default StudentList;

//src/Components/StudentTableRow.js

import React from "react";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";
import axios from "axios";

const StudentTableRow =
    (props) => {
        const {
            _id,
            name,
            email,
            rollno
        } = props.obj;

        const deleteStudent = () => {
            axios
                .delete(
"http://localhost:4000/students/students/" + _id)
                .then((res) => {
                    if (res.status === 200) {
                        alert("Student successfully deleted");
                        window.location.reload();
                    } else Promise.reject();
                })
                .catch(
                    (err) =>
                        alert("Something went wrong"));
        };

        return (
            <tr>
                <td>{name}</td>
                <td>{email}</td>
                <td>{rollno}</td>
                <td>
                    <Link className="edit-link"
                        to={"/edit-student/" + _id}>
                        Edit
                    </Link>
                    <Button
                        onClick={deleteStudent}
                        size="sm" variant="danger">
                        Delete
                    </Button>
                </td>
            </tr>
        );
    };

export default StudentTableRow;

// server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
require('dotenv').config(); // For loading environment variables

// Import Express Routes
const studentRoute = require('../backend/routes/student.route');

// Load environment variables from .env file
const { MONGODB_URI, PORT } = process.env;

// Connecting to MongoDB Database
mongoose.connect('Your Connection String', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
})
    .then(() => {
        console.log('Database successfully connected!');
    })
    .catch((error) => {
        console.log('Could not connect to database: ' + error);
    });

// Initialize Express app
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.use('/students', studentRoute);

// Define the PORT
const port = PORT || 4000;

// Start the server
app.listen(port, () => {
    console.log('Connected to port ' + port);
});

// Handle 404 errors
app.use((req, res, next) => {
    res.status(404).send('Error 404: Not Found!');
});

// Global error handler
app.use((err, req, res, next) => {
    console.error(err.message);
    const status = err.statusCode || 500;
    res.status(status).send(err.message);
});

// backend/models/Student.js 

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

let studentSchema = new Schema({
    name: {
        type: String
    },
    email: {
        type: String
    },
    rollno: {
        type: Number
    }
}, {
    collection: 'students'
});

module.exports = mongoose.model('Student', studentSchema);

// backend/routes/student.route.js

const express = require('express');
const router = express.Router();
const Student = require('../models/Student'); // Student Model

// CREATE Student
router.post('/students', async (req, res, next) => {
    try {
        const data = await Student.create(req.body);
        console.log(data);
        res.json(data);
    } catch (error) {
        return next(error);
    }
});

// READ Students
router.get('/', async (req, res, next) => {
    try {
        const data = await Student.find();
        res.json(data);
    } catch (error) {
        return next(error);
    }
});

// UPDATE Student
router.route('/students/:id')
    // Get Single Student
    .get(async (req, res, next) => {
        try {
            const data = await Student.findById(req.params.id);
            res.json(data);
        } catch (error) {
            return next(error);
        }
    })
    // Update Student Data
    .put(async (req, res, next) => {
        try {
            const data = await Student.findByIdAndUpdate(req.params.id, {
                $set: req.body,
            }, { new: true });
            res.json(data);
            console.log("Student updated successfully!");
        } catch (error) {
            return next(error);
        }
    });

// DELETE Student
router.delete('/students/:id', async (req, res, next) => {
    try {
        const data = await Student.findByIdAndRemove(req.params.id);
        res.status(200).json({
            msg: data,
        });
    } catch (error) {
        return next(error);
    }
});

module.exports = router;