Code Snippets

Production ready Frontend + React + Tailwind setup

Frontend Setup with Vite + React + Tailwindterminal commands

# create project folder first 
npm create vite@latest

# inputs during setup:
# y
# project name → client
# framework → react
# variant → javascript
# rolldown vite → no
# install deps → y

cd client

# install tailwind (vite plugin)
npm install tailwindcss @tailwindcss/vite

Frontend Setup with Vite + React + Tailwind edit vite.config.js file

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Frontend Setup with Vite + React + Tailwind V4 edit index.css file

/* if we want to apply google fonts in our react , then we need to put its @import url('link') above the tailwindcss import statement

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

* {
    font-family: "Outfit", sans-serif;
}

*/

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

Package installation for React + Tailwind + Axios + react-router-dom

Frontend Setup with Vite + React + Tailwind + Axios install packages file

npm install axios react-router-dom  # cors package is not installed in frontend .

Routing in react with react-router-dom

Frontend Setup : react-router-dom import browser router in main.jsx file


import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')).render(
     <BrowserRouter >
          <StrictMode>
               <App />
          </StrictMode>
     </BrowserRouter>,
)

Frontend Setup in React + Nested Routing with react-router-dom App.jsx file


import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './pages/Home.jsx'
import Layout from './pages/Layout.jsx'
import Dashboard from './pages/Dashboard.jsx'
import Study from './pages/Study.jsx'
import Masti from './pages/Masti.jsx'
import View from './pages/View.jsx'

const App = () => {
     return (
          <Routes >

               <Route path="/" element={<Home />} /> 

               <Route path="app" element={<Layout />} >
                    <Route index element={<Dashboard />} />
                    <Route path="study" element={<Study />} />
                    <Route path="masti" element={<Masti />} />
               </Route>

               <Route path="/view" element={<View />} /> 
     
          </Routes>
     )
}

export default App

Frontend Setup + React + Nested Routing with react-router-dom Layout.jsx file


import React from 'react'
import { Outlet } from 'react-router-dom'
import Navbar from '../components/Navbar.jsx'

const Layout = () => {
     return (
          <div className='w-full min-h-screen bg-gray-50' >
               <Navbar /> {/* visible on each page , always  same*/}
               <Outlet /> {/* variable content , defined in app.jsx routing . Vo page ya component dikhega jisse url match karega. Pages Load inside Outlet.*/}
          </div>
     )
}

export default Layout

Frontend Setup + React + Nested Routing with react-router-dom Navbar.jsx file


import React from 'react'
import { Link } from 'react-router-dom'

const Navbar = () => {
     return (
          <div className='w-full bg-gray-800 text-white h-16 px-4 flex items-center justify-around'>
               <h1 className='text-xl font-bold'>
                    <Link to="/">My App</Link>
               </h1>
               <div>
                    <Link to="/app" className='ml-4 hover:text-gray-400'>Dashboard</Link>
                    <Link to="/app/study" className='ml-4 hover:text-gray-400'>Study</Link>
                    <Link to="/app/masti" className='ml-4 hover:text-gray-400'>Masti</Link>
               </div>
               <h1 className='text-md'>
                    <Link to="/view">View</Link>
               </h1>
          </div>
     )
}

export default Navbar

React + Tailwind Theme Toggler Code

Frontend Setup with Vite + React + Tailwind V4 App.jsx Theme toggler file


import { useEffect, useState } from "react";

export default function App() {

     const [theme, setTheme] = useState(() =>
          localStorage.getItem("theme") || "light"
     );

     useEffect(() => {
          document.documentElement.classList.toggle("dark", theme === "dark");
          localStorage.setItem("theme", theme);
     }, [theme]);

     return (
          // transition-colors un elements pe lagana hai jinka color change hoga, aur duration-500 se transition ki speed set kar sakte hai.
          <div className="transition-colors duration-500 min-h-screen flex flex-col items-center justify-center bg-white dark:bg-black text-black dark:text-white">

               <h1 className="text-3xl font-bold mb-4">
                    Dark Mode Test 🚀
               </h1>
          
               <button
                    onClick={() => setTheme(theme === "light" ? "dark" : "light")}
                    className="cursor-pointer px-5 py-2 rounded-lg 
                         bg-gray-200 dark:bg-gray-800 
                         hover:bg-gray-300 dark:hover:bg-gray-700
                         transition-all duration-200"
               >
                    Toggle Dark Mode
               </button>

          </div>
     );
}

