Build a Simple Full-Stack Application with CRUD Functionality

A MERN Stack is the most popular framework, If you are thinking of learning this then starting with crud is a great choice. CRUD means Create, Read, Update, and Delete, Learning this is one of the most important parts of your development journey almost in every project we will use CRUD operations.

In my project, I implement CRUD operations in the MERN stack, where I use MongoDB as the database and Mongoose as an ORM for performing operations on the database. Express serves as the backend framework, and React is used as the frontend library. As you already know, let's dive into the main topic: CRUD.

Backend (Express + MongoDB + Mongoose)

// Importing Important Packages.
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();

Middleware Configuration

// Middleware
app.use(cors());
app.use(bodyParser.json());

Connection to Mongodb Database.

mongoose.connect('your_mongodb_connection_string')
    .then(() => console.log('MongoDB connected'))
    .catch(err => console.log(err));

Define the Task schema

const taskSchema = new mongoose.Schema({
    title: String,
    description: String,
    completed: Boolean
});

// Create the Task model
const Task = mongoose.model('Task', taskSchema);

Create the API routes

// Create a task
app.post('/tasks', async (req, res) => {
    const newTask = new Task(req.body);
    await newTask.save();
    res.status(201).json(newTask);
});

// Get all tasks
app.get('/tasks', async (req, res) => {
    const tasks = await Task.find();
    res.json(tasks);
});

// Update a task
app.put('/tasks/:id', async (req, res) => {
    const updatedTask = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.json(updatedTask);
});

// Delete a task
app.delete('/tasks/:id', async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.status(204).end();
});

Start the server

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});
    

Frontend (React + Axios)

// Importing React Modules.
import React, { useState, useEffect } from 'react';
import axios from 'axios';

Define Task Component

function Task() {
    const [tasks, setTasks] = useState([]);
    const [newTask, setNewTask] = useState({ title: '', description: '', completed: false });

    // Fetch tasks from the backend
    useEffect(() => {
        axios.get('http://localhost:5000/tasks')
            .then(response => {
                setTasks(response.data);
            })
            .catch(error => console.log(error));
    }, []);

    // Handle task creation
    const handleAddTask = () => {
        axios.post('http://localhost:5000/tasks', newTask)
            .then(response => {
                setTasks([...tasks, response.data]);
                setNewTask({ title: '', description: '', completed: false });
            })
            .catch(error => console.log(error));
    };

    // Handle task deletion
    const handleDeleteTask = (id) => {
        axios.delete(`http://localhost:5000/tasks/${id}`)
            .then(() => {
                setTasks(tasks.filter(task => task._id !== id));
            })
            .catch(error => console.log(error));
    };

    // Handle task update
    const handleUpdateTask = (id) => {
        const updatedTask = { ...newTask, completed: !newTask.completed };
        axios.put(`http://localhost:5000/tasks/${id}`, updatedTask)
            .then(response => {
                setTasks(tasks.map(task => (task._id === id ? response.data : task)));
            })
            .catch(error => console.log(error));
    };

    return (
        <div>
            <h1>Task Manager</h1>
            <div>
                <input
                    type="text"
                    placeholder="Task Title"
                    value={newTask.title}
                    onChange={e => setNewTask({ ...newTask, title: e.target.value })}
                />
                <input
                    type="text"
                    placeholder="Task Description"
                    value={newTask.description}
                    onChange={e => setNewTask({ ...newTask, description: e.target.value })}
                />
                <button onClick={handleAddTask}>Add Task</button>
            </div>
        
            <ul>
                {tasks.map(task => (
                    <li key={task._id}>
                        <h3>{task.title}</h3>
                        <p>{task.description}</p>
                        <button onClick={() => handleUpdateTask(task._id)}>Toggle Completed</button>
                        <button onClick={() => handleDeleteTask(task._id)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default Task;
    

What will you learn from this project?

• How to perform database queries.
• How to create API endpoints, such as PUT, GET, POST, and DELETE. You will also learn about query parameters, how to access their values, how to send responses, and how to parse request bodies using middlewares like body-parser, and much more.
• You will learn how useState works and how it triggers component re-renders after an update.
• Key methods and concepts such as map, filter, the spread operator, axios, and more.