Frontend Setup with Vite + React + Tailwind start frontend

npm run dev

Frontend Setup with Vite + React + react-router-dom + Tailwind + Axios folder structure

src/
 ├── assets/                  # this folder will contain icons / logos
 ├── App.css                  # delete this file
 ├── App.jsx                  # empty this file and make functional component by typing rafce ( routing page )
 ├── index.css                # empty this file and add tailwind import statement along with dark theme enabler
 ├── main.jsx
 ├── api/
 │    └── api.js              # setup axios here and give backend running port .
 │
 ├── pages/
 │    ├── Dashboard.jsx
 │    ├── Home.jsx
 │    ├── Login.jsx
 │    └── Logout.jsx
 │
 ├── components/
 │    ├── Navbar.jsx
 │    ├── Footer.jsx
 │    └── Card.jsx

Connecting React Frontend with backend

Connecting React Frontend with backend Frontend's .env

# Frontend me dotenv package install nhi kiya jata .

VITE_API_URL=http://localhost:8000 

# vo backend endpoint hai jispar hame request bhejni hai , it is necessary that its name starts with vite
# otherwise we will get "client password must be string error" because we are using .env file without dotenv package . Name must start with vite .

Connecting React Frontend with backend and making API with axios src / api / api.js

import axios from "axios"; 

const api = axios.create({ 
     baseURL: import.meta.env.VITE_API_URL, 
     withCredentials: true, 
}); 

export default api;

Connecting React Frontend with backend and making request from Frontend src / App.jsx

import React from 'react'
import { useState, useEffect } from 'react';
import api from "./api";


const App = () => {

     const [messages, setMessages] = useState([]);


     // this function runs once on the page load
     useEffect(() => {
          fetchMessages();
     }, []);


     const fetchMessages = async () => {
          try {
               const res = await api.get("/messages");
               setMessages(res.data);
          } catch (err) {
               console.log("Fetch error:", err);
          }
     };


     return (
          
     )
}

export default App

Production Ready Backend + PostgreSQL setup

Backend setup with Postgre SQL terminal commands

mkdir backend                      # make a backend folder in the project directory
cd backend                         # move into the backend folder

npm init -y                        # to make the package.json file

npm i express dotenv cors pg       # install necessary packages , cors package sirf backend me install kiya jata hai.
npm i -D nodemon                   # install nodemon as dev dependency

Backend Setup with PostgreSQL folder structure

backend/
 ├── node_modules/                  
 ├── configs/
 │    └── dotenv.js          
 ├── controllers/                  
 │    └── taskController.js          
 ├── db/
 │    └── db.js          
 ├── routes/
 │    └── taskRoutes.js
 ├── src/
 │    ├── server.js
 │    └── app.js 
 ├── .env                  
 ├── package-lock.json              
 └── package.json

Backend setup with Postgre SQL edit package.json

{
     "name": "backend",
     "version": "1.0.0",
     "type": "module",                  // ecmascript modern syntax
     "main": "src/server.js",               // starting file
     "scripts": {
          "start": "node src/server.js"  // fire npm run start to run backend in production
          "dev": "nodemon src/server.js"  // fire npm run dev to run backend in development mode
     }
}

Backend setup with PostgreSQL DB connection backend's .env file

PORT=8000                          # backend running port

DB_HOST=localhost
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=12345
DB_NAME=testdb

FRONTEND_URL=http://localhost:5173 # Frontend is running on this port

PostgreSQL common config / dotenv.js file

import dotenv from "dotenv";
dotenv.config();

PostgreSQL common db / db.js file

import pkg from "pg";
const { Pool } = pkg;





const pool = new Pool({
  host: process.env.DB_HOST,
  port: process.env.DB_PORT, // db port 5432
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
});





export const connectDB = async () => {
     try {
          const client = await pool.connect();
          console.clear();
          console.log("DB connected successfully");
     } catch (err) {
          console.error("PostgreSQL connection failed", err);
          throw err; 
     }
};





export default pool;

Backend setup with express + postgres src / app.js

import express from 'express'; // must to have package 
const app = express();         // app setup
app.use(express.json());       // to add body property in the request





import cors from 'cors';       // must to have 
app.use(cors({                 // cors setup with frontend url
     origin: process.env.FRONTEND_URL,
     credentials: true
}));





// mount routes here
import taskRoutes from '../routes/taskRoutes.js';
app.use('/api/tasks', taskRoutes );





export { app };

Backend setup with express + postgres src / server.js

import '../configs/dotenv.js'
import { connectDB } from '../db/db.js';    // ab is pool variable se queries run hongi
import { app } from './app.js';





const PORT = process.env.PORT || 8000;
connectDB()
     .then(() => {
          app.listen(PORT, () => {
               console.log(`Server is running on port ${PORT}`);
          });
     })
     .catch((error) => {
          console.error("Failed to connect to the database", error);
     });

Backend setup main with express + starting basic routes / taskRoutes.js

import { Router } from "express";
const router = Router();





import { deleteTask, saveTask, fetchAllTasks, updateTask, toggleTaskIsDone } from '../controllers/taskController.js';





router.get('/messages', fetchAllTasks);
router.post('/save', saveTask);
router.put('/update/:id', updateTask);
router.put('/toggleCheckbox/:id', toggleTaskIsDone);
router.delete('/delete/:id', deleteTask);





export default router;

Backend setup with express + postgres controllers / taskController.js

import pool from "../db/db.js";



export const deleteTask = async (req, res) => {

     const { id } = req.params;

     try {
          await pool.query('DELETE FROM messages WHERE id = $1', [id]);
          res.status(200).json({ message: 'Deleted Successfully' });
     } catch (err) {
          console.log(err);
          res.status(500).json({ error: 'Delete failed' });
     }  
}





export const saveTask = async (req, res) => {
     
     const { text } = req.body;

     try {
          await pool.query('INSERT INTO messages (text) VALUES($1) RETURNING * ', [text]);
          res.sendStatus(200);// success signal
     } catch (err) {
          res.status(500).send('ERROR');
     }
}






export const fetchAllTasks = async (req, res) => {
     try {
          const result = await pool.query('SELECT * FROM messages ORDER by id DESC');
          res.json(result.rows);
     } catch (err) {
          console.error(err);
          res.status(500).send('Error');
     }
}





export const updateTask = async (req, res) => {
     try {
          const { id } = req.params;
          const { text } = req.body;

          await pool.query('UPDATE messages SET text = $1 WHERE id = $2', [text, id]);
          res.sendStatus(200);// success signal
     } catch (err) {
          console.log(err.message);
          res.status(500).send('Server Error 05');
     }
}







export const toggleTaskIsDone = async (req, res) => {
     try {
          const { id } = req.params;
          const { completed } = req.body;

          await pool.query('UPDATE messages SET completed = $1 WHERE id = $2', [!completed, id]);
          res.sendStatus(200);// success signal
     } catch (err) {
          console.log(err.message);
          res.status(500).send('Server Error 07');
     }
}

PERN Stack api handling

PERN stack frontend and backend interaction via apijs code

// frontend CREATE

// add data in the database
const handleSubmit = async () => {

     try {
          await api.post("/save", { text: inputText });
     } catch (err) {
          console.log("Here is the valuable error.", err);
     }

     setText("");
     fetchMessages();
};

// backend 

//API route to save the messages in the db
app.post('/save', async (req, res) => {

     const { text } = req.body;

     try {
          await pool.query('INSERT INTO messages (text) VALUES($1)', [text]);
          res.sendStatus(200);// success signal
     } catch (err) {
          console.error(err);
          res.status(500).send('ERROR');
     }
});





// frontend READ

// fetching content to populate frontend 
const fetchMessages = async () => {
     try {
          const res = await api.get("/messages");
          setMessages(res.data);
     } catch (err) {
          console.log("Fetch error:", err);
     }
};

// api route to display messages on the frontend 
app.get('/messages', async (req, res) => {
     try {
          const result = await pool.query('SELECT * FROM messages ORDER by id DESC');
          res.json(result.rows);
     } catch (err) {
          console.error(err);
          res.status(500).send('Error');
     }
});





// frontend UPDATE

// update data in the database
const handleUpdateNote = async () => {
     await api.put(`/update/${editWalaContent.id}`, { text: editWalaContent.text });
     setShowEditBox(false);
     setEditWalaContent({ id: null, text: "" });
     fetchMessages();
};

// backend

// api route to update a specific note in the db
app.put('/update/:id', async (req, res) => {
     try {
          const { id } = req.params;
          const { text } = req.body;

          await pool.query('UPDATE messages SET text = $1 WHERE id = $2', [text, id]);
          res.sendStatus(200);// success signal
     } catch (err) {
          console.log(err.message);
          res.status(500).send('Server Error 05');
     }
})





// frontend DELETE

// delete data from the database
const handleDelete = async (id) => {
     if (confirm("Are you sure you want to delete this ?")) {
          try {
               const res = await api.delete(`/delete/${id}`);
               alert(res.data.message); // show backend message "Deleted Successfully"
               fetchMessages();
          } catch (err) {
               console.log("Delete error.", err);
          }
     }
     return;
};

// backend

app.delete('/delete/:id', async (req, res) => { // backend api endpoint 

     const { id } = req.params;

     try {
          await pool.query('DELETE FROM messages WHERE id = $1', [id]);
          res.status(200).json({ message: 'Deleted Successfully' });
     } catch (err) {
          console.log(err);
          res.status(500).json({ error: 'Delete failed' });
     }
});

Backend setup DB and Table creating sql query db.sql

CREATE DATABASE testdb;

-- connect to testdb then run:
CREATE TABLE messages (
     id SERIAL PRIMARY KEY,
     text VARCHAR(255),
     completed BOOLEAN DEFAULT false
);

Postgres SQL Reference Queries

Dummy Reference SQL Query db.sql

-- =========================
-- Countries Table
-- =========================
CREATE TABLE countries (
    id SERIAL PRIMARY KEY
        -- SERIAL: auto-increment integer (Postgres way)

    ,name VARCHAR(100) NOT NULL UNIQUE
        -- VARCHAR(100): max 100 chars
        -- NOT NULL: required
        -- UNIQUE: no duplicate country names
);



-- =========================
-- Users Table
-- =========================
CREATE TABLE users (
    id SERIAL PRIMARY KEY
        -- unique id, auto-increment

    ,username VARCHAR(50) NOT NULL UNIQUE
        -- short text, must be unique

    ,email VARCHAR(100) NOT NULL UNIQUE
        -- email stored as string, unique + required

    ,password_hash TEXT NOT NULL
        -- TEXT: long string (hashed password)

    ,title TEXT NOT NULL 
        -- TEXT: for unknown length , no limit 

    ,age INT CHECK (age >= 0)
        -- INT: numeric
        -- CHECK: prevents negative values

    ,salary DECIMAL(10,2) DEFAULT 0.00
        -- DECIMAL(10,2): exact value (10 digits, 2 decimal places)
        -- used for money (never FLOAT)

    ,is_active BOOLEAN DEFAULT TRUE
        -- BOOLEAN: true/false flag
        -- default user is active

    ,date_of_birth DATE
        -- DATE: YYYY-MM-DD format

    ,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        -- auto set when row is inserted

    ,updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        -- ⚠️ Postgres does NOT auto-update this
        -- need trigger if you want auto-update

    ,role TEXT DEFAULT 'user'
        CHECK (role IN ('user', 'admin', 'moderator'))
        -- ENUM alternative in Postgres
        -- flexible + easy to modify

    ,preferences JSONB
        -- JSONB: binary JSON (faster, indexable)

    ,country_id INT
        -- foreign key reference

    ,CONSTRAINT fk_country
        FOREIGN KEY (country_id)
        REFERENCES countries(id)
        ON DELETE SET NULL
        -- if country deleted → keep user but nullify ref

        ON UPDATE CASCADE
        -- if country id changes → update here automatically
);


-- =========================
-- Trigger Function 
-- =========================

-- function to update timestamp
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
   NEW.updated_at = CURRENT_TIMESTAMP;
   RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- trigger
CREATE TRIGGER set_updated_at
BEFORE UPDATE ON users
FOR EACH ROW
EXECUTE FUNCTION update_updated_at_column();




-- =========================
-- Upsert command in Postgres
-- =========================

INSERT INTO videos (video_id, title, views)
VALUES ('abc123', 'My Video', 100)
ON CONFLICT (video_id)
DO UPDATE SET
  title = EXCLUDED.title,
  views = EXCLUDED.views;

-- if video_id = abc123 does not exist in the db , insert this data. 
-- if video_id = abc123 already exists in the db , update its title and views.

MongoDB Data Modelling

Backend MongoDB Data Modeling Common code snippet models/any.model.js

import mongoose from "mongoose";

const userSchema = new mongoose.Schema({} , {timestamps : true})

export const User = mongoose.model("User" , userSchema)

Backend MongoDB Data Modeling models/category.model.js

import mongoose from "mongoose";

const categorySchema = new mongoose.Schema({
     name : {
          type: String ,
          required: true, 
          unique: true
     },
     createdAt: {
          type: Date,
          default: Date.now
     }
} , {timestamps : true})

export const Category = mongoose.model("Category" , categorySchema)

Backend MongoDB Data Modeling models/todo.model.js

import mongoose from "mongoose";

const todoSchema = new mongoose.Schema({
     task : {
          type: String ,
          required: true, 
     },
     completed: {
          type: Boolean,
          default: false
     },
     category: {
          type: mongoose.Schema.Types.ObjectId,
          ref: "Category", 
          required: true
     }
     createdAt: {
          type: Date,
          default: Date.now
     }
} , {timestamps : true})

export const Todo = mongoose.model("Todo" , todoSchema)

Backend MongoDB setup

Production Ready Backend Setup With MongoDB AtlasProject folder : MERN Todo App/

mkdir backend
cd backend

npm init -y

New-Item Readme.md       # to create a new file

Git Initializationbash terminal commands

# Whenever we want to initialize a git repository in the backend folder , here are the commands:
# Be in the project root and not inside the backend folder and run these commands:

git init
git add .
git commit -m "Initial commit"

# Then go on the github and create a new repository without Readme file and gitignore.

git branch -M main # to rename the existing branch to main
git remote add origin <repository url>
git push -u origin main

# git does not tracks and pushes empty folders .

Production Ready Backend Setup With MongoDB AtlasProject folder : MERN Todo App/backend

# Making folder structure in the backend folder

cd backend
mkdir public           # for static files like images
cd public
mkdir uploads          # for uploaded files like profile pics

cd uploads 
New-Item .gitkeep      # because git does not track empty folders , so we add this .gitkeep file to track this uploads folder in git

cd ../..               # to come back to the backend folder

New-Item .gitignore    # to create a .gitignore file in the backend folder

# Now use a free gitignore generator to generate a node gitignore file and copy paste its content in the backend's .gitignore file to ignore node_modules and other unnecessary files from git tracking and pushing.

New-Item .env          # to create a .env file in the backend folder

Production Ready Backend Setup With MongoDB Atlas/backend folder setup

# Now we are going to create an src folder in which all of our code will go.

mkdir src
cd src

# These comma seperated commands are for powershell .

New-Item index.js, app.js, constants.js     # to create these files in the src folder

mkdir controllers, db, middlewares, models, routes, utils

Production Ready Backend Setup/backend folder structure

backend/
│
├── public/
│   └── uploads/
│       └── .gitkeep
│
├── src/
│   ├── index.js
│   ├── app.js
│   ├── constants.js
│   │
│   ├── controllers/
│   ├── db/
│   ├── middlewares/
│   ├── models/
│   ├── routes/
│   └── utils/
│
├── .gitignore
├── .env
├── Readme.md
├── package.json

Production Ready Backend Setup With MongoDB AtlasPackage installation

# Installing backend dependencies

npm i -D nodemon
npm i express mongoose dotenv cors cookie-parser

Production Ready Backend Setup With MongoDB AtlasProject folder : MERN Todo App / backend

//   Edit package.json file to be compatible with the latest es6 syntax 

{
     "type": "module",
     "main": "src/index.js",
     "scripts": {
          "start": "nodemon src/index.js"
     }
}

Production Ready Backend Setup With MongoDB AtlasAdding data to the backend / .env file

PORT=8000
MONGODB_URI=mongodb+srv://user:password@cluster0.9kmaxor.mongodb.net/app-name?appName=Cluster0
CORS_ORIGIN=http://localhost:5173  # frontend is running on this port

# user is the username of the mongodb atlas cluster and password is the password of that username and app-name is the name of the database in which we want to store our data .

Production Ready Backend Setup With MongoDB AtlasMain code backend / src / db / db.js


// Database se baat karne wale code ko try catch me wrap karo aur async await ka hamesha use karo. 

// db.js file is meant to do some specific tasks .

// @ db connection
// @ dotenv setup
// @ dns setup to avoid db connection error


import mongoose from "mongoose";


import dotenv from "dotenv";
dotenv.config();


import dns from "dns";
dns.setServers(
     ['1.1.1.1']
)


const connectDB = async () => {
     try {
          const connectionInstance = await mongoose.connect(`${process.env.MONGODB_URI}`);
          console.log("DB connected successfully");
     } catch (error) {
          console.log("DB connection error 1 :", error);
          process.exit(1);
     }
}


export default connectDB;

Production Ready Backend Setup With MongoDB AtlasMain code backend / src / app.js

// Initializes and configures the Express application.
// Sets up middlewares for CORS, JSON & URL-encoded parsing, cookies, and static file serving.

// app.js file is meant to do some specific tasks .

// @ import express and make app from it
// @ setup cors
// @ setup body parser of express for json and urlencoded data
// @ routes mounting : base path define karte hai , actual endpoints routes file me hote hai.


import express from 'express';
import cors from 'cors';
import cookieParser from 'cookie-parser';


const app = express();


app.use(cors({
     origin: process.env.CORS_ORIGIN,
     credentials: true,
}));


app.use(express.json({
     limit: "16kb"
}));


app.use(express.urlencoded({
     extended: true,
     limit: "16kb"
}))


// public folder me ham apne static files , images rakhte hain.
app.use(express.static("public"));


import taskRouter from "./routes/TaskRouter.js";
app.use('/api/tasks', taskRouter);


export { app };

Production Ready Backend Setup With MongoDB AtlasMain code backend / src / index.js

// We have already setted up the dotenv in the db.js file , so we just need to import the connectDB function from db.js file and call it here to connect to the database.


// index.js file is meant to do some specific tasks .

// @ first of all import db.js file 
// @ then import app from app.js file
// @ connect to the db and app.listen 


import connectDB from "./db/db.js";
import { app } from "./app.js";


const port = process.env.PORT || 8000


connectDB()
.then(() => {
     app.listen( port , () => {
        console.log(`Server is running on port ${port}`);
     });
})
.catch((error) => {
    console.error("Failed to connect to the database", error);
});


// writing the api end points
// testing endpoint : open http://localhost:8000
app.get('/', (req, res) => {
     res.send('Hello from my app');
})

Production Ready Backend Setup With MongoDB AtlasMain code backend / src / Routes / TaskRouter.js

// create router with express 
import { Router } from 'express';
const router = Router();





// import all the controllers
import { createTask, fetchAllTasks, updateTaskById, deleteTaskById, toggleTaskIsDone  } from '../Controllers/TaskController.js';





// all the routes are here
router.get('/', fetchAllTasks);
router.post('/', createTask);
router.put('/:id', updateTaskById);
router.patch('/toggleIsDone/:id', toggleTaskIsDone);
router.delete('/:id', deleteTaskById);





export default router;

Production Ready Backend Setup With MongoDB AtlasMain code backend /src / Controllers / taskController.js

// TaskController.js is meant to do some specific task

// @ import TaskModel if its mongodb and pool if it is postgres 
// @ db interaction 
// @ export controller functions from here





import TaskModel from "../Models/task.model.js"





// define controller functions here and export them 
export const createTask = async (req, res) => {
     const data = req.body;
     try {
          const model = new TaskModel(data);
          await model.save();
          res.status(201).json({message: 'Task is created' , success: true})
     } catch {
          res.status(500).json({message: "Failed to create task" , success: false});
     }
}





export const fetchAllTasks = async (req, res) => {
     try {
          const data = await TaskModel.find({}).sort({ createdAt: -1 });
          res.status(200).json({message: 'All Tasks' , success: true, data})
     } catch (error) {
          res.status(500).json({message: "Failed to fetch tasks" , success: false});
     }
}





export const updateTaskById = async (req, res) => {
     try {
          const id = req.params.id;
          const body = req.body;
          await TaskModel.findByIdAndUpdate(id, body, { new: true });
          res.status(200).json({message: 'Task updated' , success: true })
     } catch {
          res.status(500).json({message: "Failed to update task" , success: false});
     }
}





export const toggleTaskIsDone = async (req, res) => {
     try {
          const id = req.params.id;
          const task = await TaskModel.findById(id);
          if (!task) {
               return res.status(404).json({message: 'Task not found', success: false});
          }
          task.isDone = !task.isDone;
          await task.save();
          res.status(200).json({message: 'Task updated' , success: true })
     } catch {
          res.status(500).json({message: "Failed to update task" , success: false});
     }
}






export const deleteTaskById = async (req, res) => {
     try {
          const id = req.params.id;
          await TaskModel.findByIdAndDelete(id);
          res.status(200).json({message: 'Task is Deleted' , success: true })
     } catch {
          res.status(500).json({message: "Failed to delete task" , success: false});
     }
}

Redux Toolkit Setup

Using Redux state management to make a counterPackage installation

npm i @reduxjs/toolkit react-redux

Using Redux state management to make a counterMaking the folder structure + files

cd src; mkdir features; cd features; mkdir counter; cd counter; New-Item counterSlice.js; cd ../../..
cd src; mkdir redux; cd redux; New-Item store.js; cd ../..

Using Redux state management to make a countersrc / redux / store.js

// configure store

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

Using Redux state management to make a counterProvider wrap in main.jsx

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Provider } from 'react-redux'
import { store } from '../src/redux/store.js'


// So that all the store variables are accessible in the entire App
createRoot(document.getElementById('root')).render(
     <Provider store={store}>
          <App />
     </Provider>
)

Using Redux state management to make a countersrc / features / counter / counterSlice.js

import { createSlice } from '@reduxjs/toolkit'


// Slice ke andar initial state hoti hai aur reducer functions hote hai
export const counterSlice = createSlice({
     name: 'counter',
     initialState: {
          value: 0
     },
     reducers: {
          increment: state => {
               state.value += 1
          },
          decrement: state => {
               state.value -= 1
          },
          incrementByAmount: (state, action) => {
               state.value += action.payload
          }
     }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Using Redux state management to make a counterRegister Slice reducers in the store.js

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

Using Redux state management to make a counterCreate a Counter Component : components / Counter.jsx

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from '../features/counter/counterSlice.js'


// now counter component does not need props . jo bhi data is component ko chahiye tha . vo sabhi ise milgaya.
// state variable bhi jisse UI update hoti hai , aur uska setter function bhi .
export function Counter() {
     const count = useSelector(state => state.counter.value)
     const dispatch = useDispatch()

     return (
          // Main Container: Screen ke beech mein lane ke liye aur dark background ke liye
          <div className="flex min-h-screen items-center justify-center bg-slate-950 p-4">

               <div className="flex flex-col items-center gap-6 rounded-2xl bg-slate-900 p-8 shadow-2xl border border-slate-800">

                    <h1 className="text-sm font-semibold uppercase tracking-widest text-slate-500">
                         Redux Counter
                    </h1>

                    <div className="flex items-center gap-8">
                         {/* Decrement Button */}
                         <button
                              className="flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl font-bold text-red-500 transition-all hover:bg-red-500 hover:text-white active:scale-90"
                              aria-label="Decrement value"
                              onClick= { ( => dispatch(decrement())}
                         >
                              -
                         </button>

                         {/* Count Display */}
                         <span className="text-6xl font-mono font-bold text-white tabular-nums">
                              {count}
                         </span>

                         {/* Increment Button */}
                         <button
                              className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500/10 text-2xl font-bold text-emerald-500 transition-all hover:bg-emerald-500 hover:text-white active:scale-90"
                              aria-label="Increment value"
                              onClick={() => dispatch(increment())}
                         >
                              +
                         </button>
                    </div>

                    <p className="text-xs text-slate-400">
                         Click the buttons to update the state
                    </p>
               </div>
          </div>
     )
}

Using Redux state management to make a counterMount the Counter in the App.jsx

import React from 'react'
import { Counter } from './components/Counter'

const App = () => {
     return (
          <div>
               // now there is no need to pass props to this counter component
               <Counter />
          </div>
     )
}

export default App

My Code Snippets