Shubham Tech. Blog's

Building a ShelfLife Household Inventory Tracker — Frontend

Shubham Kumar Singh — Wed, 20 May 2026 16:56:02 GMT

In the previous blog, we designed and built the backend architecture for ShelfLife — a collaborative household inventory tracking application focused on reducing food waste.

Backend Blog: https://shubhamsinghbundela.hashnode.dev/building-a-shelflife-household-inventory-tracker-backend

Now it’s time to build the frontend application that users will interact with daily.

Why ShelfLife?

In many shared households:

Multiple people buy groceries
Items are stored in different places
Expiry dates get ignored
Food gets wasted

ShelfLife aims to solve this problem collaboratively.

Step 1: Setting Up the Project with Vite

We start by creating the React application using Vite.

Why Vite?

Because modern frontend development requires fast feedback loops and better developer experience.

Compared to older tooling like Create React App, Vite provides:

Extremely fast startup time
Instant Hot Module Replacement (HMR)
Lightweight configuration
Faster build.

Create the project:

npm create vite@latest

Start the development server:

npm run dev

Step2: Deciding the Folder Structure

One of the most important frontend decisions is folder organization.

I followed ideas inspired by https://www.joshwcomeau.com/react/file-structure/ and adapted them for this project.

Current structure:

src/
 ├── assets/
 ├── components/
 │    ├── auth/
 │    │     └── Login.jsx
 │    │
 │    ├── dashboard/
 │    │     └── Dashboard.jsx
 │
 ├── routes/
 │    └── index.js
 │
 ├── App.jsx
 └── main.jsx

Why This Structure?

Instead of grouping everything by file type only, I grouped components by feature.

Benefits:

Better scalability
Components remain discoverable
Features stay isolated

For example:

components/auth

contains all authentication-related components.

Similarly:

components/dashboard

contains dashboard-related components.

This structure becomes extremely helpful as the application grows.

Step3 : Understanding `@` Alias Imports in React + Vite

In this project, I’m using the @ alias everywhere instead of relative paths, so before moving forward, let’s understand what @ actually means ?

@ is simply an alias that points to the src folder.

Meaning:
@ -> src

So:

@/components/auth/Login

actually means:

src/components/auth/Login

Why Use Alias Imports?

Without aliases, imports can become messy very quickly.

Example:

../../../components/auth/Login

As projects grow, relative paths become difficult to read and maintain.

Using aliases keeps imports clean and predictable:

@/components/auth/Login

Benefits:

Cleaner imports
Easier refactoring
Better readability
Simpler navigation in large projects

Configuring @ Alias in Vite

To make alias imports work, we need to configure Vite.

Inside:

vite.config.js

add:

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

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

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Understanding the Configuration

"@": path.resolve(__dirname, "./src")

means:

Whenever React sees "@",
replace it with the src folder path.

So:

@/components/dashboard/Dashboard

becomes:

src/components/dashboard/Dashboard

automatically.

Step 4: Installing React Router DOM

Since ShelfLife is a multi-page application, we need routing.

Install React Router DOM:

npm install react-router-dom

React Router DOM helps us create client-side routing without full page refreshes.

Example:

/         -> Join Household Page
/items    -> Items Dashboard

Before setting up routes, I had to decide which routing approach I wanted to use.

React Router provides multiple routing modes, but for ShelfLife I decided to use:

which is part of React Router’s Declarative Mode.

Why I Chose BrowserRouter

ShelfLife is primarily a dashboard-style application where most pages are accessed after authentication.

For this kind of application, client-side routing works extremely well because:

Navigation feels instant
No full page refreshes
Simpler project structure
Easier mental model
Perfect for SPA (Single Page Applications)

I did not need advanced framework features like:

Server Side Rendering (SSR)
Route loaders/actions
Full-stack routing

So using BrowserRouter kept the architecture simple and predictable.

The routing flow looks like:

BrowserRouter
   ↓
Routes
   ↓
Outlet
   ↓
Child Pages

Step 5: Setting Up Centralized Routing

I decided to use centralized route configuration.

Why?

Because I wanted:

All routes visible in one place
Simpler mental model
Predictable architecture
Better scalability

Creating the Route Configuration

Inside:

src/routes/index.js

we create all application routes.

import { lazy } from "react";

export const routes = [
  {
    path: "",
    component: lazy(() =>
      import("@/components/joinHouseHold/JoinHouseHold")
    ),
  },
  {
    path: "/items",
    component: lazy(() =>
      import("@/components/dashboard/items")
    ),
  },
];

Understanding lazy()

lazy(() => import(...))

is React’s implementation of lazy loading.

Lazy loading is a performance optimization technique where components are downloaded only when they are actually needed instead of loading everything upfront.

This means components load only when required.

Example:

JoinHouseHold component loads only when user visits /
Items component loads only when user visits /items

Benefits:

Smaller initial bundle size
Better performance
Faster initial page load
Reduced unnecessary JavaScript downloads

Step 6: Creating a Shared Layout Route

Most pages inside ShelfLife share the same layout structure:

Navbar
Main Content
Footer

Instead of repeating these components inside every page, I created a reusable layout route.

Inside:

src/components/main/Body.jsx

import { Outlet } from "react-router-dom";
import Footer from "./Footer";
import Navbar from "./Navbar";

const Body = () => {
  return (
    
      

      
        
      

      
    
  );
};

export default Body;

Understanding Outlet

is one of the most important concepts in React Router.

It acts as a placeholder where child routes render dynamically.

Example:

/        -> JoinHouseHold renders inside Outlet
/items   -> Items page renders inside Outlet

This allows us to create reusable layouts very easily.

The final layout structure becomes:

Navbar
   ↓
Outlet (Dynamic Page Content)
   ↓
Footer

Step 7: Configuring the App Router

Inside:

src/App.jsx

import { Suspense } from "react";
import "@/App.css";

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

import Body from "@/components/main/Body";
import { routes } from "@/routes";

function App() {
  return (
    
      Loading...}>
        
          }>
            {routes.map((route) => {
              const Component = route.component;

              return (
                }
                />
              );
            })}
          
        
      
    
  );
}

export default App;

Understanding BrowserRouter

enables browser-based client-side routing using URLs.

Without it, React Router cannot manage page navigation.

Understanding Routes

acts as a container for all route definitions.

Understanding Route

} />

means:

/items -> render Items component

Understanding Suspense

Since we are using lazy loading, React needs a fallback UI while components are downloading.

Loading...}>

shows loading content until the lazy-loaded component becomes available.

Step 8: Setting Up Material UI

Now that the routing architecture was ready, the next step was building the actual user interface for ShelfLife.

For the frontend UI library, I decided to use Material UI.

Why Material UI?

Because ShelfLife is a dashboard-oriented application and Material UI provides:

Prebuilt production-ready components
Consistent design system
Faster UI development
Excellent form components
Responsive layouts
Theme customization support

This allows us to focus more on application logic instead of spending excessive time building UI components from scratch.

Installing Material UI

To install Material UI and its required styling dependencies:

npm install @mui/material @emotion/react @emotion/styled

Understanding Emotion

You may notice two additional packages:

@emotion/react
@emotion/styled

Material UI uses Emotion internally as its styling engine.

Emotion helps Material UI:

Generate dynamic styles
Handle component-based styling
Support theming
Optimize CSS performance

Without these packages, Material UI components will not work properly.

Creating the Global Theme

Since ShelfLife is focused on freshness tracking and inventory management, I wanted the application to have a green-themed design system representing freshness and sustainability.

Inside:

src/theme.js

we create a global Material UI theme.

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#2e7d32",
    },

    secondary: {
      main: "#66bb6a",
    },

    background: {
      default: "#f4f9f4",
      paper: "#ffffff",
    },
  },
});

export default theme;

Understanding createTheme()

createTheme()

creates a centralized design system for the application.

This allows all Material UI components to automatically use the same:

Colors
Typography
Spacing system
Component styling

For example:

will automatically use:

#2e7d32

from the theme configuration.

Configuring ThemeProvider

To apply the theme globally, we wrap the application with:

Inside:

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";

import {
  ThemeProvider,
} from "@mui/material/styles";

import CssBaseline from "@mui/material/CssBaseline";

import theme from "./theme";

ReactDOM.createRoot(
  document.getElementById("root")
).render(
  
    
    
  
);

Understanding CssBaseline

acts as a global CSS reset for Material UI applications.

It helps:

Remove inconsistent browser styling
Apply cleaner default styles
Normalize margins and typography
Apply the theme background globally

Step 9: Setting Up Global State Management with Redux Toolkit

As ShelfLife started growing, managing shared application state became important.

For example:

Logged-in user information
Authentication state
Household data
Shared inventory information

Passing this data manually through props across multiple components would quickly become difficult to maintain.

To solve this, I decided to use Redux Toolkit.

Installing Redux Toolkit

To set up Redux Toolkit, install:

npm install @reduxjs/toolkit react-redux

Understanding the Packages

@reduxjs/toolkit

provides the modern Redux APIs for creating stores and slices.

react-redux

connects Redux with React components.

I followed the official Redux Toolkit Quick Start documentation:

Redux Toolkit Quick Start Guide

Why I Introduced Redux Toolkit

As the application started interacting with the backend API, multiple components needed access to the same server-side data.

For example:

Logged-in user information
Household details
Shared inventory items
Authentication state

Without global state management, this data would need to be passed manually through props across many components, which quickly becomes difficult to maintain.

To solve this, I introduced Redux Toolkit as a centralized global store for managing server-driven application state.

The idea is simple:

Backend API
    ↓
Frontend fetches data
    ↓
Redux Store
    ↓
Any Component Can Access It

This allows data coming from the server to be stored centrally and shared across the entire application efficiently.

Benefits of This Approach

Avoids prop drilling
Centralized application state
Easier data sharing between components

Creating the Global Store

Inside:

src/store/appStore.js

I created the main Redux store.

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

const appStore = configureStore({
  reducer: {
    user: userReducer,
  },
});

export default appStore;

The store acts as a centralized container for the entire application state.

Current store structure:

store
 └── user

Creating the User Slice

Redux Toolkit organizes state into smaller isolated pieces called slices.

Inside:

src/store/userSlice.js

I created the user slice.

import { createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
  name: "user",
  initialState: null,

  reducers: {
    addUser: (state, action) => {
      return action.payload;
    },

    removeUser: (state, action) => {
      return null;
    },
  },
});

export const { addUser, removeUser } = userSlice.actions;

export default userSlice.reducer;

Providing the Redux Store to the Application

After creating the store, the next step was making it accessible throughout the entire application.

Inside:

src/App.jsx

I wrapped the application using Redux Provider.

import { Provider } from "react-redux";
import appStore from "@/store/appStore";

Understanding Provider

connects React with the Redux store.

Without it, components cannot access global state.

Once wrapped, any component inside the application can:

Read state using useSelector
Update state using useDispatch

Step 10: Setting Up Axios

Now let’s connect the frontend with the backend

Axios helps simplify:

API requests
Request configuration
Error handling
Interceptors

Installing Axios

Install Axios:

npm install axios

Creating Environment Variables

Instead of hardcoding backend URLs, I used environment variables.

Inside:

.env

VITE_API_URL=http://localhost:5000/api

Since this project uses Vite, environment variables must start with:

VITE_

Otherwise, Vite will not expose them to the frontend application.

Creating the Axios Instance

Inside:

src/api/axios.js

import axios from "axios";

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,

  withCredentials: true,

  timeout: 10000,
});

export default api;

Understanding the Configuration
axios.create()

Creates a reusable Axios instance.

Instead of repeating configuration in every API request, we centralize everything in one place.

`baseURL`

Sets the backend base URL globally.

So this:

api.post("/auth/login")

automatically becomes:

http://localhost:5000/api/auth/login

`withCredentials: true`

Allows cookies to be sent automatically with requests.

This becomes important for refresh token authentication because refresh tokens are stored securely inside HTTP-only cookies.

`timeout: 10000`

Axios will wait a maximum of:

10000 milliseconds = 10 seconds

before aborting the request.

This prevents requests from hanging forever if the server does not respond.

Setting Up Token Utilities

After login, the backend returns an access token.

To manage tokens cleanly, I created utility functions.

Inside:

src/utils/token.js

export const getAccessToken = () =>
  localStorage.getItem("accessToken");

export const setAccessToken = (token) =>
  localStorage.setItem(
    "accessToken",
    token
  );

export const clearTokens = () => {
  localStorage.removeItem(
    "accessToken"
  );
};

Why Create Token Utilities?

Instead of directly using:

localStorage.getItem()

everywhere, utility functions help:

Centralize token logic
Improve readability
Reduce duplication

Setting Up Axios Interceptors

Authentication systems usually require automatic token handling.

To solve this, I used Axios interceptors.

Inside:

src/api/axiosInterceptor.js

import { refreshToken } from "./auth.api";
import api from "./axios";
import { getAccessToken, setAccessToken, clearTokens } from "@/utils/token";

// REQUEST INTERCEPTOR
api.interceptors.request.use((config) => {
  const token = getAccessToken();

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

// RESPONSE INTERCEPTOR
api.interceptors.response.use(
  (response) => response,

  async (error) => {
    const originalRequest = error.config;

    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      try {
        const res = await refreshToken();
        console.log(res);
        const newAccessToken = res.data.data.accessToken;

        setAccessToken(newAccessToken);

        api.defaults.headers.common.Authorization = `Bearer ${newAccessToken}`;

        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;

        return api(originalRequest);
      } catch (error) {
        clearTokens();

        return Promise.reject(error);
      }
    }

    return Promise.reject(error);
  },
);

Importing the Axios Interceptor

Axios interceptors only work after the interceptor file is imported.

So we need to import it once inside the main application entry file.

Inside:

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import "./api/axiosInterceptor";

ReactDOM.createRoot(
  document.getElementById("root")
).render(
  
    
  
);

Why Is This Import Important?

The interceptor file does not export a component.

Its purpose is to execute this code immediately:

api.interceptors.request.use()

and

api.interceptors.response.use()

As soon as the file is imported, Axios registers both interceptors globally.

Without importing this file, the interceptors will never run.

That means:

Tokens will not attach automatically
Refresh token logic will not work
Expired access tokens will not refresh automatically

Step 11: Building the Shared Navigation Layout

Most pages inside ShelfLife share a common structure:

Navbar
Dynamic Page Content
Footer

So instead of repeating them on every page, I created reusable layout components.

Creating the Navbar

Inside:

src/components/main/Navbar.jsx

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Container from "@mui/material/Container";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import MenuItem from "@mui/material/MenuItem";
import AdbIcon from "@mui/icons-material/Adb";
import { useDispatch, useSelector } from "react-redux";
import { logout } from "./api";
import { clearTokens } from "@/utils/token";
import { useNavigate } from "react-router-dom";
import { removeUser } from "@/store/userSlice";
import { toast } from "react-toastify";

const pages = ["Products", "Pricing", "Blog"];
const settings = ["Profile", "Logout"];

const Navbar = ({ setOpenAuthDialog }) => {
  const user = useSelector((store) => store.user);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [anchorElNav, setAnchorElNav] = React.useState(null);
  const [anchorElUser, setAnchorElUser] = React.useState(null);

  const handleOpenNavMenu = (event) => {
    setAnchorElNav(event.currentTarget);
  };
  const handleOpenUserMenu = (event) => {
    setAnchorElUser(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  const handleCloseUserMenu = () => {
    setAnchorElUser(null);
  };

  const handleSettingsClick = async (setting) => {
    handleCloseUserMenu();

    if (setting === "Logout") {
      try {
        await logout(); // API call

        clearTokens();

        // remove redux user also
        dispatch(removeUser());

        toast.success("Logout Successful");
        navigate("/");
      } catch (error) {
        console.log(error);
      }
    }
  };

  return (
    
      
        
          
            ShelfLife
          

          
            ShelfLife
          
          
            {!user ? (
              
            ) : (
              <>
                
                  
                    
                  
                
                
                  {settings.map((setting) => (
                     handleSettingsClick(setting)}
                    >
                      
                        {setting}
                      
                    
                  ))}
                
              
            )}
          
        
      
    
  );
};

export default Navbar;

I created the application navbar.

The navbar has two authentication states:

User Not Logged In
        ↓
Show Login Button

User Logged In
        ↓
Show Profile Menu

This behavior is controlled using Redux global state.

const user = useSelector((store) => store.user);

Understanding useSelector()

useSelector()

allows React components to access Redux store data.

If no user exists:

the Login button appears.

Otherwise:

shows the authenticated user profile menu.

This creates a dynamic authentication-aware navigation system.

Handling Logout

Inside the profile menu, I added logout functionality.

dispatch(removeUser());

removes the authenticated user from Redux state.

At the same time:

clearTokens();

removes stored access tokens from localStorage.

This instantly updates the entire UI because Redux state changes automatically trigger component re-renders.

Creating the Footer

Inside:

src/components/main/Footer.jsx

I created a shared footer component.

import { Box, Container, Typography } from "@mui/material";

const Footer = () => {
  return (
    
      
        
          © 2026 ShelfLife. All rights reserved.
        
      
    
  );
};

export default Footer;

Step12: Connecting Navbar with the Login Dialog

Before building the Login component, I updated the shared layout component so the Navbar could control the authentication dialog.

Inside:

src/components/main/Body.jsx

I added dialog state management.

const [openAuthDialog, setOpenAuthDialog] =
  useState(false);

This state controls whether the authentication modal is open or closed.

Passing State to Navbar

The setOpenAuthDialog function is passed to the Navbar component as a prop.

This allows the Navbar to open the Login dialog whenever the user clicks the Login button.

Example inside Navbar:

When clicked:

setOpenAuthDialog(true);

opens the authentication modal instantly.

Sharing Dialog State with Nested Routes

Using React Router's Outlet context, nested pages can also access:

openAuthDialog
setOpenAuthDialog

This makes the authentication modal globally accessible across shared layout routes.

Authentication Dialog Flow

User Clicks Login
        ↓
Navbar Updates State
        ↓
openAuthDialog = true
        ↓
Login Component Opens

This creates a centralized modal authentication system controlled from the shared layout.

Step 13: Building the Signup Component

Inside:

src/components/auth/Signup.jsx

we create the signup form for new users.

This component handles:

User registration form
Form validation
API integration
Error

Creating the Signup Component

Inside

src/components/auth/Signup.jsx

import { useForm } from "react-hook-form";

import CloseIcon from "@mui/icons-material/Close";

import {
  Button,
  Dialog,
  DialogContent,
  DialogTitle,
  IconButton,
  TextField,
  Typography,
  Box,
} from "@mui/material";

import { toast } from "react-toastify";

import { signupUser } from "./api";

const Signup = ({
  open,
  handleClose,
  openLogin,
}) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = async (data) => {
    try {
      const res =
        await signupUser(data);

      if (res.success) {
        toast.success(
          "Signup Successful"
        );

        handleClose();

        openLogin();
      }
    } catch (err) {
      toast.error("Signup Failed");

      console.error(err);
    }
  };

  return (
    
      
        Create Account

        
          
        
      

      
        
          

          

          

          

          

          

          
            Already have an account?
            Login
          

          
            
          
        
      
    
  );
};

export default Signup;

Creating the Signup API

Inside:

src/components/auth/api.js

import api from "@/api/axios.js";

// SIGNUP USER
export const signupUser =
  async (data) => {
    const res = await api.post(
      "/auth/register",
      data
    );

    return res.data;
  };

After successful registration:

openLogin();

automatically opens the login dialog.

This creates a smooth connected authentication experience:

Signup
   ↓
Account Created
   ↓
Open Login Dialog
   ↓
Login Dialog

Instead of forcing users to manually reopen the login modal, the application guides them directly into Login component.

Step 14: Building the Login Component

Inside:

src/components/auth/Login.jsx

we create the login form.

import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

import {
  Button,
  Dialog,
  DialogContent,
  DialogTitle,
  IconButton,
  TextField,
  Typography,
  Box,
} from "@mui/material";
import { toast } from "react-toastify";

import CloseIcon from "@mui/icons-material/Close";
import { loginUser } from "./api";
import { addUser } from "@/store/userSlice";
import { setAccessToken } from "@/utils/token";

const Login = ({ open, handleClose, openSignup }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const dispatch = useDispatch();
  const navigate = useNavigate();

  const onSubmit = async (data) => {
    try {
      const res = await loginUser(data);
      dispatch(addUser(res.data.user));
      setAccessToken(res.data.accessToken);
      toast.success("Login Successful");
      handleClose();
    } catch (err) {
      toast.error("Invalid Credentials");
      console.error(err);
    }
  };

  return (
    
      
        Login
        
          
        
      

      
        
          

          

          
            Create new account
          

          
            
          
        
      
    
  );
};

export default Login;

Creating the Login API

Inside:

src/components/auth/api.js

import api from "@/api/axios.js";

// LOGIN
export const loginUser = async (data) => {
  const res = await api.post("/auth/login", data);
  return res.data;
};

After successful login :

Instead of navigating users to a separate login page, I decided to use modal-based authentication.

Why?

Because it creates a smoother user experience. Users can authenticate without leaving their current page.

Understanding React Hook Form

Instead of manually managing every input using:

useState()

I used:

useForm()

from React Hook Form.

Install:

npm install react-hook-form

Inside the component:

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm();

This helps manage:

Form state
Validation
Submission handling
Error handling

with minimal re-renders.

Understanding register()

register("email")

connects the input field to React Hook Form.

This allows React Hook Form to automatically track:

Input values
Validation state
Errors
Submission data

without needing multiple state variables.

Understanding handleSubmit()

handleSubmit(onSubmit)

handles passing clean form data to the submit function.

Understanding Validation

Validation rules are added directly during field registration.

Example:

register("password", {
  required: "Password is required",

  minLength: {
    value: 6,
    message:
      "Password must be at least 6 characters",
  },
})

This automatically validates the field before submission.

See:

Understanding Error Handling

Material UI integrates nicely with React Hook Form.

Example:

error={Boolean(errors.email)}

helperText={errors.email?.message}

error

error={Boolean(errors.email)}

puts the TextField into an error state if validation fails.

helperText

helperText={errors.email?.message}

displays the actual validation message below the input field.

This creates a much better user experience compared to manual validation handling.

See:

Step15: Rendering Login and Signup Components

Inside:

src/components/joinHousehold/JoinHouseHold.jsx

I rendered both authentication components.

import { useOutletContext } from "react-router-dom";

const JoinHouseHold = () => {
   const { openAuthDialog, setOpenAuthDialog } = useOutletContext();
   const [openSignup, setOpenSignup] = useState(false);

   return (
        <>
            {!openSignup ? (
                setOpenAuthDialog(false)}
                  openSignup={() => {
                      setOpenAuthDialog(false);
                      setOpenSignup(true);
                   }}
                 />
              ) : (
                  setOpenSignup(false)}
                    openLogin={() => {
                       setOpenSignup(false);
                       setOpenAuthDialog(true);
                     }}
                   />
                )}
         
    )
};

export default JoinHouseHold;

Initially:

openSignup = false

So the Login component is rendered.

When users click:

Create new account

inside the Login dialog:

setOpenAuthDialog(false);

setOpenSignup(true);

closes the Login modal and opens the Signup modal.

Similarly, after successful signup:

openLogin();

inside the Signup component:

setOpenSignup(false);

setOpenAuthDialog(true);

closes the Signup dialog and reopens the Login dialog.

This creates a connected modal-based authentication flow:

Login Dialog
      ↓
Create Account
      ↓
Signup Dialog
      ↓
Account Created
      ↓
Login Dialog

Step 16: Persistent Authentication

One major problem in frontend authentication is:

Redux state resets after page refresh

To solve this, ShelfLife restores the user session whenever the application loads.

Inside:

src/components/main/Body.jsx

I added authentication handling logic to manage:

Persistent login
User fetching

useEffect(() => {
  const token =
    localStorage.getItem(
      "accessToken"
    );

  if (token) {
    fetchUser();
  }
}, []);

The application first checks whether an access token already exists.

If a token is found:

fetchUser();

calls the backend API to retrieve the authenticated user's data.

Fetching the Authenticated User

const fetchUser = async () => {
  try {
    const res = await getMe();

    dispatch(addUser(res.user));
  } catch (error) {
    toast.error(
      error?.response?.data?.message ||
        "Failed to fetch user"
    );
  }
};

Once the backend returns the user data:

dispatch(addUser(res.user));

stores the user globally inside Redux.

This allows every component in the application to access authenticated user information.

Why This Step Is Important

Without this logic:

User data disappears after refresh
Navbar loses authentication state
Protected routes stop working properly

With this setup:

Authentication persists across refreshes
Redux state gets restored automatically
User experience becomes seamless

Step 14: Building the Join Household Flow

After completing authentication, I started building the household onboarding flow.

The main goal was:

Only authenticated users should be able to join or create households

So before opening any household dialogs, I first check whether the user is logged in or not.

Inside:

src/components/joinHousehold/JoinHouseHold.jsx

I created the complete household flow system.

import { useState } from "react";
import { useOutletContext } from "react-router-dom";
import { useSelector } from "react-redux";

import { Box, Button, Container, Typography, Paper } from "@mui/material";

import Login from "../auth/Login";
import Signup from "../auth/Signup";

import JoinWithInviteDialog from "./JoinWithInviteDialog";
import CreateHouseholdDialog from "./CreateHouseholdDialog";

const JoinHouseHold = () => {
  const user = useSelector((store) => store.user);

  const { openAuthDialog, setOpenAuthDialog } = useOutletContext();

  const [openSignup, setOpenSignup] = useState(false);

  const [openJoinDialog, setOpenJoinDialog] = useState(false);

  const [openCreateDialog, setOpenCreateDialog] = useState(false);

  const handleJoinHousehold = () => {
    const token = localStorage.getItem("accessToken");

    if (!token || !user) {
      setOpenAuthDialog(true);
      return;
    }

    setOpenJoinDialog(true);
  };

  return (
    <>
      
        
          
            
              Building a ShelfLife Household Inventory Tracker
            

            
              Manage household items, track inventory, and collaborate with your
              family members easily.
            

            
          
        
      

      {!openSignup ? (
         setOpenAuthDialog(false)}
          openSignup={() => {
            setOpenAuthDialog(false);
            setOpenSignup(true);
          }}
        />
      ) : (
         setOpenSignup(false)}
          openLogin={() => {
            setOpenSignup(false);
            setOpenAuthDialog(true);
          }}
        />
      )}

       setOpenJoinDialog(false)}
        openCreateDialog={() => {
          setOpenJoinDialog(false);
          setOpenCreateDialog(true);
        }}
      />

       setOpenCreateDialog(false)}
      />
    
  );
};

export default JoinHouseHold;

Checking Authentication Before Joining

const handleJoinHousehold = () => {
  const token =
    localStorage.getItem(
      "accessToken"
    );

  if (!token || !user) {
    setOpenAuthDialog(true);

    return;
  }

  setOpenJoinDialog(true);
};

When users click:

Join Household

the application first checks:

Does an access token exist?
Does authenticated user data exist in Redux?

If authentication is missing:

setOpenAuthDialog(true);

opens the Login dialog.

Otherwise:

setOpenJoinDialog(true);

opens the Join Household dialog.

Understanding the Flow

The complete flow works like this:

User Clicks Join Household
            ↓
Check Authentication
            ↓
User Logged In?
      ↙      ↘
     No      Yes
     ↓        ↓
Open Login  Open Join Dialog
Dialog

This prevents unauthenticated users from accessing household functionality.

Join Household Dialog

Inside:

src/components/joinHousehold/JoinWithInviteDialog.jsx

I created the household joining dialog.

import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  Typography,
  IconButton,
} from "@mui/material";

import { useForm } from "react-hook-form";
import { joinHousehold } from "./api";
import { toast } from "react-toastify";
import { useNavigate } from "react-router-dom";
import CloseIcon from "@mui/icons-material/Close";

const JoinWithInviteDialog = ({ open, handleClose, openCreateDialog }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues: {
      inviteCode: "",
    },
  });

  const navigate = useNavigate();

  const onSubmit = async (data) => {
    try {
      const res = await joinHousehold(data);
      navigate("/items");
      reset();
      toast.success("Household join successfully");
      handleClose();
    } catch (err) {
      toast.error("Invalid Invite code");
      console.error(err);
    }
  };

  return (
    
      
        Join Household
        
          
        
      

      
        
           {
                e.target.value = e.target.value.replace(/\D/g, "").slice(0, 6);
              },
            })}
          />

          
            Want to create your own household?
          

          
            
          

          
            
          
        
      
    
  );
};

export default JoinWithInviteDialog;

Users can:

Enter an invite code
Join an existing household
Open the create household dialog

JoinHouseHold API

Inside:

src/components/joinHouseHold/api.js

import api from "@/api/axios.js";

export const joinHousehold = async (data) => {
  const res = await api.post("/households/join", data);
  return res.data;
};

Joining a Household

const onSubmit = async (data) => {
  try {
    const res =
      await joinHousehold(data);

    navigate("/items");

    reset();

    toast.success(
      "Household join successfully"
    );

    handleClose();
  } catch (err) {
    toast.error(
      "Invalid Invite code"
    );

    console.error(err);
  }
};

After successfully joining:

User is redirected to the items page
Form resets
Success message appears
Dialog closes automatically

Creating a New Household Component

Inside the Join dialog, users can also create their own household.

When clicked:

Join Dialog Closes
        ↓
Create Household Dialog Opens

This creates a connected onboarding flow.

Create Household Dialog

Inside:

src/components/joinHousehold/CreateHouseholdDialog.jsx

I created the household creation form.

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  IconButton,
} from "@mui/material";

import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import { createHousehold } from "./api";
import { useNavigate } from "react-router-dom";
import CloseIcon from "@mui/icons-material/Close";

const CreateHouseholdDialog = ({ open, handleClose }) => {
  const navigate = useNavigate();
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues: {
      householdName: "",
      inviteCode: "",
    },
  });

  const onSubmit = async (data) => {
    try {
      const res = await createHousehold(data);
      navigate("/items");
      reset();
      toast.success("Houshold created successfully");
      handleClose();
    } catch (err) {
      toast.error("Something went wrong");
      console.error(err);
    }
    console.log(data);
  };

  return (
    
      
        Create Household
        
          
        
      

      
        
          

           {
                e.target.value = e.target.value.replace(/\D/g, "").slice(0, 6);
              },
            })}
          />

          
            
          
        
      
    
  );
};

export default CreateHouseholdDialog;

The form includes:

Household name
6-digit invite code

Creating the Create HouseHold API

Inside:

src/components/joinHouseHold/api.js

import api from "@/api/axios.js";

export const createHousehold = async (data) => {
  const res = await api.post("/households", data);
  return res.data;
};

Creating a Household

const onSubmit = async (data) => {
  try {
    const res =
      await createHousehold(data);

    navigate("/items");

    reset();

    toast.success(
      "Houshold created successfully"
    );

    handleClose();
  } catch (err) {
    toast.error(
      "Something went wrong"
    );

    console.error(err);
  }
};

After successful creation:

Household gets created
User navigates to inventory items
Form resets
Success toast appears
Dialog closes automatically

Step 17: Implementing Frontend Route Protection (Protected Routes)

I used this article by Robin Wieruch as inspiration for understanding and implementing protected routes in React Router:

React Router Private Routes Guide

After completing the authentication and household onboarding flow, the next important step was protecting application routes on the frontend.

At this point, ShelfLife already had:

Authentication system
Persistent login
Household creation/join flow

But there was still one major issue:

Users could manually access routes using URLs even if they were not authorized.

Example:

/items

A user could directly type this URL in the browser.

To solve this, I implemented:

Protected Routes
Public Only Routes

using React Router.

Why Route Protection Is Important

ShelfLife has two different application states.

Public Area

Accessible to everyone:

This page contains:

Login
Signup
Join household onboarding

Protected Area

Accessible only when:

User is authenticated
User belongs to a household

Example:

/items

This contains the actual inventory dashboard.

So the rule becomes:

User logged in + household joined
                ↓
Allow access to dashboard "/items"

Otherwise
                ↓
Redirect back to "/"

Understanding the Routing Architecture

The routing flow now looks like:

BrowserRouter
      ↓
Routes
      ↓
Body Layout
      ↓
Protected/Public Route Guards
      ↓
Actual Pages

Creating the Route Configuration

Inside:

src/routes/index.js

I added route metadata.

import { lazy } from "react";

export const routes = [
  {
    path: "",

    component: lazy(() =>
      import("@/components/joinHouseHold/JoinHouseHold")
    ),

    isProtected: false,
  },

  {
    path: "/items",

    component: lazy(() =>
      import("@/components/dashboard/items")
    ),

    isProtected: true,
  },
];

Creating the Protected Route Component

Inside:

src/routes/ProtectedRoute.jsx

I created the route guard.

import {
  Navigate,
  Outlet,
  useOutletContext,
} from "react-router-dom";

import { useSelector } from "react-redux";

const ProtectedRoute = ({ children }) => {
  const user = useSelector(
    (store) => store.user
  );

  const context = useOutletContext();

  // USER NOT LOGGED IN
  if (!user) {
    return ;
  }

  // USER HAS NOT JOINED HOUSEHOLD
  if (!user.householdId) {
    return ;
  }

  return children
    ? children
    : ;
};

export default ProtectedRoute;

Creating Public Only Routes

Now we also need the opposite behavior.

If the user already joined a household:

Do NOT allow access to "/"

Instead:

Redirect directly to "/items"

Inside:

src/routes/PublicOnlyRoute.jsx

import {
  Navigate,
  Outlet,
  useOutletContext,
} from "react-router-dom";

import { useSelector } from "react-redux";

const PublicOnlyRoute = ({
  children,
}) => {
  const user = useSelector(
    (store) => store.user
  );

  const context = useOutletContext();

  if (user?.householdId) {
    return (
      
    );
  }

  return children
    ? children
    : ;
};

export default PublicOnlyRoute;

Understanding PublicOnlyRoute

This component prevents authenticated household users from returning to onboarding pages.

Meaning:

Already onboarded user
         ↓
Skip landing page
         ↓
Go directly to dashboard

This improves user experience significantl

Final Route Flow

The application behavior now becomes:

VISIT "/"
     ↓
User has household?
   ↙       ↘
 No         Yes
 ↓           ↓
Show       Redirect
Landing    to /items
Page

And:

VISIT "/items"
       ↓
User authenticated?
   ↙          ↘
 No            Yes
 ↓              ↓
Redirect      Has Household?
to "/"        ↙         ↘
             No         Yes
             ↓           ↓
         Redirect     Allow Access
           to "/"

Configuring Protected Routes in App.jsx

Inside:

src/App.jsx

I dynamically wrapped routes using route metadata.


  }>
    {routes.map((route) => {
      const Component = route.component;

      // PROTECTED ROUTES
      if (route.isProtected) {
        return (
          }
          >
            }
            />
          
        );
      }

      // PUBLIC ROUTES
      return (
        }
        >
          }
          />
        
      );
    })}

Understanding Nested Route Protection

This structure:

}>
  }
  />

means:

Before rendering /items
       ↓
Run ProtectedRoute first
       ↓
If allowed → render Items
Else → redirect

This is called:

Layout Route Protection

in React Router.

Why This Architecture Is Powerful

This approach scales extremely well.

In future, adding new protected routes becomes very easy.

Example:

{
   path: "/analytics",
   component: Analytics,
   isProtected: true
}

No additional protection logic needed.

The route automatically becomes protected.

Final Authentication Architecture

The complete frontend authentication system now looks like:

User Login
     ↓
Redux Store Updated
     ↓
Protected Routes Read Redux State
     ↓
Allow / Block Route Access
     ↓
React Router Redirects User

Step 18: Creating a Reusable Dashboard Layout with Nested Routes

After implementing protected routes, the next improvement was organizing all authenticated pages inside a reusable dashboard layout.

At this point, ShelfLife had multiple authenticated pages like:

/items
/members

All these pages needed:

A common sidebar
Shared dashboard structure
Consistent spacing/layout
Route navigation
Protected access

Instead of repeating sidebar code on every page, I created a reusable DashboardLayout.

Creating DashboardLayout

I created:

components/layout/DashboardLayout.jsx

import {
  Outlet,
  useLocation,
  useNavigate,
  useOutletContext,
} from "react-router-dom";

import {
  Box,
  Drawer,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Toolbar,
} from "@mui/material";

import Inventory2Icon from "@mui/icons-material/Inventory2";
import GroupIcon from "@mui/icons-material/Group";

const drawerWidth = 240;

const menuItems = [
  {
    label: "Items",
    path: "/items",
    icon: ,
  },
  {
    label: "Members",
    path: "/members",
    icon: ,
  },
];

const DashboardLayout = () => {
  const navigate = useNavigate();

  const location = useLocation();

  const context = useOutletContext();

  return (
    
      {/* SIDEBAR */}
      
        

        
          
            {menuItems.map((item) => {
              const isActive = location.pathname === item.path;

              return (
                 navigate(item.path)}
                  sx={{
                    mx: 1,
                    borderRadius: 2,
                    mb: 1,
                  }}
                >
                  {item.icon}

                  
                
              );
            })}
          
        
      

      {/* PAGE CONTENT */}
      
        
      
    
  );
};

export default DashboardLayout;

Why use Outlet?

React Router’s renders child routes inside the layout.

This allows all authenticated pages to share:

Sidebar
Navigation

while only changing the page content.

Example:

/items
/members

Both pages now render inside the same dashboard layout.

Updating App.jsx with Nested Protected Routes

Next, I wrapped all protected routes inside:

using nested routing.


      
    
  }
>
  {routes
    .filter((route) => route.isProtected)
    .map((route) => {
      const Component = route.component;

      return (
        }
        />
      );
    })}

Benefits of This Architecture

This structure gives several advantages:

Reusable Layout

All dashboard pages automatically share the same layout.

Cleaner Routing

Protected routes are grouped together in one place.

Better Scalability

Adding new authenticated pages becomes very easy.

Centralized Navigation

Sidebar navigation is managed from one component.

Better User Experience

Users get a consistent dashboard UI across all pages.

Step 19: Building the Inventory Management Table using Material React Table

After setting up the reusable dashboard layout, the next major feature was building the inventory management system.

The requirements for the inventory table were:

Inventory Table Requirements

Columns:

Name
Category
Quantity
Expiry Date
Status
Actions

Additional requirements:

Add Item button
Edit item
Delete item
Search
Sorting
Pagination
Column filtering
Inline row editing
Future barcode scanning support
Responsive dashboard integration

There was also a future flow planned for adding products:

Add Item
    ↓
Open Scanner
    ↓
Scan Barcode
    ↓
Auto-fill Product Info
    ↓
User completes remaining fields
    ↓
Save Item

Because of all these requirements, I needed a powerful and scalable table solution.

Choosing Material React Table

After researching different table libraries, I decided to use:

material-react-table

The reason for choosing Material React Table was because it already provides many production-level features out of the box:

Inline editing
Row actions
Pagination
Sorting
Filtering
Global search
Material UI integration
Flexible customization
Better developer experience

This made it a perfect fit for the ShelfLife inventory system.

Creating the Items Page

I created:

items/Items.jsx

import { useEffect, useState } from "react";

import { Box, Button, Typography } from "@mui/material";

import AddIcon from "@mui/icons-material/Add";

import InventoryTable from "./InventoryTable.jsx";
import { toast } from "react-toastify";
import { getItems } from "./api.js";

const Items = () => {
  const [open, setOpen] = useState(false);

  const [editingItem, setEditingItem] = useState(null);

  const [items, setItems] = useState([]);

  const fetchItems = async () => {
    try {
      const res = await getItems();

      setItems(res.data.items);
    } catch (error) {
      toast.error(error.response?.data?.message || "Failed to fetch items");
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  return (
    
      
        
          Inventory Items
        

        
      

      
    
  );
};

export default Items;

Creating the Inventory Table

Next, I created:

items/InventoryTable.jsx

This component handles:

Table rendering
Inline row editing
Validation
Status rendering
Table actions
API updates
Sorting/filtering/pagination

import { useMemo, useState } from "react";

import {
  MaterialReactTable,
  useMaterialReactTable,
} from "material-react-table";

import { Box, Chip, IconButton, Tooltip, TextField } from "@mui/material";

import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";
import { toast } from "react-toastify";
import { updateItem } from "./api";

const getStatus = (expiryDate) => {
  const today = new Date();

  const expiry = new Date(expiryDate);

  const diffDays = Math.ceil((expiry - today) / (1000 * 60 * 60 * 24));

  if (diffDays < 0) {
    return "expired";
  }

  if (diffDays <= 3) {
    return "expiring-soon";
  }

  return "fresh";
};

const InventoryTable = ({ items, fetchItems }) => {
  const [validationErrors, setValidationErrors] = useState({});

  const columns = useMemo(
    () => [
      {
        accessorKey: "name",
        header: "Name",
        muiEditTextFieldProps: {
          required: true,
          error: !!validationErrors?.name,
          helperText: validationErrors?.name,
          onFocus: () =>
            setValidationErrors({
              ...validationErrors,
              name: undefined,
            }),
        },
      },
      {
        accessorKey: "category",
        header: "Category",
        muiEditTextFieldProps: {
          required: true,
          error: !!validationErrors?.category,
          helperText: validationErrors?.category,
          onFocus: () =>
            setValidationErrors({
              ...validationErrors,
              category: undefined,
            }),
        },
      },
      {
        accessorKey: "quantity",
        header: "Quantity",
        muiEditTextFieldProps: {
          type: "number",
          required: true,
          error: !!validationErrors?.quantity,
          helperText: validationErrors?.quantity,
          onFocus: () =>
            setValidationErrors({
              ...validationErrors,
              quantity: undefined,
            }),
        },
      },
      {
        accessorKey: "expiryDate",
        header: "Expiry Date",
        Edit: ({ cell, column, row, table }) => (
           (row._valuesCache[column.id] = e.target.value)}
            fullWidth
          />
        ),
        Cell: ({ cell }) => {
          const value = cell.getValue();

          if (!value) return "";

          return new Date(value).toLocaleDateString();
        },
      },
      {
        header: "Status",
        enableEditing: false,
        Cell: ({ row }) => {
          const status = getStatus(row.original.expiryDate);

          return (
            
          );
        },
      },
    ],
    [validationErrors],
  );

  const handleSaveRow = async ({ values, table, row }) => {
    const errors = validateItem(values);

    if (Object.values(errors).some(Boolean)) {
      setValidationErrors(errors);
      return;
    }

    try {
      setValidationErrors({});

      const payload = {
        name: values.name,
        category: values.category,
        quantity: values.quantity,
        expiryDate: values.expiryDate,
      };

      await updateItem(row.original._id, payload);

      await fetchItems();

      toast.success("Item updated successfully");

      table.setEditingRow(null);
    } catch (error) {
      toast.error(error.response?.data?.message || "Failed to update item");
    }
  };

  const handleDelete = (row) => {
    // if (window.confirm("Are you sure you want to delete this item?")) {
    //   setItems((prev) => prev.filter((item) => item._id !== row.original._id));
    // }
  };

  const table = useMaterialReactTable({
    columns,
    data: items,

    enableEditing: true,

    editDisplayMode: "row",

    getRowId: (row) => row._id,

    onEditingRowSave: handleSaveRow,

    onEditingRowCancel: () => setValidationErrors({}),

    renderRowActions: ({ row, table }) => (
      
        
           table.setEditingRow(row)}>
            
          
        

        
           handleDelete(row)}>
            
          
        
      
    ),

    enableSorting: true,
    enablePagination: true,
    enableColumnFilters: true,
    enableGlobalFilter: true,

    positionGlobalFilter: "left",
  });

  return ;
};

export default InventoryTable;

const validateRequired = (value) => !!value?.toString().trim();

function validateItem(item) {
  return {
    name: !validateRequired(item.name) ? "Name is required" : "",

    category: !validateRequired(item.category) ? "Category is required" : "",

    quantity: !validateRequired(item.quantity) ? "Quantity is required" : "",
  };
}

Built-in Table Features

Material React Table also made it very easy to enable advanced table features:

enableSorting: true,
enablePagination: true,
enableColumnFilters: true,
enableGlobalFilter: true,

This instantly added:

Sorting
Pagination
Search
Filtering

without building custom logic manually.

Fetching Inventory Items from Backend

After creating the inventory table UI, the next step was fetching real inventory data from the backend.

For API communication, I was already using Axios with a centralized Axios instance.

Creating the API Function

I created a reusable API function for fetching inventory items.

api.js

import api from "@/api/axios.js";

// GET ITEMS
export const getItems = async () => {
  const res = await api.get("/items/");

  return res.data;
};

This keeps API logic separate from UI components, which helps maintain cleaner architecture and better scalability.

Fetching Items Inside Items.jsx

Inside the Items component, I created local state for storing inventory items.

const [items, setItems] = useState([]);

Then I created a reusable fetchItems() function.

const fetchItems = async () => {
  try {
    const res = await getItems();

    setItems(res.data.items);
  } catch (error) {
    toast.error(
      error.response?.data?.message ||
        "Failed to fetch items"
    );
  }
};

This function:

Calls backend API
Fetches inventory items
Updates React state
Handles API errors gracefully

Loading Data on Component Mount

To fetch inventory data when the page loads, I used useEffect.

useEffect(() => {
  fetchItems();
}, []);

Because the dependency array is empty:

[]

the API runs only once when the component mounts.

This is useful for:

Initial dashboard load
Inventory page refresh
Fetching latest database data

Making Rows Editable

I enabled editing using:

enableEditing: true,
editDisplayMode: "row",

This allowed users to click the edit icon and instantly convert the entire row into editable input fields.

Adding Editable Columns

For editable columns like:

Name
Category
Quantity
Expiry Date

I configured:

muiEditTextFieldProps

Example:

{
  accessorKey: "name",
  header: "Name",
  muiEditTextFieldProps: {
    required: true,
    error: !!validationErrors?.name,
    helperText: validationErrors?.name,
  },
}

This gave:

Validation support
Error messages

Custom Expiry Date Input

For expiry dates, I customized the edit field using a Material UI date input.

Edit: ({ cell, column, row }) => (
  
      (row._valuesCache[column.id] = e.target.value)
    }
    fullWidth
  />
)

This improved date editing significantly compared to plain text editing.

Status Field Was Read-Only

The inventory status:

fresh
expiring-soon
expired

was automatically calculated from the expiry date.

Because of that, users should not edit status manually.

So I disabled editing for the status column.

{
  header: "Status",
  enableEditing: false,
}

The status was displayed using colored Material UI chips.

This created a cleaner and more user-friendly inventory UI.

Saving Updated Rows

Material React Table provides:

onEditingRowSave

which runs automatically when the user clicks the save button.

I implemented:


  const handleSaveRow = async ({ values, table, row }) => {
    const errors = validateItem(values);

    if (Object.values(errors).some(Boolean)) {
      setValidationErrors(errors);
      return;
    }

    try {
      setValidationErrors({});

      const payload = {
        name: values.name,
        category: values.category,
        quantity: values.quantity,
        expiryDate: values.expiryDate,
      };

      await updateItem(row.original._id, payload);

      await fetchItems();

      toast.success("Item updated successfully");

      table.setEditingRow(null);
    } catch (error) {
      toast.error(error.response?.data?.message || "Failed to update item");
    }
  };

Frontend Validation Before Save

Before sending updates to the backend, I validated the edited fields.

const errors = validateItem(values);

if (Object.values(errors).some(Boolean)) {
  setValidationErrors(errors);
  return;
}

This prevented invalid inventory updates.

Calling Update API

After validation passed, I created the update payload.

const payload = {
  name: values.name,
  category: values.category,
  quantity: values.quantity,
  expiryDate: values.expiryDate,
};

Then I called the backend update API.

await updateItem(row.original._id, payload);

One important thing I learned here:

values only contains editable/accessor fields.

So:

values._id

was undefined.

The correct way was:

row.original._id

because the original row still contains the MongoDB document ID.

Refetching Inventory After Save

After updating an item successfully:

await fetchItems();

I refetched inventory items from the backend instead of manually updating frontend state.

This approach helped maintain:

Fresh backend data
Better consistency
Simpler state management
Cleaner architecture

Adding Delete Row Functionality

After implementing inline editing, the next important feature was deleting inventory items directly from the table.

Material React Table made this very easy using:

renderRowActions

I added a delete icon button inside the row actions section.


   handleDelete(row)}
  >

When the user clicks the delete icon, the selected row is passed into:

handleDelete(row)

Creating the Delete Handler

I implemented the delete logic inside:

handleDelete

const handleDelete = async (row) => {
  try {
    await deleteItem(row.original._id);

    await fetchItems();

    toast.success("Item deleted successfully");
  } catch (error) {
    toast.error(
      error.response?.data?.message ||
        "Failed to delete item"
    );
  }
};

This function:

Gets the MongoDB item ID
Calls backend delete API
Refetches latest inventory items
Shows success/error toast notifications

Creating Delete API Function

Inside:

api.js

I created a reusable API function.

export const deleteItem = async (itemId) => {
  const res = await api.delete(`/items/${itemId}`);

  return res.data;
};

This keeps API logic reusable and separated from UI components.h backend data

Better consistency
Simpler state management
Cleaner architecture

Step 22: Implementing Server-Side Pagination & Search using Material React Table

After building the inventory management table, the next major improvement was implementing:

Server-side pagination
Server-side global search

This became important because inventory data can grow very large over time.

Fetching all items at once is not scalable.

Instead, the frontend should only request:

the current page
current page size
current search query

from the backend.

This improves:

performance
scalability
API efficiency
database querying

Managing Pagination State

Inside Items.jsx, I created pagination state.

const [pagination, setPagination] = useState({
  pageIndex: 0,
  pageSize: 10,
});

Material React Table uses:

pageIndex → current page
pageSize → rows per page

Tracking Total Database Rows

Since pagination is handled on the backend, the frontend also needs to know:

how many total rows exist in the database

This is required so Material React Table can correctly render:

total pages
pagination controls

const [rowCount, setRowCount] = useState(0);

Adding Global Search State

Next, I added global search state.

const [globalFilter, setGlobalFilter] = useState("");

This state stores the search value entered by the user.

Adding Debounced Search

Without debouncing, every keystroke would trigger an API request.

Example:

a
ap
app
appl
apple

This would cause 5 API calls.

To prevent unnecessary API requests, I implemented debouncing.

const [debouncedGlobalFilter, setDebouncedGlobalFilter] = useState("");

useEffect(() => {
  const timeout = setTimeout(() => {
    setDebouncedGlobalFilter(globalFilter);
  }, 500);

  return () => clearTimeout(timeout);
}, [globalFilter]);

Now the API only runs after the user stops typing for 500ms.

This significantly improves:

performance
API efficiency
user experience

Fetching Paginated Inventory Items

I updated the API request to send:

current page
page size
search query

to the backend.

const fetchItems = async () => {
  try {
    const res = await getItems(
      pagination.pageIndex + 1,
      pagination.pageSize,
      debouncedGlobalFilter,
    );

    setItems(res.data.items);

    setRowCount(res.data.totalItems);
  } catch (error) {
    toast.error(
      error.response?.data?.message ||
      "Failed to fetch items"
    );
  }
};

Refetching Data When Pagination Changes

Then I added a useEffect to automatically refetch inventory items whenever:

page changes
page size changes
search query changes

useEffect(() => {
  fetchItems();
}, [
  pagination.pageIndex,
  pagination.pageSize,
  debouncedGlobalFilter,
]);

This keeps the table synchronized with backend data.

Resetting to First Page During Search

One important UX improvement was resetting pagination when the search query changes.

Without this:

user may stay on page 5
search results may only contain 1 page
table could appear empty

To fix this:

useEffect(() => {
  setPagination((prev) => ({
    ...prev,
    pageIndex: 0,
  }));
}, [debouncedGlobalFilter]);

Now every new search starts from page 1.

Enabling Manual Pagination in Material React Table

Inside InventoryTable.jsx, I enabled manual pagination.

manualPagination: true,

This tells Material React Table:

"Pagination is controlled by the backend."

So MRT stops doing client-side pagination automatically.

Enabling Manual Server-Side Search

I also enabled:

manualFiltering: true,

This disables client-side searching/filtering.

Now the backend becomes responsible for filtering inventory items.

This is important because users expect search to work across the entire database — not just the currently loaded page.

Connecting Pagination State to Material React Table

onPaginationChange: setPagination,

This automatically updates React state whenever:

page changes
rows per page changes

Connecting Search State to Material React Table

onGlobalFilterChange: setGlobalFilter,

Whenever the user types into the search bar:

MRT updates globalFilter
debounce logic runs
backend API gets called

Passing Controlled Table State

state: {
  pagination,
  globalFilter,
},

This allows React state to fully control Material React Table state.

Providing Total Row Count

rowCount,

This is extremely important for server-side pagination.

Without rowCount, Material React Table cannot determine:

total pages
pagination range
last page

Final Material React Table Configuration

const table = useMaterialReactTable({
  columns,
  data: items,

  manualPagination: true,
  manualFiltering: true,

  rowCount,

  onPaginationChange: setPagination,
  onGlobalFilterChange: setGlobalFilter,

  state: {
    pagination,
    globalFilter,
  },

  enablePagination: true,
  enableGlobalFilter: true,
  enableColumnFilters: true,
  enableSorting: true,
});

Result

After implementing server-side pagination and global search:

the inventory system became:

scalable
faster
production-ready
database-driven

Users can now:

search across all inventory items
navigate large datasets efficiently
load data page-by-page
reduce frontend memory usage

This created a much better experience for the ShelfLife inventory dashboard.

Updating the Frontend API for Pagination & Search

Previously, the frontend simply fetched all inventory items.

export const getItems = async () => {
  const res = await api.get("/items/");

  return res.data;
};

But now the backend needed additional query parameters:

current page
rows per page
search query

So I updated the API function.

export const getItems = async (
  page,
  limit,
  search,
) => {
  const res = await api.get(
    `/items?page=\({page}&limit=\){limit}&search=${search}`,
  );

  return res.data;
};

Now the frontend dynamically sends:

page → current pagination page
limit → number of rows per page
search → global search value

Example request:

/items?page=1&limit=10&search=milk

This allows the backend to:

paginate database results
filter inventory items
return only required rows

instead of sending the entire database to the frontend.

This approach is significantly more scalable and production-ready for large datasets.

Building a ShelfLife Household Inventory Tracker - Backend

Shubham Kumar Singh — Tue, 19 May 2026 10:05:15 GMT

In many shared households, managing groceries becomes messy over time.

Multiple people live together,

Everyone buys food
Items get stored in different places
Expiry dates are ignored
Food gets wasted

The real problem isn’t buying food — it’s tracking and managing it efficiently as a group.

What are we building?

ShelfLife is a collaborative expiry tracking application designed for shared households.

It helps roommates:

Track groceries in one place
Get notified before items expire
Collaborate within a household
Compete to reduce food waste

Goal

To reduce food wastage by bringing visibility, accountability, and collaboration into everyday household management.

Instead of:

“Who bought this?”
“Is this still good?”
“Why is this expired again?”

We move to:

“We know what we have.”
“We know when it expires.”
“We waste less.”

Core Features

Authentication & User Management
Every user starts here:
- Users can sign up with credentials
- Users can log in securely
This ensures every action is tied to an authenticated user.
Household System

Why household?

Because this is collaborative, not individual.
- One user creates a household
- Gets a 6-char invite code
- Others join using code
- User can view all other household members.
- Any member has the flexibility to leave the household at any time.
Inventory Management

Users can manage grocery items within a household:
- Add items with:
  - name
  - category
  - expiry date
  - quantity
- The system automatically assigns a status to each item:
  - Fresh → expiry date is far away
  - Expiring Soon → within 3 days
  - Expired → past expiry date
- Users can:
  - Edit items
  - Delete items
Automated Status Updates (Cron Job)

Item status changes over time, so it cannot be static.

Example:
- Today → Fresh
- After 2 days → Expiring Soon
- After expiry → Expired
To handle this automatically:
- A daily cron job runs in the background
- It checks all items in the database
- Updates their status based on the current date and expiry date
This ensures:
- Status is always accurate
- No manual updates are required
- Users get real-time visibility of item conditions

Step 1: Initialize Project

npm init -y

It Creates package.json

Step 2: Install Dependencies

npm install express
npm install --save-dev nodemon
npm install dotenv // This package is used to load environment variables from the .env file.

Step 3: Setup App Entry (src/app.js)

Create src/app.js

import express from "express";

const app = express();

app.use(express.json());

export default app;

This file is responsible for:

Initializing express app
Adding global middlewares

Step 4: Environment Variables

Create .env file:

PORT=3000
NODE_ENV=development
MONGODB_URI=your_mongodb_connection_string

Step 5: Server Entry Point (server.js)

create server.js

import "dotenv/config"; //This automatically loads .env variables into process.env
import app from "./src/app.js";

const PORT = process.env.PORT || 3000;

const start = async () => {
    app.listen(PORT, () => {
        console.log(`Server is running at \({PORT} in \){process.env.NODE_ENV} mode`);
    });
};

start().catch((err) => {
    console.error("Failed to start server", err);
    process.exit(1);
});

This file is responsible for:

Starting the server
Handling startup errors

Step 6: Scripts Setup

Update package.json:

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

Use:

npm run dev

Step 7: Setup Database Connection

Create:

src/common/config/db.js

import mongoose from "mongoose";
import dns from "dns";

dns.setServers(["1.1.1.1", "8.8.8.8"]);

const connectDB = async () => {
    const conn = await mongoose.connect(process.env.MONGODB_URI);

    console.log(`MongoDB connected: ${conn.connection.host}`);
};

export default connectDB;

Initially, I tried connecting to MongoDB (cloud) but faced a DNS issue

Problem:

MongoDB connection was failing due to DNS resolution.

Fix:

After watching a YouTube video: , I added this:

const dns = require("dns");
dns.setServers(["1.1.1.1", "8.8.8.8"]);

This fixed the issue and I was able to connect to cloud MongoDB.

Update server.js :

import "dotenv/config"; //This automatically loads .env variables into process.env
import app from "./src/app.js";

import connectDB from "./src/common/config/db.js"

const PORT = process.env.PORT || 3000;

const start = async () => {
    await connectDB();
    app.listen(PORT, () => {
        console.log(`Server is running at \({PORT} in \){process.env.NODE_ENV} mode`);
    });
};

start().catch((err) => {
    console.error("Failed to start server", err);
    process.exit(1);
});

Step 8: Standard API Response Structure

Create:

src/common/utils/api-response.js

class ApiResponse {
    static ok(res, message, data = null) {
        return res.status(200).json({
            success: true,
            message,
            data
        });
    }
}

export default ApiResponse;

Why This is Important

Instead of writing:

res.status(200).json({ message: "Success" });

To avoid repeating response logic across multiple APIs, I implemented a reusable utility using the DRY (Don't Repeat Yourself) principle:

ApiResponse.ok(res, "Success", data);

Step 9: Standard API Error Structure

While building APIs, handling errors properly is as important as handling success responses.

Create Custom Error Class

src/common/utils/api-error.js

class ApiError extends Error {
    // Inherit from built-in JavaScript Error
    constructor(statusCode, message) {
        super(message);

        this.statusCode = statusCode;

        // Capture clean stack trace
        Error.captureStackTrace(this, this.constructor);
    }

    static badRequest(message = "Bad Request") {
        return new ApiError(400, message);
    }

    static forbidden(message = "Forbidden") {
        return new ApiError(403, message);
    }

    static notFound(message = "Not Found") {
        return new ApiError(404, message);
    }
}

export default ApiError;

Why Extend Error?

JavaScript provides built-in errors like:

Error
TypeError
ReferenceError

But they don’t include HTTP status codes, which are required in APIs.

2. Global Error Middleware

Create:

src/common/middleware/error.middleware.js

import ApiError from "../utils/api-error.js";

const errorHandler = (err, req, res, next) => {

    // Handle known (custom) errors
    if (err instanceof ApiError) {
        return res.status(err.statusCode).json({
            success: false,
            message: err.message
        });
    }

    // Handle unknown errors
    return res.status(500).json({
        success: false,
        message: "Internal Server Error"
    });
};

export default errorHandler;

3. Register Middleware in App

Update src/app.js:

import express from "express";
import authRoute from "./modules/auth/auth.routes.js";
import errorHandler from "./common/middleware/error.middleware.js";

const app = express();
app.use(express.json());

app.use(errorHandler); 

export default app;

This must be the last middleware in the app.

Final Error Flow

Request → Route → Controller → Service → throws ApiError → Passes to errorHandler middleware → JSON response

Step 10: Authentication Module (Modular Structure)

Now that we have:

Clean folder structure
Database setup
Standard response & error handling

Next step is to build a modular authentication system

Module Structure

Inside src/modules/auth/, I created:

auth/
├── auth.controller.js
├── auth.middleware.js
├── auth.model.js
├── auth.routes.js
├── auth.service.js

Why This Structure?

Each layer has a clear responsibility:

Model → Database schema
Routes → Define API endpoints
Controller → Handle request/response
Service → Business logic
Middleware → Authentication / validation

This makes code clean, maintainable, and scalable

Create User Schema (auth.model.js)

import mongoose from "mongoose";

const userSchema = new mongoose.Schema(
  {
    firstName: {
      type: String,
      required: true,
      trim: true,
    },

    lastName: {
      type: String,
      required: true,
      trim: true,
    },

    username: {
      type: String,
      required: true,
      unique: true,
      trim: true,
    },

    email: {
      type: String,
      required: true,
      unique: true,
      lowercase: true,
      trim: true,
    },

    phoneNumber: {
      type: String,
      required: true,
      trim: true,
    },

    password: {
      type: String,
      required: true,
    },
  },
  { timestamps: true },
);

const userModel = mongoose.model("users", userSchema);

export default userModel;

timestamps automatically adds:

createdAt
updatedAt

Register Auth Routes in App.js

Update src/app.js:

import express from "express";
import authRoute from "./modules/auth/auth.routes.js";
import errorMiddleware from "./common/middleware/error.middleware.js";

const app = express();

app.use(express.json());

// Register routes
app.use("/api/auth", authRoute);

// Global error handler
app.use(errorMiddleware);

export default app;

All auth APIs will now be available under:

/api/auth/*

All auth APIs will now be available under:

/api/auth/*

Define Routes (auth.routes.js)

import { Router } from "express";
import * as controller from "./auth.controller.js";

const router = Router();

router.post("/register", controller.signup);

export default router;

Controller Layer (auth.controller.js)

import ApiResponse from "../../common/utils/api-response.js";
import * as authService from "./auth.service.js";

const register = async (req, res, next) => {
  try {
    const user = await authService.register(req.body);

    ApiResponse.ok(res, "User get Created", user);
  } catch (error) {
    next(error); // pass error to global error middleware
  }
};
export { register };

Responsibility of Controller

Calls service layer
Sends response using ApiResponse
Keeps logic minimal

Business Logic (auth.service.js)

import bcrypt from 'bcrypt';
import userModel from "./auth.model.js";
import ApiError from "../../common/utils/api-error.js";

const register = async ({
  firstName,
  lastName,
  username,
  email,
  phoneNumber,
  password,
}) => {
  const userExist = await userModel.findOne({
    email,
  });

  if (userExist) {
    throw ApiError.forbidden("User Already Exists");
  }

  const hashedPassword = await bcrypt.hash(password, 10);

  const newUser = await userModel.create({
    firstName,
    lastName,
    username,
    email,
    phoneNumber,
    password: hashedPassword,
  });

  return {
    userId: newUser._id,
    firstName: newUser.firstName,
    lastName: newUser.lastName,
    username: newUser.username,
    email: newUser.email,
    phoneNumber: newUser.phoneNumber,
  };
};

Final Result: Testing /api/auth/register API Using Postman

Request Flow

POST /api/auth/register
  ↓
auth.routes.js
  ↓
auth.controller.js
  ↓
auth.service.js
  ↓
MongoDB

Step 11: Implement Login

Now that the register API is ready, the next step is to allow users to login securely using JWT-based authentication.

Instead of using a single token, we improve security by implementing:

Access Token
Refresh Token

This follows modern authentication practices used in production applications.

Why Use Access Token + Refresh Token?

Previously, authentication systems often used a single JWT token.

Problem:

If that token gets stolen, the attacker can access protected APIs until the token expires.

To improve security, authentication is usually split into two tokens:

Token	Purpose	Expiry
Access Token	Access protected APIs	Short-lived (10–15 mins)
Refresh Token	Generate new access tokens	Long-lived (7–30 days)

Why Access Token Is Short-Lived

Even if an attacker steals the access token:

it expires quickly
attacker loses access soon

But refresh tokens live much longer, so they require stronger protection.

JWT Utility Functions

Instead of writing JWT logic multiple times, I created reusable utility functions.

Create:

src/common/utils/jwt.utils.js

import jwt from "jsonwebtoken";

const generateAccessToken = (payload) => {
  return jwt.sign(payload, process.env.JWT_ACCESS_SECRET, {
    expiresIn: process.env.JWT_ACCESS_EXPIRES_IN || "15m",
  });
};

const generateRefreshToken = (payload) => {
  return jwt.sign(payload, process.env.JWT_REFRESH_SECRET, {
    expiresIn: process.env.JWT_REFRESH_EXPIRES_IN || "7d",
  });
};

const verifyAccessToken = (token) => {
  return jwt.verify(token, process.env.JWT_ACCESS_SECRET);
};

export {
  generateAccessToken,
  generateRefreshToken,
  verifyAccessToken,
};

Update Environment Variables

Update .env

JWT_ACCESS_SECRET=your_access_secret
JWT_REFRESH_SECRET=your_refresh_secret

JWT_ACCESS_EXPIRES_IN=15m
JWT_REFRESH_EXPIRES_IN=7d

Define Routes

Inside auth.route.js, we define the login route:

import { Router } from "express";
import * as controller from "./auth.controller.js";

const router = Router();

router.post("/register", controller.register);
router.post("/login", controller.login)

export default router;

This creates an endpoint:

POST /api/auth/login

Controller Layer

Now we handle the request in the controller auth.controller.js.

import ApiResponse from "../../common/utils/api-response.js";

import * as authService from "./auth.service.js";

const login = async (req, res, next) => {
  try {
    const { accessToken, refreshToken, user } = await authService.login(
      req.body,
    );
    res.cookie("refreshToken", refreshToken, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
    });
    ApiResponse.ok(res, "Login Successful", { accessToken, user });
  } catch (error) {
    next(error);
  }
};

export { login };

What Are Cookies?

Cookies are small pieces of data stored by the browser for a website.

Why Cookies Exist

HTTP is stateless.

That means every request is independent.

Example:

Request 1 → Login

Request 2 → Fetch Profile

Normally, the server cannot remember that both requests came from the same user.

Cookies solve this problem.

How Cookies Work :

Step 1: Server Sends Cookie

Backend response:

Set-Cookie: refreshToken=abc123

Browser stores it automatically.

Step 2: Browser Sends It Automatically

Next request:

Cookie: refreshToken=abc123

Now the server can identify the user.

Important Cookie Security Options

1. httpOnly

httpOnly: true

JavaScript cannot access the cookie.

Protects against XSS attacks.

2. secure

secure: true

if secure: true Cookie is sent only over HTTPS and if secure: false cookies is send over HTTP

3. sameSite

sameSite: "strict"

Controls cross-site cookie sharing.

Helps prevent CSRF attacks.

Responsibility of Controller

Receive request data (req.body)
Call service layer
Store refresh token in cookies
Send access token in response
Pass errors to global error handler

Service Layer (Business Logic)

Now the actual authentication logic lives in auth.service.js:

import bcrypt from "bcrypt";

import userModel from "./auth.model.js";

import ApiError from "../../common/utils/api-error.js";

import {
  generateAccessToken,
  generateRefreshToken,
} from "../../common/utils/jwt.utils.js";

const login = async ({ email, password }) => {
  const userExist = await userModel.findOne({
    email: email,
  });

  if (!userExist) {
    throw ApiError.forbidden("User Not Found");
  }

  const correctPassword = await bcrypt.compare(password, userExist.password);

  if (correctPassword) {
    const accessToken = generateAccessToken({ userId: userExist._id });
    const refreshToken = generateRefreshToken({ userId: userExist._id });
    return {
      accessToken,
      refreshToken,
      user: {
        userId: userExist._id,
        firstName: userExist.firstName,
        lastName: userExist.lastName,
        username: userExist.username,
        email: userExist.email,
        phoneNumber: userExist.phoneNumber,
      },
    };
  } else {
    throw ApiError.forbidden("Password is invalid");
  }
};

export {
  login
};

Final Result: Testing /api/auth/login API Using Postman

Step 12: Refresh Access Token

Previously, during login:

Access Token was returned in the response
Refresh Token was stored securely in HTTP-only cookies

But access tokens are short-lived.

Example:

Access Token → expires in 15 minutes
Refresh Token → expires in 7 days

So after 15 minutes, protected APIs stop working because the access token becomes invalid.

Instead of asking the user to log in again, we use the refresh token to generate a new access token automatically.

Why Refresh Tokens Are Important

Without refresh tokens:

User would need to login repeatedly
Poor user experience
More authentication requests

With refresh tokens:

Access tokens remain short-lived (more secure)
Users stay logged in smoothly
Better production-level authentication flow

Authentication Flow

Login
↓
Access Token generated
↓
Refresh Token stored in cookie
↓
Access Token expires
↓
Frontend calls /refresh
↓
Backend verifies refresh token
↓
New Access Token generated

Update JWT Utility Functions

Previously, we only added:

generateAccessToken()
generateRefreshToken()

Now we also need:

verifyRefreshToken()

Update:

src/common/utils/jwt.utils.js

import jwt from "jsonwebtoken";

const generateAccessToken = (payload) => {
  return jwt.sign(
    payload,
    process.env.JWT_ACCESS_SECRET,
    {
      expiresIn:
        process.env.JWT_ACCESS_EXPIRES_IN || "15m",
    }
  );
};

const generateRefreshToken = (payload) => {
  return jwt.sign(
    payload,
    process.env.JWT_REFRESH_SECRET,
    {
      expiresIn:
        process.env.JWT_REFRESH_EXPIRES_IN || "7d",
    }
  );
};

const verifyAccessToken = (token) => {
  return jwt.verify(
    token,
    process.env.JWT_ACCESS_SECRET
  );
};

const verifyRefreshToken = (token) => {
  return jwt.verify(
    token,
    process.env.JWT_REFRESH_SECRET
  );
};

export {
  generateAccessToken,
  generateRefreshToken,
  verifyAccessToken,
  verifyRefreshToken,
};

Define Refresh Route

Update:

src/modules/auth/auth.routes.js

import { Router } from "express";
import * as controller from "./auth.controller.js";

const router = Router();

router.post("/register", controller.register);

router.post("/login", controller.login);

router.post("/refresh", controller.refresh);

export default router;

This creates:

POST /api/auth/refresh

Controller Layer

Now we handle refresh requests inside:

src/modules/auth/auth.controller.js

const refresh = async (req, res, next) => {
  try {
    const { accessToken } =
      await authService.refresh(
        req.cookies.refreshToken
      );

    ApiResponse.ok(
      res,
      "Token refreshed successfully",
      { accessToken }
    );
  } catch (error) {
    next(error);
  }
};

Why Read Token From Cookies?

Because refresh tokens are sensitive.

Storing them inside:

httpOnly cookies

prevents JavaScript from accessing them.

This protects against:

XSS attacks
Token theft through frontend scripts

Service Layer (Business Logic)

Now the actual refresh logic lives inside:

src/modules/auth/auth.service.js

const refresh = async (token) => {
  if (!token) {
    throw ApiError.unauthorized(
      "Refresh token missing"
    );
  }

  const decoded =
    verifyRefreshToken(token);

  const userExists =
    await userModel.findOne({
      _id: decoded.userId,
    });

  if (!userExists) {
    throw ApiError.notFound(
      "User Not found"
    );
  }

  const accessToken =
    generateAccessToken({
      userId: userExists._id,
    });

  return { accessToken };
};

Final Refresh Flow

Frontend Request
↓
/api/auth/refresh
↓
Read refreshToken cookie
↓
Verify refresh token
↓
Find user
↓
Generate new access token
↓
Send response

Step 13: Get Current User & Logout APIs

After implementing:

Register
Login
Refresh Token

the next important step is handling:

Fetching logged-in user details
Logging users out securely

These are common authentication features used in almost every production application.

Why Do We Need GetMe API?

After login, the frontend often needs user information like:

Name
Email
Username
Phone number

Instead of storing all user data in frontend state permanently, we create a dedicated API:

GET /api/auth/getme

This endpoint:

Verifies the access token
Identifies the logged-in user
Returns fresh user details

This helps keep frontend authentication state synchronized with the backend.

Why Do We Need Logout?

Even though JWT authentication is stateless, users still need a secure way to end their session.

During login:

Access token is stored on frontend
Refresh token is stored inside cookies

If logout is not implemented:

Refresh token remains active
User session can continue unintentionally

So during logout we:

Clear refresh token cookie
End user session safely

Define Routes

Update:

src/modules/auth/auth.routes.js

import { Router } from "express";
import authMiddleware from "./auth.middleware.js";

import * as controller from "./auth.controller.js";

const router = Router();

router.post("/register", controller.register);

router.post("/login", controller.login);

router.post("/refresh", controller.refresh);

router.get(
  "/getme",
  authMiddleware,
  controller.getMe
);

router.get(
  "/logout",
  authMiddleware,
  controller.logout
);

export default router;

Controller Layer

Update:

src/modules/auth/auth.controller.js

const getMe = async (req, res, next) => {
  try {
    const userId = req.userId;

    console.log("userId", userId);

    const { user } =
      await authService.getMe(userId);

    ApiResponse.ok(
      res,
      "User get successfully",
      { user }
    );
  } catch (error) {
    next(error);
  }
};

const logout = async (req, res, next) => {
  try {
    res.clearCookie("refreshToken");

    ApiResponse.ok(
      res,
      "Logout Success"
    );
  } catch (error) {
    next(error);
  }
};

What Does clearCookie() Do?

res.clearCookie("refreshToken");

This removes the refresh token from browser cookies.

Result:

User can no longer refresh access tokens
Session is effectively terminated

Service Layer (Business Logic)

Update:

src/modules/auth/auth.service.js

const getMe = async (userId) => {
  if (!userId) {
    throw ApiError.notFound(
      "user not found"
    );
  }

  const userExist =
    await userModel.findOne({
      _id: userId,
    });

  if (!userExist) {
    throw ApiError.notFound(
      "User Not found"
    );
  }

  return {
    user: {
      userId: userExist._id,
      firstName: userExist.firstName,
      lastName: userExist.lastName,
      username: userExist.username,
      email: userExist.email,
      phoneNumber:
        userExist.phoneNumber,
    },
  };
};

Step 14: Create household inside households Module

Now that authentication is complete, the next step is to allow users to create household

Requirements

After logging in, a user should be able to:

Create a new household by providing:
- a valid household name
- a 6-character invite code (chosen by the user)
Only authenticated users are allowed to create a household.

Module Structure

Inside src/modules/, create a new folder:

src/modules/households/
├── households.controller.js
├── households.middleware.js
├── households.model.js
├── households.routes.js
├── households.service.js

Create HouseHold Schema

Create:

src/modules/households/households.model.js

import mongoose from "mongoose";

const houseHoldSchema = new mongoose.Schema({
    name: String,
    inviteCode: String,
    members: [mongoose.Types.ObjectId],
    createdBy: mongoose.Types.ObjectId
}, { timestamps: true })

const houseHoldModel = mongoose.model("households", houseHoldSchema)

export default houseHoldModel;

Authentication Middleware

To ensure only logged-in users can create organisations:

Inside:

src/modules/auth/auth.middleware.js

import jwt from 'jsonwebtoken';

const authMiddleware = async (req, res, next) => {
    try{
        const token = req.headers.token;

        const decode = jwt.verify(token, process.env.JWT_SECRET);

        const userExists = await userModel.findOne({
            _id: decode.userId
        })

        if(!userExists){
            throw ApiError.notFound("User Not found");
        }
    
        req.userId = decode.userId;
    
        next();
    } catch (error){
        next(error)
    }
};

export default authMiddleware;

Update Global Error Middleware

Update your error middleware to handle JWT-specific errors:

src/common/middleware/error-middleware.js

import ApiError from "../utils/api-error.js";

const errorHandler = (err, req, res, next) => {

    // Handle known (custom) errors
    if (err instanceof ApiError) {
        return res.status(err.statusCode).json({
            success: false,
            message: err.message
        });
    }

    if (err.name === 'JsonWebTokenError') {
        return res.status(401).json({
            success: false,
            message: err.message
        });
    }



    // Handle unknown errors
    return res.status(500).json({
        success: false,
        message: "Internal Server Error"
    });
};

export default errorHandler;

Register Household Routes

Update src/app.js:

import householdsRoute from './modules/households/households.routes.js'

app.use("/api/households", orgRoute);

Now all households APIs will be available under:

/api/households/*

Define Routes

Create:

src/modules/households/households.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from './households.controller.js';

const router = Router();

router.post('/', authMiddleware, controller.createHouseHold);

export default router;

Controller Layer

Create:

src/modules/households/households.controller.js

import ApiResponse from "../../common/utils/api-response.js";
import * as householdService from './households.service.js'

const createHouseHold = async (req, res, next) => {
    try {
        const data = await householdService.createHouseHold(req);
        ApiResponse.ok(res, "Household Created Successfully", data);
    } catch (err) {
        next(err);
    }
}

export {
    createHouseHold
}

Responsibility of Controller

Calls service layer
Sends success response
Passes errors to global middleware

Business Logic (Service Layer)

Create:

src/modules/households/households.service.js

const createHouseHold = async (req) => {
  const householdName = req.body.householdName;
  const inviteCode = req.body.inviteCode;
  const createdBy = req.userId;

  // CHECK IF INVITE CODE ALREADY EXISTS
  const inviteCodeExists = await houseHoldModel.findOne({
    inviteCode,
  });

  if (inviteCodeExists) {
    throw ApiError.badRequest("Invite code already exists");
  }

  const members = [req.userId];
  const newHouseHold = await houseHoldModel.create({
    householdName,
    inviteCode,
    members,
    createdBy,
  });

  // UPDATE USER WITH HOUSEHOLD ID
  await userModel.findByIdAndUpdate(createdBy, {
    householdId: newHouseHold._id,
  });

  return {
    householdId: newHouseHold._id,
    name: newHouseHold.name,
    members: newHouseHold.members,
    inviteCode: newHouseHold.inviteCode,
  };
};

Request Flow

POST /api/households/
   ↓
auth.middleware.js (verify token)
   ↓
households.controller.js
   ↓
households.service.js
   ↓
MongoDB
   ↓
Response

Final Result: Testing api/households/ API Using Postman

Step 14: Join Household Feature

After implementing household creation, the next step is to allow users to join an existing household using an invite code.

Define Routes

Create:

src/modules/households/households.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from './households.controller.js';

const router = Router();

router.post('/', authMiddleware, controller.createHouseHold);
router.post('/join', authMiddleware, controller.joinHouseHold);

export default router;

Controller Layer

Create:

src/modules/households/households.controller.js

import ApiResponse from "../../common/utils/api-response.js";
import * as householdService from './households.service.js'

const joinHouseHold = async (req, res, next) => {
    try {
        const data = await householdService.joinHouseHold(req);
        ApiResponse.ok(res, "Household Joined Successfully", data);
    } catch (err) {
        next (err);
    }
}

export {
    joinHouseHold
}

Responsibility of Controller

Calls service layer
Sends success response
Passes errors to global middleware

Business Logic (Service Layer)

Create:

src/modules/households/households.service.js

const joinHouseHold = async (req) => {
  const { inviteCode } = req.body;

  const houseHoldExists = await houseHoldModel.findOne({
    inviteCode,
  });

  if (!houseHoldExists) {
    throw ApiError.badRequest("Invalid Invite Code");
  }

  const newMember = req.userId;

  const memberExists = houseHoldExists?.members?.includes(newMember);

  if (memberExists) {
    throw ApiError.badRequest("Member already exists in household");
  }

  houseHoldExists.members.push(newMember);

  await houseHoldExists.save();

  // UPDATE USER
  await userModel.findByIdAndUpdate(newMember, {
    householdId: houseHoldExists._id,
  });

  return {
    householdId: houseHoldExists._id,
    name: houseHoldExists.name,
    members: houseHoldExists.members,
  };
};

Request Flow

POST /api/households/join
   ↓
auth.middleware.js (verify token)
   ↓
households.controller.js
   ↓
households.service.js
   ↓
MongoDB
   ↓
Response

Final Result: Testing api/households/join API Using Postman

Step 15: Get All Household Members

After implementing join functionality, the next step is to allow users to view all members of a household.

Update Household Model (Add Reference)

To fetch full user details, we need to define a reference in the schema.

Update:

src/modules/households/households.model.js

import mongoose from "mongoose";

const houseHoldSchema = new mongoose.Schema({
    name: String,
    inviteCode: String,
    members: [{
        type: mongoose.Types.ObjectId,
        ref: "users" // reference to users collection
    }],
    createdBy: mongoose.Types.ObjectId
}, { timestamps: true });

const houseHoldModel = mongoose.model("households", houseHoldSchema);

export default houseHoldModel;

Why Add ref?

MongoDB stores only ObjectIds in members
ref: "users" tells Mongoose:

“These IDs belong to the users collection”
This enables the use of populate (explained below)

Define Routes

Update:

src/modules/households/households.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from './households.controller.js';

const router = Router();

router.post('/', authMiddleware, controller.createHouseHold);
router.post('/join', authMiddleware, controller.joinHouseHold);
router.get('/:id/members', authMiddleware, controller.getAllMembers)

export default router;

Controller Layer

Create / Update:

src/modules/households/households.controller.js

const getAllMembers = async (req, res, next) => {
    try {
        const data = await householdService.getAllMembers(req);
        ApiResponse.ok(res, "All Members", data);
    } catch (err) {
        next(err);
    }
};

Service Layer (Business Logic)

Create / Update:

src/modules/households/households.service.js

const getAllMembers = async (req) => {
    const houseHoldId = req.params.id;

    const houseHoldExists = await houseHoldModel
        .findById(houseHoldId)
        .populate('members', 'name email');

    if (!houseHoldExists) {
        throw ApiError.notFound("Household not found");
    }

    return houseHoldExists.members;
};

What is .populate()?

In MongoDB, we store references like this:

members: [ObjectId("1234"), ObjectId("5678")]

If we fetch data without populate:

{
  "members": ["1234", "5678"]
}

This is not useful for the frontend.

Using Populate

.populate('members', 'name email')

This tells Mongoose:

Replace member IDs with actual user data (only name and email)

Output After Populate

{
  "members": [
    {
      "_id": "64abc...",
      "name": "Shubham",
      "email": "shubham@gmail.com"
    }
  ]
}

Why Use Populate?

Converts ObjectIds → real data
Works similar to JOIN in SQL
Reduces extra API calls from frontend

Request Flow

GET /api/households/:id/members
   ↓
auth.middleware.js (verify token)
   ↓
households.controller.js
   ↓
households.service.js
   ↓
MongoDB (findById + populate)
   ↓
Response

Final Result: Testing /api/households/:id/members API Using Postman

Step 16: Leave Household Feature

After implementing the ability to join a household, the next important feature is to allow users to leave a household.

Define Routes

Update:

src/modules/households/households.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from './households.controller.js';

const router = Router();

router.post('/', authMiddleware, controller.createHouseHold);
router.post('/join', authMiddleware, controller.joinHouseHold);
router.get('/:id/members', authMiddleware, controller.getAllMembers)

// Leave household
router.delete('/:id/leave', authMiddleware, controller.leaveHouseHold);

export default router;

Controller Layer

Update:

src/modules/households/households.controller.js

const leaveHouseHold = async (req, res, next) => {
    try {
        const data = await householdService.leaveHouseHold(req);
        ApiResponse.ok(res, "Left Household Successfully", data);
    } catch (err) {
        next(err);
    }
};

Service Layer (Business Logic)

Update:

src/modules/households/households.service.js

const leaveHouseHold = async (req) => {
    const houseHoldId = req.params.id;
    const userId = req.userId;

    const houseHold = await houseHoldModel.findById(houseHoldId);

    if (!houseHold) {
        throw ApiError.notFound("Household not found");
    }

    const isMember = houseHold.members.some(
        (member) => member.toString() === userId
    );

    if (!isMember) {
        throw ApiError.badRequest("User is not a member of this household");
    }

    houseHold.members = houseHold.members.filter(
        (member) => member.toString() !== userId
    );

    //If creator/admin leaves
    if (houseHold.createdBy.toString() === userId) {
        if (houseHold.members.length === 0) {
            await houseHold.deleteOne();
            return { message: "Household deleted as no members left" };
        }else{
            houseHold.createdBy = houseHold.members[0];
        }
    }

    await houseHold.save();

    return {
        householdId: houseHold._id,
        members: houseHold.members
    };
}

Request Flow

DELETE /api/households/:id/leave
   ↓
auth.middleware.js (verify token)
   ↓
households.controller.js
   ↓
households.service.js
   ↓
MongoDB (find → update → save/delete)
   ↓
Response

Final Result: Testing /api/households/:id/leave API Using Postman

Step 17: Add Items Feature (Inventory Management)

Now that households are implemented, the next step is to allow users to add grocery items inside a household.

This is the core functionality of the application.

Requirement

A logged-in user should be able to:

Add items with:
- name
- category
- quantity
- expiry date
The system should automatically assign a status:
- fresh
- expiring-soon (≤ 3 days)
- expired

Module Structure

Created a new module:

src/modules/items/
├── items.controller.js
├── items.middleware.js
├── items.model.js
├── items.routes.js
├── items.service.js

Item Schema

Create:

src/modules/items/items.model.js

import mongoose from "mongoose";

const itemsSchema = new mongoose.Schema({
    householdId: {
        type: mongoose.Types.ObjectId,
        ref: "households"
    },
    addedBy: {
        type: mongoose.Types.ObjectId,
        ref: "users"
    },
    name: {
        type: String,
        required: true
    },
    category: {
        type: String,
        enum: ['produce', 'dairy', 'meat', 'pantry', 'frozen']
    },
    quantity: Number,
    expiryDate: Date,
    status: {
        type: String,
        enum: ['fresh', 'expiring-soon', 'expired', 'used', 'wasted']
    }
}, { timestamps: true });

const itemsModel = mongoose.model("items", itemsSchema);

export default itemsModel;

Why Enum?

We use enum to restrict values.

Example:

Category must be one of:
- produce, dairy, meat, pantry, frozen

If any other value is passed → Mongoose throws a validation error.

Household Middleware

Before adding an item, we must ensure:

The user belongs to a household

Create:

src/modules/households/households.middleware.js

import ApiError from '../../common/utils/api-error.js';
import houseHoldModel from './households.model.js';

const housholdMiddleware = async (req, res, next) => {
    try {
        const userId = req.userId;

        const householdExists = await houseHoldModel.findOne({
            members: userId
        });

        if (!householdExists) {
            throw ApiError.notFound("HouseHold Not found");
        }

        req.householdId = householdExists._id.toString();

        next();
    } catch (error) {
        next(error);
    }
};

export default housholdMiddleware;

Why This Middleware?

Ensures user is part of a household
Prevents unauthorized item creation
Attaches householdId to request

Routes

Create:

src/modules/items/items.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import housholdMiddleware from "../households/households.middleware.js";
import * as controller from './items.controller.js';

const router = Router();

router.post('/', authMiddleware, housholdMiddleware, controller.createItem);

export default router;

Controller Layer

Create:

src/modules/items/items.controller.js

import ApiResponse from "../../common/utils/api-response.js";
import * as itemService from './items.service.js';

const createItem = async (req, res, next) => {
    try {
        const data = await itemService.createItem(req);
        ApiResponse.ok(res, "Item Created Successfully", data);
    } catch (err) {
        next(err);
    }
};

export {
    createItem
};

Responsibility of Controller

Calls service layer
Sends success response
Passes errors to middleware

Service Layer (Business Logic)

Create:

src/modules/items/items.service.js

import ApiError from "../../common/utils/api-error.js";
import itemsModel from "./items.model.js";

const createItem = async (req) => {
    const { name, category, quantity, expiryDate } = req.body;
    const userId = req.userId;
    const householdId = req.householdId;

    if (!name || !category || !quantity || !expiryDate) {
        throw ApiError.badRequest("All fields are required");
    }

    const today = new Date();
    const expiry = new Date(expiryDate);

    // Normalize time (important for correct comparison)
    //Removes time part → avoids wrong comparisons
    today.setHours(0, 0, 0, 0);
    expiry.setHours(0, 0, 0, 0);

    const diffTime = expiry - today;
    // 1000 → milliseconds in 1 second
    // 60 → seconds in 1 minute
    // 60 → minutes in 1 hour
    // 24 → hours in 1 day
    //1 day = 86,400,000 milliseconds
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    let status = "fresh";

    if (diffDays < 0) {
        status = "expired";
    } else if (diffDays <= 3) {
        status = "expiring-soon";
    }

    const newItem = await itemsModel.create({
        householdId,
        addedBy: userId,
        name,
        category,
        quantity,
        expiryDate,
        status
    });

    return {
        _id: newItem._id,
        name: newItem.name,
        status: newItem.status
    };
}

export {
    createItem
}

Request Flow

POST /api/items/
   ↓
auth.middleware.js
   ↓
household.middleware.js
   ↓
items.controller.js
   ↓
items.service.js
   ↓
MongoDB
   ↓
Response

Final Result: Testing /api/items/ API Using Postman

Step 18: Automated Status Updates (Using Cron Job)

Now that item creation is implemented, the next improvement is making item status dynamic instead of static.

Because expiry status changes over time, we use a background cron job.

Why This is Needed?

When an item is created:

It may be fresh today
But before 2 days of expiry date it becomes expiring-soon
After expiry → expired

So status must update automatically without user action.

Solution :

To solve this, we introduce a background cron job.

A cron job runs at a fixed interval and updates item status automatically based on current date.

We used:

node-cron

Cron Job Setup (Testing Mode)

Initially, I tested the cron job by running it every minute.

Create:

src/modules/items/items.cron.js

import cron from "node-cron";

cron.schedule("* * * * *", () => {
  console.log(
    "Cron job running every minute at",
    new Date().toLocaleTimeString()
  );
});

Understanding the Cron Expression

"* * * * *"

This means:

minute hour day month weekday

So the above expression runs:

Every minute

For production, this can later be changed to:

0 6 * * *

Which means:

Run every day at 6 AM

For more details checkout node-cron documentation: https://www.nodecron.com/getting-started.html

Implementing Status Update Logic

Now the next step is to update item statuses automatically.

Inside the service layer, we created updateItemStatuses function to implement the logic:

Fetch all items from database(item collection)
Compare expiry date with current date
Calculate difference in days
Assign correct status

Rules:

diffDays < 0 → expired
diffDays <= 3 → expiring-soon
else → fresh

src/modules/items/items.service.js

const updateItemStatuses = async () => {
  try {
    const items = await itemsModel.find({});

    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const bulkOperations = [];
    const expiringItems = [];

    for (const item of items) {
      const expiry = new Date(item.expiryDate);

      expiry.setHours(0, 0, 0, 0);

      const diffTime = expiry - today;

      const diffDays = Math.ceil(
        diffTime / (1000 * 60 * 60 * 24)
      );

      let newStatus = "fresh";

      if (diffDays < 0) {
        newStatus = "expired";
      } else if (diffDays <= 3) {
        newStatus = "expiring-soon";

        expiringItems.push(item);
      }

      // Update only if status changed
      if (item.status !== newStatus) {
        bulkOperations.push({
          updateOne: {
            filter: { _id: item._id },
            update: {
              $set: {
                status: newStatus,
              },
            },
          },
        });
      }
    }

    // Bulk update optimization
    if (bulkOperations.length > 0) {
      await itemsModel.bulkWrite(bulkOperations);

      console.log(
        `Updated ${bulkOperations.length} items`
      );
    }

    return expiringItems;
  } catch (error) {
    console.error("Cron job failed:", error);
  }
};

Why Use bulkWrite (mongoDB) ?

Instead of updating items one by one:

await item.save();

We use:

itemsModel.bulkWrite(bulkOperations);

Benefits:

Fewer database calls
Better performance
More scalable approach

Check out mongodb documentation on bulkWrite: https://www.mongodb.com/docs/manual/reference/method/db.collection.bulkWrite/ )

Collecting Expiring Items

While updating statuses, we also track items that are close to expiry.

These items are stored separately:

expiringItems.push(item);

This allows us to later notify users about upcoming expirations.

Connecting Cron with Service

Now we connect the cron scheduler with the status update logic.

Update:

src/modules/items/items.cron.js

import cron from "node-cron";
import { updateItemStatuses } from "./items.service.js";

cron.schedule("* * * * *", async () => {
  console.log("Cron job started...");

  await updateItemStatuses();
});

Final Cron Flow

Cron Trigger
   ↓
Fetch all items
   ↓
Calculate expiry difference
   ↓
Update statuses
   ↓
Bulk update MongoDB
   ↓
Collect expiring items

Step 19: Email Notification System for Expiring Items

Now that item statuses update automatically using a cron job, the next step is to notify household members when items are about to expire.

Problem

Even if the database status updates correctly:

Users may never open the app regularly
Expiring items can still go unnoticed
Food waste can still happen

So we need a notification mechanism.

Solution

Whenever the cron job finds items that are:

expiring-soon

The system automatically sends email notifications to all household members.

This ensures everyone in the household is informed in advance.

Setting Up Email Service (Nodemailer)

To send emails, I used:

nodemailer

Checkout nodemailer documentation: https://nodemailer.com/

Email Configuration

Create:

src/common/config/email.js

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport({
  host: "smtp.gmail.com",

  // SMTP port for secure connection
  port: 465,

  secure: true,

  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

const sendMail = async (to, subject, html) => {
  await transporter.sendMail({
    from: process.env.SMTP_FROM_EMAIL,
    to,
    subject,
    html,
  });
};

export { sendMail };

Environment Variables

Update .env

SMTP_USER=your_email@gmail.com
SMTP_PASS=your_app_password
SMTP_FROM_EMAIL=your_email@gmail.com

Why App Password?

For Gmail SMTP:

Normal Gmail password does not work
Google requires App Passwords for secure SMTP access

What is App Password?

It is a special 16-digit password generated by Google that allows apps like Nodemailer to send emails safely.

How to get App password?

1. Enable 2-Step Verification

Go to: https://myaccount.google.com/security

Turn ON:

2-Step Verification

2. Generate App Password

After enabling 2FA:

Go to: https://myaccount.google.com/apppasswords

You will get something like:

abcd efgh ijkl mnop

3. Use it in Nodemailer

auth: {
  user: process.env.SMTP_USER, // your gmail address
  pass: process.env.SMTP_PASS, // app password (NOT normal password)
}

Notification Flow

The notification system works like this:

Cron Job
   ↓
Update item statuses
   ↓
Collect expiring items
   ↓
Group items by household
   ↓
Fetch household members
   ↓
Send emails

Grouping Expiring Items by Household

Inside the cron job schedular code:

const grouped = {};

for (const item of expiringItems) {
  const key = item.householdId.toString();

  if (!grouped[key]) {
    grouped[key] = [];
  }

  grouped[key].push(item);
}

Why Group by Household?

Because:

Multiple households exist
Each household has different members
Notifications should only go to relevant users

Fetching Household Members

Now we fetch all members of a household.

const household = await houseHoldModel
  .findById(householdId)
  .populate("members", "email");

Using populate() gives access to member emails directly.

Generating Email Content

Next, we generate
the email body dynamically.

const itemsList = grouped[householdId]
  .map(
    (i) =>
      `
        ${i.name} - expires on 
        ${new Date(i.expiryDate).toDateString()}
      `
  )
  .join("");

Final Email Template

const html = `
  Expiring Items Alert

   The following items will expire soon: 

   ${itemsList} 
`;

Sending Emails

Finally, emails are sent to all household members.

for (const email of emails) {
  await sendMail(
    email,
    "Items Expiring Soon",
    html
  );

Final Cron Implementation

Update:

src/modules/items/items.cron.js

import cron from "node-cron";

import { updateItemStatuses } from "./items.service.js";

import houseHoldModel from "../households/households.model.js";

import { sendMail } from "../../common/config/email.js";

cron.schedule("* * * * *", async () => {
  try {
    console.log("cronJob started...");

    const expiringItems =
      await updateItemStatuses();

    if (!expiringItems.length) {
      console.log("No expiring items");

      return;
    }

    // Group items by household
    const grouped = {};

    for (const item of expiringItems) {
      const key = item.householdId.toString();

      if (!grouped[key]) {
        grouped[key] = [];
      }

      grouped[key].push(item);
    }

    // Send notifications
    for (const householdId of Object.keys(grouped)) {
      const household = await houseHoldModel
        .findById(householdId)
        .populate("members", "email");

      const emails = household.members.map(
        (u) => u.email
      );

      const itemsList = grouped[householdId]
        .map(
          (i) =>
            `
              ${i.name} - expires on 
              ${new Date(i.expiryDate).toDateString()}
            `
        )
        .join("");

      const html = `
        Expiring Items Alert

        
          The following items will expire soon:
        

        
          ${itemsList}
      `;

      for (const email of emails) {
        await sendMail(
          email,
          "Items Expiring Soon",
          html
        );
      }
    }
  } catch (err) {
    console.error("Cron failed:", err);
  }
});

Outcome

With this implementation:

Household members receive automated expiry alerts
Expiring items are tracked proactively
Users can consume items before they expire
Food wastage is reduced significantly

Step 20: Get All Items & Update Item APIs

After implementing item creation and automated expiry tracking, the next step was building inventory management APIs for the frontend dashboard.

These APIs allow users to:

View all household inventory items
Edit existing items directly from the inventory table

This became important after integrating the inventory dashboard using Material React Table.

Why These APIs Were Needed

The frontend inventory system required:

Fetching all items belonging to the logged-in user’s household
Displaying items inside a data table
Supporting inline editing
Updating items without refreshing the entire page manually

This enabled a much smoother inventory management experience.

Get All Items API

Requirements

A logged-in user should be able to:

Fetch all items from their household
View:
- name
- category
- quantity
- expiry date
- status

Only authenticated household members should access these items.

Define Routes

Update:

src/modules/items/items.routes.js

import { Router } from "express";

import authMiddleware from "../auth/auth.middleware.js";

import housholdMiddleware from "../households/households.middleware.js";

import * as controller from "./items.controller.js";

const router = Router();

router.post(
  "/",
  authMiddleware,
  housholdMiddleware,
  controller.createItem
);

router.get(
  "/",
  authMiddleware,
  housholdMiddleware,
  controller.getItems
);

router.put(
  "/:id",
  authMiddleware,
  housholdMiddleware,
  controller.updateItem
);

export default router;

Controller Layer

Update:

src/modules/items/items.controller.js

import ApiResponse from "../../common/utils/api-response.js";

import * as itemService from "./items.service.js";

const getItems = async (req, res, next) => {
  try {
    const data = await itemService.getItems(req);

    ApiResponse.ok(
      res,
      "Items fetched successfully",
      data
    );
  } catch (error) {
    next(error);
  }
};

const updateItem = async (req, res, next) => {
  try {
    const data = await itemService.updateItem(req);

    ApiResponse.ok(
      res,
      "Item updated successfully",
      data
    );
  } catch (error) {
    next(error);
  }
};

export {
  getItems,
  updateItem,
};

Get All Items Service

Create / Update:

src/modules/items/items.service.js

const getItems = async (req) => {
  const householdId = req.householdId;

  const page = Number(req.query.page) || 1;
  const limit = Number(req.query.limit) || 10;
  const search = req.query.search || "";

  const skip = (page - 1) * limit;

  const query = {
    householdId,
  };

  if (search) {
    query.$or = [
      {
        name: {
          $regex: search,
          $options: "i",
        },
      },
      {
        category: {
          $regex: search,
          $options: "i",
        },
      },
    ];
  }

  const items = await itemsModel
    .find(query)
    .populate("addedBy", "name email")
    .sort({ createdAt: -1 })
    .skip(skip)
    .limit(limit);

  const totalItems = await itemsModel.countDocuments({
    householdId,
  });

  return {
    items,
    totalItems,
  };
};

Why Filter Using householdId?

This ensures:

Users only see items belonging to their household
Data remains isolated between households
Unauthorized inventory access is prevented

Without this filtering, users could potentially access items from other households.

Update Item Service

Now users can edit inventory items directly from the dashboard table.

Update:

src/modules/items/items.service.js

const updateItem = async (req) => {
  const itemId = req.params.id;

  const {
    name,
    category,
    quantity,
    expiryDate,
  } = req.body;

  const item = await itemsModel.findById(itemId);

  if (!item) {
    throw ApiError.notFound("Item not found");
  }

  item.name = name;
  item.category = category;
  item.quantity = quantity;
  item.expiryDate = expiryDate;

  const today = new Date();

  const expiry = new Date(expiryDate);

  today.setHours(0, 0, 0, 0);

  expiry.setHours(0, 0, 0, 0);

  const diffDays = Math.ceil(
    (expiry - today) /
      (1000 * 60 * 60 * 24)
  );

  let status = "fresh";

  if (diffDays < 0) {
    status = "expired";
  } else if (diffDays <= 3) {
    status = "expiring-soon";
  }

  item.status = status;

  await item.save();

  return item;
};

Why Recalculate Status During Update?

Suppose a user edits:

expiry date
quantity
item details

Then the status may also change.

Example:

Fresh → Expiring Soon
Expiring Soon → Expired

So status recalculation ensures item state always stays accurate.

Step 21: Delete Item API

After implementing the Get All Items and Update Item APIs, the next important feature was allowing users to remove inventory items directly from the dashboard.

This became necessary after integrating row actions inside the Material React Table inventory system.

The delete functionality allows users to:

Remove expired items
Delete mistakenly added inventory
Keep household inventory clean and updated

Why Delete API Was Needed

Inside the inventory dashboard, each row already had:

Edit action
Status display
Inline editing support

The next logical feature was:

Delete Item
    ↓
Remove item from database
    ↓
Refresh inventory table
    ↓
Show updated inventory list

This created a much better inventory management experience for users.

Defining Delete Route

Update:

src/modules/items/items.routes.js

import { Router } from "express";

import authMiddleware from "../auth/auth.middleware.js";

import housholdMiddleware from "../households/households.middleware.js";

import * as controller from "./items.controller.js";

const router = Router();

router.post(
  "/",
  authMiddleware,
  housholdMiddleware,
  controller.createItem
);

router.get(
  "/",
  authMiddleware,
  housholdMiddleware,
  controller.getItems
);

router.put(
  "/:id",
  authMiddleware,
  housholdMiddleware,
  controller.updateItem
);

router.delete(
  "/:itemId",
  authMiddleware,
  housholdMiddleware,
  controller.deleteItem
);

export default router;

Controller Layer

Update:

src/modules/items/items.controller.js

import ApiResponse from "../../common/utils/api-response.js";

import * as itemService from "./items.service.js";

const deleteItem = async (req, res, next) => {
  try {
    const data = await itemService.deleteItem(req);

    ApiResponse.ok(
      res,
      "Item Deleted Successfully",
      data
    );
  } catch (err) {
    next(err);
  }
};

export {
  getItems,
  updateItem,
  deleteItem,
};

Delete Item Service

Update:

src/modules/items/items.service.js

const deleteItem = async (req) => {
  const { itemId } = req.params;

  const householdId = req.householdId;

  const item = await itemsModel.findOne({
    _id: itemId,
    householdId,
  });

  if (!item) {
    throw ApiError.notFound("Item not found");
  }

  await itemsModel.deleteOne({
    _id: itemId,
    householdId,
  });

  return {
    itemId,
  };
};

Sliding Window

Shubham Kumar Singh — Tue, 28 Apr 2026 12:59:33 GMT

Problem

You are given an array of size N and an integer K.

Your task:
Find the maximum sum of any subarray of size exactly K

Understanding the Problem

Let’s take an example:

arr = [2, 1, 5, 1, 3, 2]
k = 3

Possible subarrays of size 3:

[2, 1, 5] → sum = 8
[1, 5, 1] → sum = 7
[5, 1, 3] → sum = 9
[1, 3, 2] → sum = 6

Answer = 9

Brute Force Thinking

A straightforward way:

Pick every subarray of size k
Calculate sum again and again

Time Complexity = O(n * k)

Key Observation

Look at how the window moves:

arr = [2, 1, 5, 1, 3, 2]

[2, 1, 5, 1, 3, 2]
 0  1  2  3  4  5 
 ↑     ↑

[2, 1, 5] → sum = 8  

[2, 1, 5, 1, 3, 2]
 0  1  2  3  4  5 
    ↑     ↑

[1, 5, 1] → sum = 8+1-2 = 7

Instead of recalculating everything:

Remove 2
Add 1

Sliding Window Idea

Don’t recompute the whole sum.
Just update it while moving forward.

Step-by-Step Dry Run

arr = [2, 1, 5, 1, 3, 2]
       0  1  2  3  4  5
        
window (size = 3)

Step 1

[2, 1, 5, 1, 3, 2]
 0  1  2  3  4  5 
 ↑     ↑

Window size = 3
Window elements: [2, 1, 5]
Sum = 8

Step 2

[2, 1, 5, 1, 3, 2]
 0  1  2  3  4  5 
    ↑     ↑

New window element : [1, 5, 1]

Add arr[3] = 1, Remove arr[0] = 2

Sum = 8 + 1 - 2 = 7

Step 3

[2, 1, 5, 1, 3, 2]
 0  1  2  3  4  5 
       ↑     ↑

New window element: [5, 1, 3]

Add arr[4] = 3, Remove arr[1] = 1

Sum = 7 + 3 - 1 = 9

Step 4

[2, 1, 5, 1, 3, 2]
 0  1  2  3  4  5 
          ↑     ↑

New window element: [1, 3, 2]

Add arr[5]=2, Remove arr[2]= 5

Sum = 9 + 2 - 5 = 6

Key Insight

At every step:

Add the next element
Remove the previous element

Constant work per step → O(n)

Code

sum = 0

// Step 1: Calculate sum of first window
for i from 0 to k-1:
    sum = sum + arr[i]

maximum = sum

// Step 2: Slide the window
for i from k to n-1:
    sum = sum + arr[i]        // add next element
    sum = sum - arr[i - k]    // remove previous element

    maximum = max(maximum, sum)

// Final answer
return maximum

Complexity

Time Complexity: O(n)
Space Complexity: O(1)

Aggressive Cows Problem using Binary Search

Shubham Kumar Singh — Tue, 28 Apr 2026 00:21:47 GMT

Problem

Core Idea

You are not directly placing cows.

Instead, you are guessing the answer (minimum distance) and checking:

“Is it possible to place all cows with at least this distance?”

Goal

Find the maximum possible minimum distance between any two cows.

Why Binary Search?

Minimum distance (L) = 0
Maximum distance (R) = max(stall) - min(stall)

So the answer lies in a range → perfect for binary search.

Example

Stalls = [1, 2, 4, 8, 9]
Cows = 3

Step 1: Sort

[1, 2, 4, 8, 9]

Step 2: Apply Binary Search on distance

Range:

l = 0
r = 9 - 1 = 8

Search space:

0 1 2 3 4 5 6 7 8
l               r

Step 3: Try Mid Values

mid = (L + R)/2 =(0+8)/2 = 4

0 1 2 3 4 5 6 7 8
l       m       r

Try placing cows with minimum distance = 4

Stalls:  1   2   4   8   9

Place 1st cow at 1
2-1 ≥ 4 → Distance Smaller than minimum distance 4. So, cannot place cow
4-1 ≥ 4 → Distance Smaller than minimum distance 4. So, cannot place cow
8-1 ≥ 4 → place 2nd cow at 8
9-8 ≥ 4 → Distance Smaller than minimum distance 4. So, cannot place cow

2 cows placed

Since we cannot place all 3 cows with a minimum distance of 4, it is impossible to place them with any larger distance like 5, 6, 7, or 8.

So:

r = mid - 1 = 3

mid = (L + R)/2 =(0+3)/2 = 2

0 1 2 3 4 5 6 7 8
l   m r

Try placing cows with minimum distance = 2

Stalls:  1   2   4   8   9

Place 1st cow at 1
2-1 ≥ 2 → Distance Smaller than minimum distance 2. So, cannot place cow
4-1 ≥ 2 place 2nd cow at 4
8-4 ≥ 2 → place 2nd cow at 8

3 cows placed

Since all 3 cows can be placed with a minimum distance of 2, we try to maximize the distance further by checking for a larger value.

So:

ans = 2
l = mid + 1 = 3

mid = (L + R)/2 = (3 + 3)/2 = 3

0 1 2 3 4 5 6 7 8
      l
      m
      r

Try placing cows with minimum distance = 3

Stalls:  1   2   4   8   9

Place 1st cow at 1
2-1 ≥ 3 Distance Smaller than minimum distance 3. So cannot place cow
4-1 ≥ 3→ place 2nd cow at 4
8-4 ≥ 3 → place 2nd cow at 8

3 cows placed

So:

ans = 3
l = mid + 1 = 4
r = 3

Loop break

Final Answer: 3

So, The minimum distance between cows in this case is 3, which is the largest among all possible ways.

Code :

#include 
using namespace std;

#define int long long

bool possible(int arr[], int mid, int n, int cow){
    int cowCount = 1;
    int prev = arr[0];

    for(int i = 1; i < n; i++){
        if(arr[i] - prev >= mid){
            cowCount++;
            prev = arr[i];
        }
    }

    return cowCount >= cow;
}

signed main() {
    int stall, cow;
    cin >> stall >> cow;

    int arr[stall];
    for(int i = 0; i < stall; i++){
        cin >> arr[i];
    }

    // Step 1: Sort stalls
    sort(arr, arr + stall);

    int l = 0;
    int r = arr[stall - 1] - arr[0];
    int ans = -1;

    // Step 2: Binary Search
    while(l <= r){
        int mid = (l + r) / 2;

        if(possible(arr, mid, stall, cow)){
            ans = mid;       // store answer
            l = mid + 1;     // try for bigger distance
        } else {
            r = mid - 1;     // try smaller distance
        }
    }

    cout << ans << endl;
}

Complexity:

Time Complexity: O(n log n + n log(max distance))
Space Complexity: O(1)

Building a Todo App with Express + PostgreSQL

Shubham Kumar Singh — Thu, 23 Apr 2026 19:05:33 GMT

What We’re Building

Before diving into the code, let’s understand what we are going to build.

In this project, we’ll create a secure Todo Backend API using Express.js and PostgreSQL (via Neon).

Core Features

User Signup (with password hashing)
User Signin (with JWT authentication)
Secure APIs using Middleware
Create Todo (user-specific)
Get Todos (only your own todos)
Prevent SQL Injection attacks

Before We Start…

If you’re completely new to backend development, I’ve already built a similar Todo app using MongoDB:

Building a Todo App using Express.js + MongoDB

That version uses a NoSQL database, while in this blog we’ll use PostgreSQL (SQL).

This will help you understand:

Difference between SQL vs NoSQL
When to use which database

Step 1: Initialize Project

npm init -y

It Creates package.json

Step 2: Installing Dependencies

Since I’m building the backend with Express and PostgreSQL, I installed:

npm install express 
npm install pg

express → For creating the server and APIs
pg → PostgreSQL client for Node.js

Step 3: Setup Express Server

First, I created a basic Express server:

Create file index.js

const express = require("express");
const app = express();

app.use(express.json());

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Step 4: Setting Up PostgreSQL (NeonDB)

Steps I followed:

Signed up on Neon
Created a new project
Got the connection string on Dashboard

Step 4: Connecting Express to PostgreSQL

Now comes the important part — connecting the database to our backend.

I used Pool from the pg library:

Let's created a separate file: model.js

const { Pool } = require('pg');

const pool = new Pool({
  connectionString: "postgresql://neondb_owner:YOUR_PASSWORD@YOUR_HOST/neondb?sslmode=require&channel_binding=require"
});

module.exports = {
    pool: pool
}

This connection string is provided by Neon after creating the project.

Step 5: Designing the Database

For this app, I created two tables using the SQL Editor in Neon:

users → Stores user information
todo → Stores tasks created by users

Users Table

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Todo Table

CREATE TABLE todo (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    user_id INTEGER NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

Understanding the Relationship

This is where things get interesting.

Each todo belongs to a user i.e. You cannot create a todo without a valid user
We use user_id as a foreign key i.e. we useuser_id in todo refers to id in users

What does ON DELETE CASCADE mean?

If a user is deleted → all their todos are automatically deleted from todo table

Why SQL is Strictly Typed

One important thing to notice while designing the database is that PostgreSQL (used via Neon) is a strictly typed database.

This means we must define the type of each column in advance.

For example:

username → VARCHAR(255) (must be text)
user_id → INTEGER (must be a number)
created_at → TIMESTAMP (must be a valid date-time)

Because of this:

You cannot insert random data types into the database.

Step 6: Signup Route

Before writing code, let’s understand the goal.

What we want to achieve:

Allow a new user to register
Store user details in database
Prevent duplicate users
Secure the password

Why Password Hashing is Important

Instead of storing the actual password, we store a hashed version of it.

What is hashing?

Converts a password into a random-looking string
It is a one-way function (cannot be reversed easily)

So even if your database is leaked, attackers cannot see real passwords.

Before using hashing, install the library:

npm install bcrypt

Then import it in your project:

const bcrypt = require("bcrypt");

Signup API Implementation

app.post("/signup", async (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  const hashedPassword = await bcrypt.hash(password, 10);

  const userExist = await pool.query(
    "SELECT * FROM users WHERE username = $1",
    [username],
  );

  if (userExist.rows[0]) {
    return res.status(403).json({
      message: "User with this username already exists",
    });
  }

  const response = await pool.query(
    "INSERT INTO users (username, password) VALUES (\(1, \)2) RETURNING id, username, password",
    [username, hashedPassword],
  );

  res.status(200).json({
    userId: response.rows[0].id,
    message: "Signup Done",
  });
});

Why We Use $1 Instead of Direct Values in SQL ?

You might be tempted to write a query like this:

const query = `SELECT * FROM users WHERE username = '${username}'`;

This may work—but it is dangerous and result to SQL Injection.

What is SQL Injection?

SQL Injection happens when a user sends malicious input that changes your query.

Final Result: Testing /signup API Using Postman

Step 7: Signin + JWT Authentication

After signup, the next step is allowing users to log in and get a token for authentication.

What we want to achieve

Verify user credentials (username + password)
Compare hashed password securely
Generate a token after successful login
Send that token to the client

Install JWT Library

Before using tokens, install:

npm install jsonwebtoken

Import it:

const jwt = require("jsonwebtoken");

Signin API Implementation

app.post("/signin", async (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  const userExist = await pool.query(
    "SELECT * FROM users WHERE username = $1",
    [username],
  );

  if (!userExist.rows[0]) {
    return res.status(404).json({
      message: "User not found",
    });
  }

  const correctPassword = await bcrypt.compare(
    password,
    userExist.rows[0].password,
  );

  if (correctPassword) {
    const token = jwt.sign(
      {
        userId: userExist.rows[0].id,
      },
      "shubham123",
    );

    return res.status(200).json({
      token,
    });
  } else {
    return res.status(403).json({
      message: "Password is invalid",
    });
  }
});

Final Result: Testing /signin API Using Postman

Step 8: Authentication Middleware (Protecting Routes)

Now that we have JWT-based login, we need a way to protect routes so only logged-in users can access them.

For that, we create a middleware.

Let's created a separate file: middleware.js

Auth Middleware Implementation

const jwt = require("jsonwebtoken");
const { pool } = require("./models.js");

async function authMiddleware(req, res, next) {
  try {
    const token = req.headers.token;

    if (!token) {
      return res.status(401).json({
        message: "Token missing",
      });
    }

    const decode = jwt.verify(token, "shubham123");

    const userExist = await pool.query(
      "SELECT * FROM users WHERE id = $1",
      [decode.userId],
    );

    if (!userExist.rows[0]) {
      return res.status(404).json({
        message: "User not found",
      });
    }

    req.userId = decode.userId;
    next();
  } catch (err) {
    return res.status(403).json({
      message: "Invalid or expired token",
    });
  }
}

module.exports = {
  authMiddleware,
};

Step 9: Create Todo

Before writing the code, let’s understand

What are we trying to achieve?

We want:
1. Only logged-in users should be able to create a todo i.e. Each todo should be linked to the specific user who created it

When user tries to create a todo, first authentication happens using authMiddleware.

It verifies the token
Extracts userId
Attaches it to req.userId

Then we use this userId to link the todo with the logged-in user.

So each todo belongs to a specific user, and later we can fetch user-specific todos.

app.post("/todo", authMiddleware, async (req, res) => {
  const title = req.body.title;

  const newTodo = await pool.query(
    "INSERT INTO todo (title,user_id) VALUES (\(1, \)2) RETURNING id", [title, req.userId]);

  res.status(200).json({
    id: newTodo.rows[0].id,
    message: "todo get created",
  });
});

Final Result: Testing POST /todo API Using Postman

Step 10: Get All Todos

app.get("/todo", authMiddleware, async (req, res) => {
  
  const allTodos = await pool.query("SELECT * FROM todo WHERE user_id = $1", [req.userId]);

  res.status(200).json({
    todos: allTodos.rows,
  });
});

Final Result: Testing GET /todo API Using Postman

Complete Source Code

I’ve uploaded the complete project on GitHub. You can check it here:

GitHub Repo:
https://github.com/shubhamsinghbundela/Todo-Application-SQL

Refactoring a Trello Backend into a Scalable REST API Architecture

Shubham Kumar Singh — Tue, 21 Apr 2026 23:10:31 GMT

Till now, the backend was working, but everything was in a single file / unstructured format.

Now the goal is to:

Follow clean folder structure
Make code scalable & maintainable

Before diving into this structured version, I recommend reading my initial implementation where everything was built in a single file: Building a Trello - Backend from Scratch → https://shubhamsinghbundela.hashnode.dev/building-a-trello-backend-from-scratch

Step 1: Initialize Project

npm init -y

It Creates package.json

Step 2: Install Dependencies

npm install express
npm install --save-dev nodemon
npm install dotenv // This package is used to load environment variables from the .env file.

Step 3: Setup App Entry (src/app.js)

Create src/app.js

import express from "express";

const app = express();

app.use(express.json());

export default app;

This file is responsible for:

Initializing express app
Adding global middlewares

Step 4: Environment Variables

Create .env file:

PORT=3000
NODE_ENV=development
MONGODB_URI=your_mongodb_connection_string

Step 5: Server Entry Point (server.js)

create server.js

import "dotenv/config"; //This automatically loads .env variables into process.env
import app from "./src/app.js";

const PORT = process.env.PORT || 3000;

const start = async () => {
    app.listen(PORT, () => {
        console.log(`Server is running at \({PORT} in \){process.env.NODE_ENV} mode`);
    });
};

start().catch((err) => {
    console.error("Failed to start server", err);
    process.exit(1);
});

This file is responsible for:

Starting the server
Handling startup errors

Step 6: Scripts Setup

Update package.json:

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

Use:

npm run dev

Step 7: Setup Database Connection

Create:

src/common/config/db.js

import mongoose from "mongoose";
import dns from "dns";

dns.setServers(["1.1.1.1", "8.8.8.8"]);

const connectDB = async () => {
    const conn = await mongoose.connect(process.env.MONGODB_URI);

    console.log(`MongoDB connected: ${conn.connection.host}`);
};

export default connectDB;

Initially, I tried connecting to MongoDB (cloud) but faced a DNS issue

Problem:

MongoDB connection was failing due to DNS resolution.

Fix:

After watching a YouTube video: , I added this:

const dns = require("dns");
dns.setServers(["1.1.1.1", "8.8.8.8"]);

This fixed the issue and I was able to connect to cloud MongoDB.

Step 8: Standard API Response Structure

Create:

src/common/utils/api-response.js

class ApiResponse {
    static ok(res, message, data = null) {
        return res.status(200).json({
            success: true,
            message,
            data
        });
    }
}

export default ApiResponse;

Why This is Important

Instead of writing:

res.status(200).json({ message: "Success" });

To avoid repeating response logic across multiple APIs, I implemented a reusable utility using the DRY (Don't Repeat Yourself) principle:

ApiResponse.ok(res, "Success", data);

Step 9: Standard API Error Structure

While building APIs, handling errors properly is as important as handling success responses.

1**. Create Custom Error Class**

Create:

src/common/utils/api-error.js

class ApiError extends Error {
    // Inherit from built-in JavaScript Error
    constructor(statusCode, message) {
        super(message);

        this.statusCode = statusCode;

        // Capture clean stack trace
        Error.captureStackTrace(this, this.constructor);
    }

    static badRequest(message = "Bad Request") {
        return new ApiError(400, message);
    }

    static forbidden(message = "Forbidden") {
        return new ApiError(403, message);
    }

    static notFound(message = "Not Found") {
        return new ApiError(404, message);
    }
}

export default ApiError;

Why Extend Error?

JavaScript provides built-in errors like:

Error
TypeError
ReferenceError

But they don’t include HTTP status codes, which are required in APIs.

2. Global Error Middleware

Create:

src/common/middleware/error.middleware.js

import ApiError from "../utils/api-error.js";

const errorHandler = (err, req, res, next) => {

    // Handle known (custom) errors
    if (err instanceof ApiError) {
        return res.status(err.statusCode).json({
            success: false,
            message: err.message
        });
    }

    // Handle unknown errors
    return res.status(500).json({
        success: false,
        message: "Internal Server Error"
    });
};

export default errorHandler;

3. Register Middleware in App

Update src/app.js:

import express from "express";
import authRoute from "./modules/auth/auth.routes.js";
import errorHandler from "./common/middleware/error.middleware.js";

const app = express();
app.use(express.json());

app.use(errorHandler);

export default app;

This must be the last middleware in the app.

Final Error Flow

Request → Route → Controller → Service → throws ApiError → Passes to errorHandler middleware → JSON response

Step 10: Authentication Module (Modular Structure)

Now that we have:

Clean folder structure
Database setup
Standard response & error handling

Next step is to build a modular authentication system

Module Structure

Inside src/modules/auth/, I created:

auth/
├── auth.controller.js
├── auth.middleware.js
├── auth.model.js
├── auth.routes.js
├── auth.service.js

Why This Structure?

Each layer has a clear responsibility:

Model → Database schema
Routes → Define API endpoints
Controller → Handle request/response
Service → Business logic
Middleware → Authentication / validation

This makes code clean, maintainable, and scalable

Create User Schema (auth.model.js)

import mongoose from "mongoose";

const userSchema = new mongoose.Schema({
    username: String,
    password: String
}, { timestamps: true });

const userModel = mongoose.model("users", userSchema);

export default userModel;

timestamps automatically adds:

createdAt
updatedAt

Register Auth Routes in App.js

Update src/app.js:

import express from "express";
import authRoute from "./modules/auth/auth.routes.js";
import errorMiddleware from "./common/middleware/error.middleware.js";

const app = express();

app.use(express.json());

// Register routes
app.use("/api/auth", authRoute);

// Global error handler
app.use(errorMiddleware);

export default app;

All auth APIs will now be available under:

/api/auth/*

Define Routes (auth.routes.js)

import { Router } from "express";
import * as controller from "./auth.controller.js";

const router = Router();

router.post("/signup", controller.signup);

export default router;

Controller Layer (auth.controller.js)

import ApiResponse from "../../common/utils/api-response.js";
import * as authService from "./auth.service.js";

const signup = async (req, res, next) => {
  try {
    const user = await authService.signup(req.body);

    ApiResponse.ok(res, "User get Created", user);
  } catch (error) {
    next(error); // pass error to global error middleware
  }
};

export { signup };

Responsibility of Controller

Calls service layer
Sends response using ApiResponse
Keeps logic minimal

Business Logic (auth.service.js)

import userModel from "./auth.model.js";
import ApiError from "../../common/utils/api-error.js";

const signup = async ({ username, password }) => {

    // Step 1: Check if user already exists
    const userExists = await userModel.findOne({ username });

    if (userExists) {
        throw ApiError.forbidden("User Already Exists");
    }

    // Step 2: Create new user
    const newUser = await userModel.create({
        username,
        password
    });

    return newUser;
};

export {
    signup
};

Final Result: Testing /api/auth/signup API Using Postman

Request Flow

POST /api/auth/signup
  ↓
auth.routes.js
  ↓
auth.controller.js
  ↓
auth.service.js
  ↓
MongoDB

Step 11: Implement Signin

Now that the signup API is ready, the next step is to allow users to login (signin) and generate a token for authentication.

Define Routes

Inside auth.route.js, we define the signin route:

import { Router } from "express";
import * as controller from "./auth.controller.js";

const router = Router();

router.post("/signup", controller.signup);
router.post("/signin", controller.signin);

export default router;

This creates an endpoint:

POST /api/auth/signin

Controller Layer

Now we handle the request in the controller.

const signin = async (req, res, next) => {
  try {
    const token = await authService.signin(req.body);

    ApiResponse.ok(res, "Signin successfully", token);
  } catch (error) {
    next(error);
  }
};

Responsibility of Controller:

Receive request data (req.body)
Call service layer
Send response using ApiResponse
Pass errors to global error handler

Service Layer (Business Logic)

Now the actual authentication logic lives in auth.service.js:

const signin = async ({ username, password }) => {
  const userExists = await userModel.findOne({
    username: username,
    password: password,
  });

  if (!userExists) {
    throw ApiError.notFound("User not found");
  }

  const token = jwt.sign(
    {
      userId: userExists.id,
    },
    "shubham123"
  );

  return token;
};

Final Result: Testing /api/auth/signin API Using Postman

Step 12: Create organisation inside Organisation Module

Now that authentication is complete, the next step is to allow users to create organisations — similar to how Trello works.

Requirements

After login, a user should be able to:

Create an organisation
Automatically become the admin
Ensure organisation names are unique
Only authenticated users can create organisations

Module Structure

Inside src/modules/, create a new folder:

src/modules/org/
├── org.controller.js
├── org.middleware.js
├── org.model.js
├── org.routes.js
├── org.service.js

Create Organisation Schema

Create:

src/modules/org/org.model.js

import mongoose from "mongoose";

const orgSchema = new mongoose.Schema({
    orgName: "String",
    description: "String",
    admin: mongoose.Types.ObjectId,
    member: [mongoose.Types.ObjectId]
}, { timestamps: true });

const orgModel = mongoose.model("organisations", orgSchema);

export default orgModel;

Authentication Middleware

To ensure only logged-in users can create organisations:

Inside:

src/modules/auth/auth.middleware.js

import jwt from "jsonwebtoken";

const authMiddleware = (req, res, next) => {
    const token = req.headers.token;

    const decode = jwt.verify(token, "shubham123");

    req.userId = decode.userId;

    next();
};

export default authMiddleware;

Register Organisation Routes

Update src/app.js:

import orgRoute from "./modules/org/org.routes.js";

app.use("/api/org", orgRoute);

Now all organisation APIs will be available under:

/api/org/*

Define Routes

Create:

src/modules/org/org.routes.js

import { Router } from "express";
import * as controller from "./org.controller.js";
import authMiddleware from "../auth/auth.middleware.js";

const router = Router();

router.post(
  "/create-organisation",
  authMiddleware,
  controller.createOrganisation
);

export default router;

Controller Layer

Create:

src/modules/org/org.controller.js

import ApiResponse from "../../common/utils/api-response.js";
import * as orgService from "./org.service.js";

const createOrganisation = async (req, res, next) => {
  try {
    const org = await orgService.createOrganisation(req);

    ApiResponse.ok(
      res,
      "Org get created",
      org
    );

  } catch (error) {
    next(error);
  }
};

export { createOrganisation };

Responsibility of Controller

Calls service layer
Sends success response
Passes errors to global middleware

Business Logic (Service Layer)

Create:

src/modules/org/org.service.js

import ApiError from "../../common/utils/api-error.js";
import orgModel from "./org.model.js";

const createOrganisation = async (req) => {

    // Step 1: Check if organisation already exists
    const orgExist = await orgModel.findOne({
        orgName: req.body.orgName
    });

    if (orgExist) {
        throw ApiError.forbidden("Organisation already exists");
    }

    // Step 2: Create organisation
    const newOrg = await orgModel.create({
        orgName: req.body.orgName,
        description: req.body.description,
        admin: req.userId,
        member: []
    });

    return newOrg;
};

export { createOrganisation };

Request Flow

POST /api/org/create-organisation
   ↓
auth.middleware.js (verify token)
   ↓
org.controller.js
   ↓
org.service.js
   ↓
MongoDB
   ↓
Response

Final Result: Testing api/org/create-organisation API Using Postman

Step 13: Add Members to Organisation

Now that organisations are created, the next step is to allow admins to add members — similar to how teams work in Trello.

Requirement

Admin can add users to their organisation
Users are added using their username
Only existing users can be added
Prevent adding the same user twice

Update Routes

Update:

src/modules/org/org.routes.js

import { Router } from "express";
import * as controller from "./org.controller.js";
import authMiddleware from "../auth/auth.middleware.js";

const router = Router();

router.post("/create-organisation", authMiddleware, controller.createOrganisation);

router.post("/add-member", authMiddleware, controller.addMember);

export default router;

Controller Layer

Update:

src/modules/org/org.controller.js

const addMember = async (req, res, next) => {
  try {
    const data = await orgService.addMember(req);

    ApiResponse.ok(
      res,
      "Member get added",
      data
    );

  } catch (error) {
    next(error);
  }
};

export {
  addMember
};

Responsibility

Calls service layer
Sends response
Passes errors to middleware

Business Logic (Service Layer)

Update:

src/modules/org/org.service.js

import ApiError from "../../common/utils/api-error.js";
import orgModel from "./org.model.js";
import userModel from "../auth/auth.model.js";

const addMember = async (req) => {

    const newMember = req.body.member;

    // Step 1: Check user exists
    const newMemberUser = await userModel.findOne({
        username: newMember
    });

    if (!newMemberUser) {
        throw ApiError.notFound("User not exist");
    }

    // Step 2: Find organisation (admin only)
    const orgDetails = await orgModel.findOne({
        admin: req.userId
    });

    if (!orgDetails) {
        throw ApiError.notFound("Organisation not exists");
    }

    // Step 3: Prevent duplicate members
    const memberExists = orgDetails.member.includes(newMemberUser._id);

    if (memberExists) {
        throw ApiError.badRequest("Member already exists in organisation");
    }

    // Step 4: Add member
    orgDetails.member.push(newMemberUser._id);

    await orgDetails.save();

    return orgDetails;
};

export {
    addMember
};

Request Flow

POST /api/org/add-member
  ↓
auth.middleware.js (verify token)
  ↓
org.controller.js
  ↓
org.service.js
  ↓
MongoDB
  ↓
Response

Final Result: Testing api/org/add-member API Using Postman

Step 14: Remove Member from Organisation

After adding members, the next important feature is allowing admins to remove members — similar to how team management works in Trello.

Requirement

Admins should be able to:

Remove users from the organisation
Only remove existing members
Only admin can perform this action

Update Routes

Update:

src/modules/org/org.routes.js

import { Router } from "express";
import * as controller from "./org.controller.js";
import authMiddleware from "../auth/auth.middleware.js";

const router = Router();

router.post("/create-organisation", authMiddleware, controller.createOrganisation);

router.post("/add-member", authMiddleware, controller.addMember);

router.delete("/delete-member", authMiddleware, controller.deleteMember);

export default router;

Controller Layer

Update:

src/modules/org/org.controller.js

const deleteMember = async (req, res, next) => {
  try {
    const data = await orgService.deleteMember(req);

    ApiResponse.ok(
      res,
      "Member get deleted",
      data
    );

  } catch (error) {
    next(error);
  }
};

export {
  deleteMember
};

Business Logic (Service Layer)

Update:

src/modules/org/org.service.js

import ApiError from "../../common/utils/api-error.js";
import orgModel from "./org.model.js";
import userModel from "../auth/auth.model.js";

const deleteMember = async (req) => {

    const deleteUser = req.body.username;

    // Step 1: Check user exists
    const deleteUserData = await userModel.findOne({
        username: deleteUser
    });

    if (!deleteUserData) {
        throw ApiError.notFound("User not exist");
    }

    // Step 2: Find organisation (admin only)
    const orgDetails = await orgModel.findOne({
        admin: req.userId
    });

    if (!orgDetails) {
        throw ApiError.notFound("Organisation not exists");
    }

    // Step 3: Check if user is actually a member
    const isMember = orgDetails.member.some(
        id => id.toString() === deleteUserData._id.toString()
    );

    if (!isMember) {
        throw ApiError.badRequest("User is not a member of this organisation");
    }

    // Step 4: Remove member
    orgDetails.member = orgDetails.member.filter(
        id => id.toString() !== deleteUserData._id.toString()
    );

    await orgDetails.save();

    return orgDetails;
};

export {
    deleteMember
};

Request Flow

DELETE /api/org/delete-member
   ↓
auth.middleware.js (verify token)
  ↓
org.controller.js
  ↓
org.service.js
  ↓
MongoDB
  ↓
Response

Final Result: Testing api/org/delete-member API Using Postman

Step 15: Create Board

Now comes the most important feature — boards — just like in Trello.

Requirement

Each organisation can have multiple boards
Only authorized users (admin) can create boards
Each board belongs to a specific organisation

Module Structure

Inside src/modules/, create:

board/
├── board.controller.js
├── board.middleware.js
├── board.model.js
├── board.routes.js
├── board.service.js

Create Board Schema

Create:

src/modules/board/board.model.js

import mongoose from "mongoose";

const boardSchema = mongoose.Schema({
    boardName: "String",
    organisationId: mongoose.Types.ObjectId
});

const boardModel = mongoose.model("boards", boardSchema);

export default boardModel;

Define Routes

Create:

src/modules/board/board.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from "./board.controller.js";

const router = Router();

router.post("/create-board", authMiddleware, controller.createBoard);

export default router;

Register Route in App

Update src/app.js:

import boardRoute from "./modules/board/board.routes.js";

app.use("/api/board", boardRoute);

Controller Layer

Create:

src/modules/board/board.controller.js

import ApiResponse from "../../common/utils/api-response.js";
import * as boardService from "./board.service.js";

const createBoard = async (req, res, next) => {
  try {
    const data = await boardService.createBoard(req);

    ApiResponse.ok(
      res,
      "Board get created",
      data
    );

  } catch (error) {
    next(error);
  }
};

export {
  createBoard
};

Business Logic (Service Layer)

Create:

src/modules/board/board.service.js

import ApiError from "../../common/utils/api-error.js";
import orgModel from "../org/org.model.js";
import boardModel from "./board.model.js";

const createBoard = async (req) => {

    const boardName = req.body.boardName;

    // Step 1: Check organisation (admin only)
    const orgDetails = await orgModel.findOne({
        admin: req.userId
    });

    if (!orgDetails) {
        throw ApiError.notFound("Organisation not exists");
    }

    // Step 2: Create board
    const newBoard = await boardModel.create({
        boardName,
        organisationId: orgDetails._id
    });

    return newBoard;
};

export {
    createBoard
};

Request Flow

POST /api/board/create-board
  ↓
auth.middleware.js (verify token)
  ↓
board.controller.js
  ↓
board.service.js
  ↓
MongoDB
  ↓
Response

Final Result: Testing api/board/create-board API Using Postman

Step 16: Task Management (Create Task)

Now comes the most important part of any Trello-like application — Tasks.

This is where users actually track their work.

Requirement

We want users to:

Create tasks inside a board
Update task status (Todo → In Progress → Done) (next step)
Delete tasks (next step)
Ensure tasks are tied to the logged-in user

This forms the core task lifecycle system

Module Structure

Inside src/modules/, create:

task/
├── task.controller.js
├── task.middleware.js
├── task.model.js
├── task.routes.js
├── task.service.js

Task Schema

Create:

src/modules/task/task.model.js

import mongoose from "mongoose";

const taskSchema = mongoose.Schema({
    description: "String",
    status: "String",
    boardId: mongoose.Types.ObjectId,
    userId: mongoose.Types.ObjectId,
});

const taskModel = mongoose.model("tasks", taskSchema);

export default taskModel;

Define Routes

Create:

src/modules/task/task.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from "./task.controller.js";

const router = Router();

router.post("/create-task", authMiddleware, controller.createTask);

export default router;

Register Route in App

Update src/app.js:

import taskRouter from "./modules/task/task.routes.js";

app.use("/api/task", taskRouter);

Controller Layer

Create:

src/modules/task/task.controller.js

import ApiResponse from "../../common/utils/api-response.js";
import * as taskService from "./task.service.js";

const createTask = async (req, res, next) => {
  try {
    const data = await taskService.createTask(req);

    ApiResponse.ok(
      res,
      "Task created successfully",
      data
    );

  } catch (error) {
    next(error);
  }
};

export {
  createTask
};

Business Logic (Service Layer)

Create:

src/modules/task/task.service.js

import ApiError from "../../common/utils/api-error.js";
import boardModel from "../board/board.model.js";
import taskModel from "./task.model.js";

const createTask = async (req) => {

    const { description, status, boardId } = req.body;

    // Step 1: Validate input
    if (!description || !status || !boardId) {
        throw ApiError.badRequest("All fields are required");
    }

    // Step 2: Validate status
    const allowedStatus = ["Todo", "In Progress", "Done"];

    if (!allowedStatus.includes(status)) {
        throw ApiError.badRequest("Invalid status");
    }

    // Step 3: Check board exists
    const board = await boardModel.findById(boardId);

    if (!board) {
        throw ApiError.notFound("Board not found");
    }

    // Step 4: Prevent duplicate task in same board
    const taskExists = await taskModel.findOne({
        userId: req.userId,
        description,
        boardId
    });

    if (taskExists) {
        throw ApiError.forbidden("Task already exists in this board");
    }

    // Step 5: Create task
    const newTask = await taskModel.create({
        userId: req.userId,
        description,
        status,
        boardId
    });

    return newTask;
};

export {
    createTask
};

Request Flow

POST /api/task/create-task
        ↓
auth.middleware.js (verify token)
        ↓
task.controller.js
        ↓
task.service.js
        ↓
MongoDB
        ↓
Response

Final Result: Testing api/task/create-task API Using Postman

Step 17: Update Task Status

Now that tasks can be created, the next step is to update their status — this is what enables the classic workflow of moving tasks across stages (Todo → In Progress → Done), just like in Trello.

Requirement

When updating a task:

Identify the task using taskId
Validate the new status
Ensure the task belongs to the logged-in user
Update the status

Define Route

Update:

src/modules/task/task.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from "./task.controller.js";

const router = Router();

router.post("/create-task", authMiddleware, controller.createTask);

router.put("/update-task", authMiddleware, controller.updateTask);

export default router;

Controller Layer

Update:

src/modules/task/task.controller.js

const updateTask = async (req, res, next) => {
  try {
    const data = await taskService.updateTask(req);

    ApiResponse.ok(
      res,
      "Task updated successfully",
      data
    );

  } catch (error) {
    next(error);
  }
};

export {
  updateTask
};

Business Logic (Service Layer)

Update:

src/modules/task/task.service.js

import ApiError from "../../common/utils/api-error.js";
import taskModel from "./task.model.js";

const updateTask = async (req) => {

    const { taskId, status } = req.body;

    // Step 1: Validate status
    const allowedStatus = ["Todo", "In Progress", "Done"];

    if (!allowedStatus.includes(status)) {
        throw ApiError.badRequest("Invalid status");
    }

    // Step 2: Find task (only owner can update)
    const task = await taskModel.findOne({
        _id: taskId,
        userId: req.userId
    });

    if (!task) {
        throw ApiError.notFound("Task not found");
    }

    // Step 3: Update status
    task.status = status;

    await task.save();

    return task;
};

export {
    updateTask
};

Request Flow

PUT /api/task/update-task
        ↓
auth.middleware.js (verify token)
        ↓
task.controller.js
        ↓
task.service.js
        ↓
MongoDB
        ↓
Response

Final Result: Testing api/task/update-task API Using Postman

Step 18: Delete Task

Now that tasks can be created and updated, the final step in the task lifecycle is deleting tasks — just like removing completed work in Trello.

Requirement

When deleting a task:

Identify the task using taskId
Ensure the task belongs to the logged-in user
If it exists → delete it from the database

Define Route

Update:

src/modules/task/task.routes.js

import { Router } from "express";
import authMiddleware from "../auth/auth.middleware.js";
import * as controller from "./task.controller.js";

const router = Router();

router.post("/create-task", authMiddleware, controller.createTask);
router.put("/update-task", authMiddleware, controller.updateTask);
router.delete("/delete-task", authMiddleware, controller.deleteTask);

export default router;

Controller Layer

Update:

src/modules/task/task.controller.js

const deleteTask = async (req, res, next) => {
  try {
    const data = await taskService.deleteTask(req);

    ApiResponse.ok(
      res,
      "Task deleted successfully",
      data
    );

  } catch (error) {
    next(error);
  }
};

export {
  deleteTask
};

Business Logic (Service Layer)

Update:

src/modules/task/task.service.js

import ApiError from "../../common/utils/api-error.js";
import taskModel from "./task.model.js";

const deleteTask = async (req) => {

    const { taskId } = req.body;

    // Step 1: Find task (only owner can delete)
    const task = await taskModel.findOne({
        _id: taskId,
        userId: req.userId
    });

    if (!task) {
        throw ApiError.notFound("Task not found");
    }

    // Step 2: Delete task
    await taskModel.deleteOne({ _id: taskId });

    return task;
};

export {
    deleteTask
};

Request Flow

DELETE /api/task/delete-task
        ↓
auth.middleware.js (verify token)
        ↓
task.controller.js
        ↓
task.service.js
        ↓
MongoDB
        ↓
Response

What Changed from Previous Approach?

Before:

All logic in one file
Hard to scale

Now:

Clean modular structure
Separation of concerns
Reusable logic
Easy to maintain

Complete Source Code

I’ve uploaded the complete project on GitHub. You can check it here:

GitHub Repo:
https://github.com/shubhamsinghbundela/Rest-API-Trello

Understanding Promise.any() (with Custom Implementation)

Shubham Kumar Singh — Thu, 16 Apr 2026 19:21:48 GMT

What is Promise.any()?

Promise.any() is used to run multiple promises in parallel and return the first successfully resolved promise.

Behavior:

If any one promise resolves, it immediately returns a resolved promise with that value.
If all promises reject, it returns a rejected promise with an AggregateError containing all errors.

Example

const p1 = Promise.reject("Error 1");
const p2 = Promise.resolve(20);
const p3 = Promise.resolve(30);

Promise.any([p1, p2, p3])
  .then(result => {
    console.log(result); // 20
  })
  .catch(err => {
    console.error(err);
  });

Rejection Case

const p1 = Promise.reject("Error 1");
const p2 = Promise.reject("Error 2");

Promise.any([p1, p2])
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.error(err); 
    // AggregateError: All promises were rejected
    // err.errors => ["Error 1", "Error 2"]
  });

Key Concept

Promise.any() follows success-first behavior — one success is enough.

Custom Implementation of Promise.any()

Let’s now understand how Promise.any() works internally by implementing it ourselves.

Code :

function promiseAny(promises) {
    return new Promise((resolve, reject) => {
        let errors = [];
        let rejectedCount = 0;

        if (promises.length === 0) {
            reject(new Error("Empty iterable"));
        }

        promises.forEach((element, index) => {
            Promise.resolve(element)
                .then((data) => {
                    resolve(data); // first success wins
                })
                .catch((err) => {
                    errors[index] = err;
                    rejectedCount++;

                    if (rejectedCount === promises.length) {
                        reject(new AggregateError(errors, "All promises were rejected"));
                    }
                });
        });
    });
}

🔗Before You Go Further

If you haven’t read about Promise.all(), check it out here:

Understanding Promise.all (with Custom Implementation)
https://shubhamsinghbundela.hashnode.dev/understanding-promise-all-with-custom-implementation

Building a Trello - Backend from Scratch

Shubham Kumar Singh — Thu, 16 Apr 2026 09:35:03 GMT

Core Features

Authentication System (Sign Up / Sign In)
Every user starts here:
- Users can sign up with credentials
- Users can log in securely
- Authentication is handled via tokens (JWT)
This ensures every action is tied to an authenticated user.
First-Time Onboarding (Organization Creation)

After logging in for the first time:
- User can create an organization
- Organization includes:
  - Name of organisation
  - Description
This makes the user the admin of that organization
Multi-User Organization System

Admins can:
- add users to the organization based on username
- Manage members
- Users can:
  Be part of multiple organizations
Dashboard View
Once logged in:
- The user first sees a list of all organizations they are part of.
- Inside the selected organization, the user can see all boards related to that specific organization
If a user is part of 2 organizations → they will see select organisation
Board-Level Task Management
When user click any board inside a board, users can:
- Create tasks
- Move tasks across stages:
  - Todo
  - In Progress
  - Done
Task Lifecycle

Each task follows a simple lifecycle:
1. Created in Todo
2. Moved to In Progress
3. Completed in Done
4. Option to delete/remove task

Step 1: Setup Express Server

First, I created a basic Express server:

const express = require("express");
const app = express();

app.use(express.json());

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Step 2: Setup MongoDB

Go to https://cloud.mongodb.com/
Create account & login
Create a Cluster
Go to Database Access
- Create username & password
Go to Network Access
- Add IP: 0.0.0.0/0 (for development)
Click Connect
Copy connection string

Example:

mongodb+srv://username:password@cluster.mongodb.net/dbname

MongoDB Connection Code

Before connecting MongoDB, first we need to install mongoose.

Step 1: Install Mongoose

Run this command in your project:

npm install mongoose

Step 2: Connect to MongoDB

Now write the connection code:

const mongoose = require("mongoose");

async function connectDB() {
    try {
        await mongoose.connect("mongodb+srv://:@todo.dtrpx.mongodb.net/todo");
        console.log("MongoDB connected");
    } catch (err) {
        console.error("Connection error:", err);
    }
}

connectDB();

Initially, I tried connecting to MongoDB (cloud) but faced a DNS issue

Problem:

MongoDB connection was failing due to DNS resolution.

Fix:

After watching a YouTube video: , I added this:

const dns = require("dns");
dns.setServers(["1.1.1.1", "8.8.8.8"]);

This fixed the issue and I was able to connect to cloud MongoDB.

Step 3: Create Schema using Mongoose

Before writing any backend or frontend logic, I first designed how my data should look.

This step is very important.

Learning:
Always define your schema first before building APIs or UI.

Because:

It gives clarity on what data you need
Helps structure your database properly
Makes backend logic easier to write

const userSchema = new mongoose.Schema({
    username: 'String',
    password: "String"
})

const orgSchema = new mongoose.Schema({
    orgName: "String",
    description: "String",
    admin: mongoose.Types.ObjectId, 
    member: [mongoose.Types.ObjectId]
})

const boardSchema = new mongoose.Schema({
    boardName: "String",
    organisationId: mongoose.Types.ObjectId
})
const taskSchema = new mongoose.Schema({
    description: String,
    status: String, // Todo | In Progress | Done
    userId: mongoose.Types.ObjectId,
    boardId: mongoose.Types.ObjectId
})

const userModel = mongoose.model("users", userSchema);
const orgModel = mongoose.model("organisations", orgSchema);
const boardModel = mongoose.model("boards", boardSchema);
const taskModel = mongoose.model("tasks", taskSchema);

module.exports = {
    userModel,
    orgModel,
    boardModel
}

Step 4: Signup Route

Before writing code, let’s understand the goal.

What we want to achieve:

Allow a new user to register
Store user details in database
Prevent duplicate users

app.post('/signup', async (req,res)=>{
    const username = req.body.username;
    const password = req.body.password;

    const userExists = await userModel.findOne({
        username: username
    })

    if(userExists){
        return res.status(403).json({
            message: "User already exists"
        })
    }

    const newUser = await userModel.create({
        username: username,
        password: password
    })

    res.status(200).json({
        id: newUser._id,
        message: "user get created"
    })
})

Step 5: Signin + JWT Token

Before writing code, let’s understand the goal.

What we want to achieve:

Verify user credentials
If valid → allow login
Generate a JWT token for authentication

app.post("/signin", async (req, res) => {
  const { userName, password } = req.body;

  const userExist = await userModel.findOne({ userName });

  if (!userExist) {
    return res.status(404).json({
      message: "User not found",
    });
  }

  const token = jwt.sign(
    { userId: userExist.id },
    "shubham123"
  );

  res.json({ token });
});

Step 6: Auth Middleware

This ensures only logged-in users can access routes.

function authMiddleware(req, res, next) {
    const token = req.headers.token;

    if (!token) {
        return res.status(401).json({
            message: "Token not provided"
        });
    }

    try {
        const decode = jwt.verify(token, "shubham123");
        req.userId = decode.userId;
        next();
    } catch (err) {
        return res.status(401).json({
            message: "Invalid or expired token"
        });
    }
}

Step 7: Create Organisation

Requirement

Now that authentication is done, we need to allow users to:

Create an organization after login
Automatically assign the creator as admin
Ensure organization names are unique

Only authenticated users should be able to create organizations.

Implementation

app.post("/create-organisation", authMiddleware, async (req,res)=>{
    const orgName = req.body.orgName;
    const description = req.body.description;

    const orgExist = await orgModel.findOne({
        orgName: orgName
    })

    if(orgExist){
        return res.status(403).json({
            message: "Organisation already exists"
        })
    }

    const newOrg = await orgModel.create({
        orgName: orgName,
        description: description,
        admin: req.userId,
        member: []
    })
    
    res.status(200).json({
        orgId: newOrg.id
    })
})

Step 8: Add Member to Organization

Requirement

Now that organizations are created, the next step is:

Allow admin to add users to their organization
Users are added using their username
Only existing users can be added
Prevent adding the same user twice

Implementation

app.post('/add-member-to-organisation', authMiddleware, async (req,res)=>{
    const newMember = req.body.member;

    const newMemberUser = await userModel.findOne({
        username: newMember
    })

    if(!newMemberUser){
        return res.status(404).json({
            message: "User does not exist"
        })
    }

    const orgDetails = await orgModel.findOne({
        admin: req.userId
    })

    if(!orgDetails){
        return res.status(404).json({
            message: "Organization not found"
        })
    }

    const memberExists = orgDetails.member.includes(newMemberUser._id);

    if(memberExists){
        return res.status(400).json({
            message: "Member already exists in organization"
        })
    }

    orgDetails.member.push(newMemberUser._id);

    await orgDetails.save()

    res.status(200).json({
        message: "Member added successfully"
    })
})

Step 9: Delete Member from Organization

Requirement

Admins should also be able to:

Remove users from the organization

Implementation

app.delete('/delete-member-from-organisation', authMiddleware, async (req, res)=>{
    const deleteUser = req.body.username;

    const deleteUserData = await userModel.findOne({
        username: deleteUser
    })

    if(!deleteUserData){
        return res.status(404).json({
            message: "User does not exist"
        })
    }

    const orgDetails = await orgModel.findOne({
        admin: req.userId
    })

    if(!orgDetails){
        return res.status(404).json({
            message: "Organization not found"
        })
    }

    orgDetails.member = orgDetails.member.filter(
        e => e.toString() !== deleteUserData._id.toString()
    );

    await orgDetails.save()

    res.status(200).json({
        message: "Member removed successfully"
    })
})

Step 10: Create Board

Requirement

Now comes the core feature of Trello:

Each organization should have boards
Only authorized users (admin) can create boards
Each board belongs to a specific organization

Implementation

app.post("/create-board", authMiddleware, async (req,res)=>{
    const boardName = req.body.boardName;

    const orgDetails = await orgModel.findOne({
        admin: req.userId
    });

    if(!orgDetails){
        return res.status(404).json({
            message: "Organization not found"
        })
    }

    const newBoard = await boardModel.create({
        boardName,
        organisationId: orgDetails._id
    })

    res.status(200).json({
        boardId: newBoard._id,
        message: "Board created successfully"
    })
})

Step 11: Task Management (Create, Update, Delete)

Now comes the most important part of any Trello-like application — Tasks.

This is where users actually track their work.

Requirement:

We want to allow users to:

Create tasks inside a board
Update task status (Todo → In Progress → Done)
Delete tasks when completed or no longer needed
Ensure tasks are tied to the logged-in user

This forms the core task lifecycle system

Create Task

Logic :

When a user creates a task:

Take description, status, and boardId
Validate:
- Board exists
- Status is valid
Check duplicate inside same board
Create task linked to board

Implementation

app.post("/create-task", authMiddleware, async (req, res) => {
    const { description, status, boardId } = req.body;
 
    if (!description || !status || !boardId) {
        return res.status(400).json({
            message: "All fields are required"
        });
    }

    const allowedStatus = ["Todo", "In Progress", "Done"];
    if (!allowedStatus.includes(status)) {
        return res.status(400).json({
            message: "Invalid status"
        });
    }
 
    const board = await boardModel.findById(boardId);
    if (!board) {
        return res.status(404).json({
            message: "Board not found"
        });
    }

    const taskExists = await taskModel.findOne({
        userId: req.userId,
        description,
        boardId
    });

    if (taskExists) {
        return res.status(403).json({
            message: "Task already exists in this board"
        });
    }

    const newTask = await taskModel.create({
        userId: req.userId,
        description,
        status,
        boardId
    });

    res.status(200).json({
        message: "Task created successfully",
        taskId: newTask._id
    });
});

Update Task

Logic :

When updating a task:

Identify task using:

taskId

If task exists:
- Update status
- Save changes

This enables moving tasks across stages

Implementation

app.put("/update-task", authMiddleware, async (req, res) => {
    const { taskId, status } = req.body;

    const allowedStatus = ["Todo", "In Progress", "Done"];
    if (!allowedStatus.includes(status)) {
        return res.status(400).json({
            message: "Invalid status"
        });
    }

    const task = await taskModel.findOne({
        _id: taskId,
        userId: req.userId
    });

    if (!task) {
        return res.status(404).json({
            message: "Task not found"
        });
    }

    task.status = status;
    await task.save();

    res.status(200).json({
        message: "Task updated successfully"
    });
});

Delete Task

Logic :

When deleting a task:

Find task using:
- taskId
If exists → delete it from database

Implementation

app.delete("/delete-task", authMiddleware, async (req, res) => {
    const { taskId } = req.body;

    const task = await taskModel.findOne({
        _id: taskId,
        userId: req.userId
    });

    if (!task) {
        return res.status(404).json({
            message: "Task not found"
        });
    }

    await taskModel.deleteOne({ _id: taskId });

    res.status(200).json({
        message: "Task deleted successfully"
    });
});

Final Thoughts

If you're learning backend development, I highly recommend building something like this — it teaches you far more than just theory.

Complete Source Code

I’ve uploaded the complete project on GitHub. You can check it here:

GitHub Repo:
https://github.com/shubhamsinghbundela/Trello

Understanding Promise.all (with Custom Implementation)

Shubham Kumar Singh — Tue, 14 Apr 2026 22:23:48 GMT

What is `Promise.all()`?

Promise.all() is used to run multiple promises in parallel and wait until all of them complete.

Behavior:

If all promises resolve, it returns a resolved promise with an array of results.
If any one promise rejects, it immediately returns a rejected promise with that error.
It fails fast — meaning it doesn’t wait for other promises once one fails.

Example

const p1 = Promise.resolve(10);
const p2 = Promise.resolve(20);
const p3 = Promise.resolve(30);

Promise.all([p1, p2, p3])
  .then(result => {
    console.log(result); // [10, 20, 30]
  })
  .catch(err => {
    console.error(err);
  });

Rejection Case

const p1 = Promise.resolve(10);
const p2 = Promise.reject("Error in p2");
const p3 = Promise.resolve(30);

Promise.all([p1, p2, p3])
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.error(err); // "Error in p2"
  });

Key Concept

Promise.all() follows fail-fast behavior — one failure stops everything.

Custom Implementation of `Promise.all()`

Let’s now understand how Promise.all() works internally by implementing it ourselves.

Code

function promiseAll(promises) {
    return new Promise((resolve, reject) => {
        let arr = [];
        let completed = 0;

        if (promises.length === 0) {
            resolve([]);
        }

        promises.forEach((element, index) => {
            Promise.resolve(element)
                .then((data) => {
                    arr[index] = data;
                    completed++;

                    if (completed === promises.length) {
                        resolve(arr);
                    }
                })
                .catch(reject);
        });
    });
}

Binary Seach

Shubham Kumar Singh — Mon, 13 Apr 2026 13:26:10 GMT

Imagine you’re searching for a word in a dictionary.
You don’t start from page 1, right?
You open somewhere in the middle.

If your word comes before → go left
If it comes after → go right

This is exactly how Binary Search works.

Core Idea of Binary Search

Instead of checking every element (like linear search), we:

Pick the middle element
Compare with target
Eliminate half of the search space

Basic Binary Search Formula

mid = (Left + right) / 2

Decision Making

Once we calculate mid, we compare:

If arr[mid] == target
→ Target found
If arr[mid] > target
→ Target lies on the left side
→ Move:
```
right = mid - 1;
```
If arr[mid] < target

→ Target lies on the right side

→ Move:
```
left = mid + 1;
```

Problem Statement:

Given a sorted array of size n and an integer target, determine whether the target exists in the array.

If the target is present, return its index (0-based).
If the target is not present, return -1.

Step-by-Step Dry Run

Let’s say you have an array:

[3, 5, 2, 1, 4]
 0  1  2  3  4

First rule:

Binary Search only works on a sorted array

So we sort it:

[1, 2, 3, 4, 5]
 0  1  2  3  4

Now Search Target = 4

Step 1:

[1, 2, 3, 4, 5]
 0  1  2  3  4
 l     m     r

mid = 2 → value = 3
4 > 3 → ignore left half
Move right: l = 3

Step 2:

[1, 2, 3, 4, 5]
 0  1  2  3  4
          m  r
          l

mid = 3 → value = 4
Found!

Code

int l = 0, r = n - 1;

while (l <= r) {
    int mid = (l + r) / 2;

    if (arr[mid] == target) {
        return mid; // found
    } else if (arr[mid] < target) {
        l = mid + 1;
    } else {
        r = mid - 1;
    }
}

return -1; // not found

Complexity

Time Complexity: O(log n)
Space Complexity: O(1)

Where This Pattern is Used

This is where things get interesting 👇

The same binary search logic helps solve multiple problems:

First & Last Occurrence
Frequency of an Element
Count of Elements Greater Than X
Count of Elements Between X and Y

Once you understand pointer movement, all these problems become easy.

How Everything is an Object in JavaScript (Prototype Explained)

Shubham Kumar Singh — Fri, 10 Apr 2026 22:00:01 GMT

If you’ve been learning JavaScript, you’ve probably heard:

“Everything in JavaScript is an object”

1. The Real Core Concept: Prototype Chain

Let’s start with a simple example:

const user1 = {
    name: 'Shubham',
}

const user2 = {
    __proto__: user1
}

console.log(user2) // {}
console.log(user2.name) // 'Shubham'

What’s happening behind the scenes?

user2
  ↓ (__proto__)
user1
  ↓ (__proto__)
Object.prototype
  ↓
null

Flow when accessing user2.name

Step 1: Check user2 → not found
Step 2: Go to user1 → found ("shubham")
Step 3: Stop

This is called Prototype Chain

Key Insight

Objects in JavaScript don’t inherit by copying—they inherit by linking i.e. objects are linked using the prototype (__proto__). When a property is accessed on an object, JavaScript first looks for it in the object itself. If not found, it automatically looks up the prototype chain until it finds the property or reaches null.

2. Arrays Are Also Objects

let arr = [1, 2, 3];
arr.push(4);

Looks like a special data structure, right?

But internally

arr (Array instance)
  ↓ (__proto__)
Array.prototype
  ↓ (__proto__)
Object.prototype
  ↓
null

What this means:

arr.push() → comes from Array.prototype
arr.toString() → comes from Object.prototype

So arrays is also an objects.

3. Strings: The Interesting Case

let name = "shubham";
console.log(name.toUpperCase());

But string is primitive… right?

YES

But JS does auto-boxing

What actually happens behind the scenes:

"shubham" (primitive)
   ↓ (auto-boxing)
new String("shubham")
   ↓
String.prototype
   ↓
Object.prototype
   ↓
  null

Step 1: "shubham".toUpperCase()
Step 2: JS converts → String object
Step 3: Finds method in String.prototype

Key Insight

Primitives are not objects, but JavaScript makes them behave like objects when needed.

4. Function Example

function test() {}

test.myName = "shubham"; //Only objects can store key-value pairs → so test is an object

console.log(test.myName); // shubham 

console.log(test.call);   // function
console.log(test.apply);  // function
console.log(test.bind);   // function

console.log(test.__proto__ === Function.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true

test (function object)
  ↓ (__proto__)
Function.prototype
  ↓ (__proto__)
Object.prototype
  ↓
null

Final Conclusion

Objects use prototype chaining
Arrays & functions are objects
Primitives can behave like objects via auto-boxing

JavaScript is not class-based, it is prototype-based because objects inherit properties and methods from other objects through the prototype chain.

Promise.resolve vs new Promise: When Should You Use What?

Shubham Kumar Singh — Fri, 10 Apr 2026 21:00:19 GMT

Most developers get stuck comparing Promise.resolve and new Promise, trying to understand the difference.

Why This Confusion Happens

In simple cases, both approaches behave the same:

Promise.resolve("Hello");

new Promise((resolve) => resolve("Hello"));

Both return a resolved Promise
Both can be used with .then() or await

Rule of Thumb

Use Promise.resolve when you already have the result
Use new Promise when you need to create async behavior

That’s it. Now let’s expand with real examples.

When to Use `Promise.resolve`

1. When You Already Have a Value

function getData() {
  return Promise.resolve(42);
}

You’re not doing anything async
Just wrapping a value in a Promise

When to Use `new Promise`

1. When You Need Async Control (Most Important)

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

You decide when to resolve

Quick Comparison (Use Case Based)

Situation	What to Use
Already have value	`Promise.resolve`
Just wrapping result	`Promise.resolve`
Need delay / timer	`new Promise`
API / callback conversion	`new Promise`
Need manual resolve/reject	`new Promise`

Cyclic Sort

Shubham Kumar Singh — Thu, 09 Apr 2026 10:51:11 GMT

Problem Idea

You are given an array of size n containing numbers from 1 to n.

Your task:
Place every number at its correct index

Core Idea (Think Like This)

“If the current number is not at its correct position, swap it.”

“Keep doing this until every element is placed correctly.”

Step-by-Step Dry Run

Input:

[3, 5, 2, 1, 4]

Step 0: First Think

Value → Index
1 → 0
2 → 1
3 → 2
4 → 3
5 → 4

Formula:

correct index = value - 1

Start from index 0

[3, 5, 2, 1, 4]
 0  1  2  3  4
 ↑
 i

Current value is 3

correct index of 3 = 2

First Swap

swap(arr[0], arr[2])

[2, 5, 3, 1, 4]
 0  1  2  3  4
 ↑
 i

Again Check

arr[i] = 2
correct index of 2 = 1

Second Swap

swap(arr[0], arr[1])

[5, 2, 3, 1, 4]
 0  1  2  3  4
 ↑
 i

Again Check

arr[i] = 5
correct index of 5 = 4

Third Swap

swap(arr[0], arr[4])

[4, 2, 3, 1, 5]
 0  1  2  3  4
 ↑
 i

Again Check

arr[i] = 4
correct index of 4 = 3

Third Swap

swap(arr[0], arr[3])

[1, 2, 3, 4, 5]
 0  1  2  3  4
 ↑
 i

Now Check

arr[i] = 1
correct index of 1 = 0

Correct position

Now move forward:

i++

Continue

[1, 2, 3, 4, 5]
    ↑
    i = 1

2 is correct → move

3 is correct → move

4 is correct → move

5 is correct → move

Final Answer

[1, 2, 3, 4, 5]

What Just Happened?

At each step:

Check → Is number at correct index?

No → swap
Yes → move ahead

Most Important Rule

After swap → DO NOT move i

Why?

Because new element came to index i
It might also be wrong

Code

int i = 0;
while(i < n){
    int correct = arr[i] - 1;
    if(arr[i] != arr[correct]){
        swap(arr[i], arr[correct]);
    } else {
        i++;
    }
}

Complexity

Time: O(n)
Space: O(1)

Where This Pattern is Used

This is where things get interesting 👇

Same logic helps solve multiple problems:

1. Find All Duplicates in Array

int i = 0;
while (i < n) {
    int correct = arr[i] - 1;
    if (arr[i] != arr[correct]) {
        swap(arr[i], arr[correct]);
    } else {
        i++;
    }
}
vector nums;
for (int i = 0; i < n; i++) {
   if(arr[i] != i + 1){
       nums.push_back(arr[i]);
   }
}

2. Find All Missing Numbers

int i = 0;
while (i < n) {
    int correct = arr[i] - 1;
    if (arr[i] != arr[correct]) {
        swap(arr[i], arr[correct]);
    } else {
        i++;
    }
}
vector nums;
for (int i = 0; i < n; i++) {
   if(arr[i] != i + 1){
       nums.push_back(i + 1);
   }
}

3. Missing Number

int i = 0;
int n = nums.size();

while (i < n) {
    if (nums[i] < n && nums[i] != nums[nums[i]]) {
        swap(nums[i], nums[nums[i]]);
    } else {
        i++;
    }
}

for (int i = 0; i < n; i++) {
    if (nums[i] != i) {
        return i;
    }
}
return n;

4. First Missing Positive

int i = 0;
while (i < n) {
    if (arr[i] > 0 && arr[i] <= n) {
        int correct = arr[i] - 1;

        if (arr[i] != arr[correct]) {
            swap(arr[i], arr[correct]);
            continue;
        }
    }
    i++;
}

for (int i = 0; i < n; i++) {
    if (arr[i] != i + 1) {
        return i + 1;
    }
}
return n + 1;

Final Learning

At first, it looks like just swapping…

But actually:

It’s about placing elements at their correct index

Once you understand this:

You unlock 5–6 important interview problems

Building a Todo App using Express.js + MongoDB

Shubham Kumar Singh — Wed, 08 Apr 2026 13:26:06 GMT

Last time, I wrote about Understanding HTTP Requests, Responses, and Methods using Node.js.

This time, I took it one step further…

I built a Todo Application using Express.js and MongoDB

What I Built

User Signup & Signin
Create Todo
Get Todos of logged-in user
Protected routes using middleware
MongoDB for database

Step 1: Setup Express Server

First, I created a basic Express server:

const express = require("express");
const app = express();

app.use(express.json());

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Step 2: Setup MongoDB

Go to https://cloud.mongodb.com/
Create account & login
Create a Cluster
Go to Database Access
- Create username & password
Go to Network Access
- Add IP: 0.0.0.0/0 (for development)
Click Connect
Copy connection string

Example:

mongodb+srv://username:password@cluster.mongodb.net/dbname

MongoDB Connection Code

Before connecting MongoDB, first we need to install mongoose.

Step 1: Install Mongoose

Run this command in your project:

npm install mongoose

Step 2: Connect to MongoDB

Now write the connection code:

const mongoose = require("mongoose");

async function connectDB() {
    try {
        await mongoose.connect("mongodb+srv://:@todo.dtrpx.mongodb.net/todo");
        console.log("MongoDB connected");
    } catch (err) {
        console.error("Connection error:", err);
    }
}

connectDB();

Initially, I tried connecting to MongoDB (cloud) but faced a DNS issue

Problem:

MongoDB connection was failing due to DNS resolution.

Fix:

After watching a YouTube video: , I added this:

const dns = require("dns");
dns.setServers(["1.1.1.1", "8.8.8.8"]);

This fixed the issue and I was able to connect to cloud MongoDB.

Step 3: Create Schema using Mongoose

Before writing any backend or frontend logic, I first designed how my data should look.

This step is very important.

Learning:
Always define your schema first before building APIs or UI.

Because:

It gives clarity on what data you need
Helps structure your database properly
Makes backend logic easier to write

const userSchema = new mongoose.Schema({
    userName: String,
    password: String,
    firstName: String,
    lastName: String
})

const todoSchema = new mongoose.Schema({
    description: String,
    userId: mongoose.Types.ObjectId
})

const userModel = mongoose.model("users", userSchema);
const todoModel = mongoose.model("todos", todoSchema);

module.exports = {
    userModel: userModel,
    todoModel: todoModel
}

Step 4: Signup Route

Before writing code, let’s understand the goal.

What we want to achieve:

Allow a new user to register
Store user details in database
Prevent duplicate users

app.post("/signup", async (req, res) => {
  const { userName, password, firstName, lastName } = req.body;

  // checking user exist or not
  const existingUser = await userModel.findOne({
    userName,
    password,
  });

  if (existingUser) {
    return res.status(403).json({
      message: "User already exists",
    });
  }

  // added new user in userModel collection
  const newUser = await userModel.create({
    userName,
    password,
    firstName,
    lastName,
  });

  res.json({
    id: newUser._id,
  });
});

Step 5: Signin + JWT Token

Before writing code, let’s understand the goal.

What we want to achieve:

Verify user credentials
If valid → allow login
Generate a JWT token for authentication

app.post("/signin", async (req, res) => {
  const { userName, password } = req.body;

  const userExist = await userModel.findOne({ userName });

  if (!userExist) {
    return res.status(404).json({
      message: "User not found",
    });
  }

  const token = jwt.sign(
    { userId: userExist.id },
    "shubham123"
  );

  res.json({ token });
});

Step 6: Auth Middleware

This ensures only logged-in users can access routes.

function authMiddleware(req, res, next) {
    const token = req.headers.token;

    const decode = jwt.verify(token, "shubham123");

    req.userId = decode.userId;

    next();
}

Step 7: Create Todo

Before writing the code, let’s understand

What are we trying to achieve?

We want:
1. Only logged-in users should be able to create a todo i.e. Each todo should be linked to the specific user who created it

When user tries to create a todo, first authentication happens using authMiddleware.

It verifies the token
Extracts userId
Attaches it to req.userId

Then we use this userId to link the todo with the logged-in user.

So each todo belongs to a specific user, and later we can fetch user-specific todos.

app.post("/todo", authMiddleware, async (req, res) => {
  const newTodo = await todoModel.create({
    description: req.body.description,
    userId: req.userId
  });

  res.json({
    id: newTodo._id
  });
});

Step 8: Get All Todos

app.get("/todos", authMiddleware, async (req, res) => {
  const allTodos = await todoModel.find({
    userId: req.userId
  });

  res.json({ allTodos });
});

Testing using Postman

I used Postman to test APIs.

Signup

Method: POST
URL: http://localhost:3000/signup
Body (JSON):

{
  "userName": "shubham",
  "password": "1234",
  "firstName": "Shubham",
  "lastName": "Singh"
}

Signin

Method: POST
URL: /signin

Copy the token from response

Create Todo

Method: POST
URL: /todo
Headers:

token: YOUR_TOKEN

Body:

{
  "description": "Learn Express"
}

Get Todos

Method: GET
URL: /todos
Headers:

token: YOUR_TOKEN

Complete Source Code

👉 I’ve uploaded the complete project on GitHub. You can check it here:

GitHub Repo:
https://github.com/shubhamsinghbundela/Todo-application-using-express/tree/main

Sort 0, 1, 2 (Dutch National Flag Algorithm)

Shubham Kumar Singh — Tue, 07 Apr 2026 13:06:18 GMT

When I first solved the 0s and 1s segregation problem, it felt simple.

If you haven’t seen it, you can check it here:
🔗 https://shubhamsinghbundela.hashnode.dev/segregate-0s-and-1s-in-place-sorting

But then comes this problem — Sort an array of 0s, 1s, and 2s in one pass

Problem Statement

You are given an array containing only:

0 
1 
2

Your task:

Sort the array in-place
Order should be: 0s → 1s → 2s

Example

Input:  [2, 0, 2, 1, 1, 0]
Output: [0, 0, 1, 1, 2, 2]

Approach 1: Counting (Two Pass)

Idea

This is the most straightforward way:

Count number of 0s, 1s, and 2s
Rewrite the array

Dry Run

Input: [2, 0, 2, 1, 1, 0]

Count:
0 → 2 times
1 → 2 times
2 → 2 times

Now rewrite:

[0, 0, 1, 1, 2, 2]

Complexity

Time: O(n) (2 passes)
Space: O(1)

Approach 2: Dutch National Flag (One Pass)

Now comes the real interview approach

Idea

Use two pointers:
- l → start
- i → start
- r → end

Rule:

If arr[i] == 0 → swap arr[i] with arr[l] , then move i++, l++
if arr[i] == 1 -> move i++
If arr[i] == 2 → swap arr[i] with arr[r], then r--

Step-by-Step Dry Run

Input:

[2, 0, 2, 1, 1, 0]

Initial

[2, 0, 2, 1, 1, 0]
 l
 i
                r

Step 1 :

arr[i] = 2 
swap with arr[r]

Only r--, Don’t move i

[0, 0, 2, 1, 1, 2]
 l
 i
             r

Step 2 :

arr[i] = 0 
→ swap with arr[l]

Move both:

l++, i++

[0, 0, 2, 1, 1, 2]
    l
    i
             r

Step 3 :

arr[i] = 0 
→ swap with arr[l]

Move:

l++, i++

[0, 0, 2, 1, 1, 2]
       l
       i
             r

Step 4 :

arr[i] = 2 
→ swap with arr[r]

Only:

r--

[0, 0, 1, 1, 2, 2]
       l
       i
          r

Step 5 :

arr[i] = 1

Just:

i++

[0, 0, 1, 1, 2, 2]
       l
          i
          r

Step 6 :

arr[i] = 1 
→ move forward

i++

[0, 0, 1, 1, 2, 2]
       l
             i
          r

Done

i > r → stop

Final Output

[0, 0, 1, 1, 2, 2]

Key Rules (Remember This)

If `arr[i] == 0`

swap(arr[l], arr[i]);
l++;
i++;

If `arr[i] == 1`

i++;

If `arr[i] == 2`

swap(arr[i], arr[r]);
r--;

Code

int i = 0;
int l = 0;
int r = n - 1;

while(i <= r){
    if(arr[i] == 0){
        swap(arr[l], arr[i]);
        l++;
        i++;
    } 
    else if(arr[i] == 1){
        i++;
    } 
    else{
        swap(arr[i], arr[r]);
        r--;
    }
}

Complexity

Time: O(n) (single pass)
Space: O(1)

Final Thoughts

If you understood this problem:

You now understand:

Two pointer technique
In-place partitioning

Segregate 0s and 1s (In-Place Sorting)

Shubham Kumar Singh — Tue, 07 Apr 2026 12:46:30 GMT

When I first saw this problem, it looked very simple…

But it actually teaches an important concept:
How to optimize from 2 passes → 1 pass using two pointers

Problem Statement

You are given an array containing only 0s and 1s.

Your task:

Move all 0s to the left
Move all 1s to the right
Do it in-place

Example

Input:  [0, 0, 1, 1, 0]
Output: [0, 0, 0, 1, 1]

Approach 1: Two Pass Solution (Counting)

This is the most intuitive approach.

Idea

Count number of 0s and 1s
Rewrite the array

Step-by-Step Traversal

Input:

[0, 0, 1, 1, 0]

Step 1: Count values

count0 = 3
count1 = 2

Step 2: Rewrite array

Index 0 → 0
Index 1 → 0
Index 2 → 0
Index 3 → 1
Index 4 → 1

Final Output:

[0, 0, 0, 1, 1]

Code

int count0 = 0;
int count1 = 0;

for (int i = 0; i < n; i++) {
    if(arr[i] == 0) count0++;
    else count1++;
}

for (int i = 0; i < count0; i++) {
    arr[i] = 0;
}
for (int i = count0; i < n; i++) {
    arr[i] = 1;
}

Complexity

Time: O(n) (2 passes)
Space: O(1)

Approach 2: One Pass (Two Pointer Technique)

Now comes the interesting part

We solve it in just one traversal

Idea

Use two pointers:
- l → start
- r → end

Rule:

If arr[l] == 0 → move l++
If arr[l] == 1 → swap with arr[r], then r--

Dry Run (Step-by-Step)

Input:

[0, 0, 1, 1, 0]

Initial:

l = 0, r = 4

Step 1:

[0, 0, 1, 1, 0]
 L           R

arr[L] = 0 → OK → move L →

Step 2:

[0, 0, 1, 1, 0]
    L        R

arr[L] = 0 → OK → move L →

Step 3 :

[0, 0, 1, 1, 0]
       L     R

arr[L] = 1 → swap with arr[R]

Then:

R--

After swap:

[0, 0, 0, 1, 1]
       L  R

Step 4:

[0, 0, 0, 1, 1]
          L  
          R

arr[L] = 0 → move L →

Step 5:

[0, 0, 0, 1, 1]
          L  
          R

arr[L] = 1 → swap with arr[R]

Then:

R--

After swap:

[0, 0, 0, 1, 1]
       R  L

Final:

[0, 0, 0, 1, 1]
Done

Code

int l = 0;
int r = n - 1;

while (l <= r) {
    if(arr[l] == 0){
        l++;
    } else {
        swap(arr[l], arr[r]);
        r--;
    }
}

Complexity

Time: O(n) (single pass)
Space: O(1)

This problem is a simplified version of: Dutch National Flag Problem (0s, 1s, 2s)

If you understand this,
you can easily solve more complex partitioning problems.

Conclusion

Approach	Passes	Idea
Counting	2	Simple & safe
Two Pointer	1	Optimized & smart

From Callbacks → Callback Hell → Promises → Async/Await (JavaScript)

Shubham Kumar Singh — Wed, 01 Apr 2026 11:25:52 GMT

When I started learning async JavaScript, I was confused about how things evolved from callbacks to async/await.

So here’s a simple breakdown with examples

1. What is a Callback?

A callback is just a function passed into another function and executed later.

Example

function xyz(text, cb) {
  cb(text);
}

xyz("shubham", (data) => {
  console.log(data);
});

Output:

shubham

Making it Asynchronous (using setTimeout)

function xyz(text, cb) {
  setTimeout(() => {
    cb(text);
  }, 1000);
}

xyz("shubham", (data) => {
  console.log(data);
});

Output (after 1 sec):

shubham

2. Callback Hell

When multiple async tasks depend on each other, callbacks get nested.

Example

function xyz(text, cb) {
  setTimeout(() => {
    cb(text);
  }, 1000);
}

xyz("step 1", (data1) => {
  console.log(data1);

  xyz("step 2", (data2) => {
    console.log(data2);

    xyz("step 3", (data3) => {
      console.log(data3);

      xyz("step 4", (data4) => {
        console.log(data4);
      });

    });

  });
});

Problems:

Hard to read
Hard to debug

Why Promises Came

To solve callback hell, JavaScript introduced Promises.

3. Promises Version (Clean)

function xyz(text) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(text);
    }, 1000);
  });
}

xyz("step 1")
  .then((data1) => {
    console.log(data1);
    return xyz("step 2");
  })
  .then((data2) => {
    console.log(data2);
    return xyz("step 3");
  })
  .then((data3) => {
    console.log(data3);
    return xyz("step 4");
  })
  .then((data4) => {
    console.log(data4);
  })
  .catch(console.error);

Benefits:

No nesting
Better readability
Proper error handling

4. Async/Await Version (Best & Cleanest)

Async/Await makes async code look like normal synchronous code.

function xyz(text) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(text);
    }, 1000);
  });
}

async function run() {
  try {
    const data1 = await xyz("step 1");
    console.log(data1);

    const data2 = await xyz("step 2");
    console.log(data2);

    const data3 = await xyz("step 3");
    console.log(data3);

    const data4 = await xyz("step 4");
    console.log(data4);
  } catch (err) {
    console.error(err);
  }
}

run();

Benefits:

Looks synchronous
Easy to read
Cleaner error handling

5. await vs .then()

Equivalent Code

const data = await xyz("step 1");
console.log(data);

Same as:

xyz("step 1").then((data) => {
  console.log(data);
});

await is just syntactic sugar over Promises (.then), making async code look synchronous.

Final Summary

Callback → Nested (Callback Hell)
Promise → Flat chaining
Async/Await → Clean & readable

Understanding Event Loop via a Scheduler

Shubham Kumar Singh — Wed, 01 Apr 2026 11:00:08 GMT

While solving a Time-Sliced Task Scheduler problem, I realized that my understanding of the event loop, microtasks, and macrotasks was wrong.

await does not automatically yield control to the event loop.

Problem Statement:

We need to build a scheduler that ensures no single task blocks the event loop for too long.
Instead of running tasks completely, each task should execute in small parts and pause in between.
This pause (yield) allows other tasks, including newly added or higher-priority ones, to run.
Since JavaScript cannot stop tasks forcefully, tasks must voluntarily give up control.
This concept is called cooperative multitasking, commonly used in UI frameworks to keep applications responsive.

Implementation

class TimeSlicedScheduler {
  constructor() {
    this.queue = [];
  }

  schedule(task) {
    this.queue.push(task);
  }

  async run() {
    while (this.queue.length) {
      const task = this.queue.shift();

      await task();

      // Yield control
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Key Test Case

const runPromise = scheduler.run();

await new Promise(r => setTimeout(r, 0));
events.push("event-loop");

await runPromise;

What Happens WITHOUT Yield

If we remove the yield:

await task();

//remove yield

Execution Flow:

task-1 runs
Immediately continues
task-2 runs
Then event loop runs

Output:

task-1
task-2
event-loop ❌

Why This Happens

Because await uses microtasks, and:

Microtasks run immediately after the current execution, before moving to the next event loop cycle.

So execution continues without any pause.

What Changes WITH Yield

await task();

// added yield
await new Promise(resolve => setTimeout(resolve, 0));

This introduces a macrotask, which:

Pauses execution
Gives control back to the event loop
Allows other pending work to run

Execution Flow WITH Yield

task-1 runs
Scheduler pauses (setTimeout)
Event loop executes "event-loop"
Scheduler resumes
task-2 runs

Output:

task-1
event-loop
task-2

Microtask vs Macrotask (Simple View)

Type	Examples	Behavior
Microtask	`await`, `Promise.then`	Runs immediately
Macrotask	`setTimeout`	Runs in next cycle

Key Insight

Microtasks don’t give control back to the event loop — macrotasks do.

Final Takeaway

await alone is not enough for yielding
You need a macrotask (setTimeout) to pause execution
This pattern is used in real-world systems to avoid blocking

One Line to Remember

If you want to truly yield in JavaScript, use a macrotask — not just await.

This small detail completely changed how I think about async execution in JavaScript.

Prefix Sum Array Technique

Shubham Kumar Singh — Wed, 01 Apr 2026 10:29:38 GMT

Why Prefix Sum Array?

Prefix Sum is a powerful technique used to optimize range sum queries and many subarray problems.

In many problems, we are asked:

“Find the sum of elements between index l and r ”

Instead of recalculating sums again and again, we precompute values so that we can answered instantly.

What is Prefix Sum Array?

A prefix sum array is a derived array that stores the cumulative sum of elements in a given array. Each element in the prefix sum array represents the sum of all elements up to that index in the original array.

Step-by-Step Prefix Sum Calculation:

Given Array

arr = [2, 4, 1, 3, 5]

Build Prefix Sum Array

We keep adding elements cumulatively.

Index (i)	arr[i]	Running Sum	prefix[i]
0	2	2	2
1	4	2 + 4 = 6	6
2	1	6 + 1 = 7	7
3	3	7 + 3 = 10	10
4	5	10 + 5 = 15	15

Final Prefix Sum Array

prefix = [2, 6, 7, 10, 15]

Where Do We Use Prefix Sum Array?

Prefix sum is mainly used in:

Range Sum Queries
Subarray Problems

1. Range Sum Query (Most Common Use Case)

Problem Statement

You are given an array of size n.

You need to answer q queries:

For each query (l, r), find the sum of elements from index l to r.

Brute Force Approach

int q;
cin >> q;

for (int i = 0; i < q; i++) {
    int l, r;
    cin >> l >> r;

    l--; // convert to 0-based index
    r--;

    int ans = 0;
    for (int i = l; i <= r; i++) {
        ans += arr[i];
    }

    cout << ans << endl;
}

Time Complexity

Each query takes O(n) in worst case
Total: O(q × n)

Worst case:

q = 10^5
n = 10^5

So total operations ≈ 10¹⁰ (Too slow → TLE)

Optimized Approach: Prefix Sum

Step 1: Build Prefix Sum Array

We create a new array where each index stores:

Sum of all elements from start to that index

Lets Build Prefix sum Array.

int sum = 0;
for (int i = 0; i < n; i++) {
    sum += arr[i];
    arr[i] = sum;
}

Step 2: Answer Queries in O(1)

for (int i = 0; i < q; i++) {
    int l, r;
    cin >> l >> r;

    l--; // convert to 0-based
    r--;

    if (l == 0) {
        cout << arr[r] << endl;
    } else {
        cout << arr[r] - arr[l - 1] << endl;
    }
}

Time Complexity

Approach	Time Complexity
Brute Force	O(q × n)
Prefix Sum	O(n + q)

Now it easily fits within 1 second limit

2. Sum of All Subarrays

Problem Understanding

You are given an array:

For every starting index L, print all subarrays starting from L
And print the sum of each subarray

Example

arr = [1, 2, 3]

Subarrays and their sums:

L = 0 → [1] = 1  
         [1,2] = 3  
         [1,2,3] = 6  

L = 1 → [2] = 2  
         [2,3] = 5  

L = 2 → [3] = 3

Brute Force Approach

We generate all subarrays and calculate sum every time:

for (int l = 0; l < n; l++) {
    for (int r = l; r < n; r++) {
        int sum = 0;
        for (int k = l; k <= r; k++) {
            sum += arr[k];
        }
        cout << sum << endl;
    }
}

Time Complexity

3 loops → O(n³) (very slow)

Optimized using Prefix Sum:

Steps

1. Build Prefix Sum

int sum = 0;
for (int i = 0; i < n; i++) {
    sum += arr[i];
    arr[i] = sum;
}

2. Generate Subarrays (Optimized)

for (int l = 0; l < n; l++) {
    for (int r = l; r < n; r++) {
        if (l == 0) {
            cout << arr[r] << endl;
        } else {
            cout << arr[r] - arr[l - 1] << endl;
        }
    }
}

Time Complexity

Prefix building → O(n)
Generating subarrays → O(n²)

Total = O(n²)

Where Else Prefix Sum is Used?

Subarray sum problems
Count of subarrays with given sum
2D matrix sum queries
Sliding window optimizations

Conclusion

The prefix sum array serves as a powerful tool in optimizing computations involving cumulative sums. By constructing a prefix sum array, we can efficiently answer queries related to range sums, subarray sums etc.

How I Solved Preemptive Priority Task Scheduler in JavaScript

Shubham Kumar Singh — Tue, 24 Mar 2026 11:33:23 GMT

When I first saw this problem, it looked like something straight out of an Operating System.

But implementing it in JavaScript?
That’s where things get interesting.

What is Preemptive Scheduling?

Preemptive scheduling is an OS technique where:

A high-priority task can interrupt a currently running low-priority task
CPU automatically switches execution

In simple words:

“Important work gets preference immediately.”

But here’s the catch in JavaScript

JavaScript does NOT support true preemption

What is “true preemption”?

A running task can be forcefully stopped anytime
CPU takes control and switches tasks

This happens in Operating Systems

In JavaScript

If a function starts running…
Nothing can stop it until it finishes

That means:

We cannot interrupt execution midway

So how do we solve this?

Since JavaScript cannot interrupt a running task, we design tasks in such a way that they pause themselves after some work and give control back to the scheduler.

This allows the system to check if any higher-priority task has arrived before continuing.

We achieve this using:

setTimeout
await (async tasks)

Problem Statement

We need to:

Execute tasks based on priority
Higher priority runs first
Allow new high-priority tasks to jump ahead
Since no true preemption → tasks must yield control

My Approach

I built a Scheduler class with:

Priority Queue → to store tasks
Sorting mechanism → highest priority first
Execution loop → runs tasks one by one
Yield mechanism → allows re-evaluation after each task

Implementation

class Scheduler {
  constructor() {
    this.queue = [];
    this.timer = null;
    this.running = false;
  }

  schedule(task, priority = 0) {
    this.queue.push({ task, priority });

    // maintain priority order
    this.queue.sort((a, b) => b.priority - a.priority);

    // start scheduler only if not already running
    if (!this.running) {
      this.running = true;
      // Don’t continue immediately
      // Pause here and come back later
      this.timer = setTimeout(() => this.run(), 0);
    }
  }

  run(onAllFinished) {
    if (this.queue.length === 0) {
      this.running = false;
      this.timer = null;
      return onAllFinished && onAllFinished(null);
    }

    const { task } = this.queue.shift();

    task((err) => {
      if (err) {
        this.running = false;
        this.timer = null;
        return onAllFinished && onAllFinished(err);
      }

      // schedule next task instead of running immediately
      this.timer = setTimeout(() => this.run(onAllFinished), 0);
    });
  }
}

const scheduler = new Scheduler();
const results = [];

const createTask = (val) => (cb) => {
  results.push(val);
  cb(null);
};

scheduler.schedule(createTask("low"), 0);
scheduler.schedule(createTask("high"), 10);
scheduler.schedule(createTask("medium"), 5);

scheduler.run((err) => {
  console.log(results);
});

What’s Actually Happening Behind the Scenes?

Let’s understand the key idea:

1. Tasks are sorted by priority

this.queue.sort((a, b) => b.priority - a.priority);

Highest priority always comes first

2. Only ONE task runs at a time

const { task } = this.queue.shift();

This keeps execution controlled

3. After every task → we pause

setTimeout(() => this.run(), 0);

This is the most important design decision

Instead of running tasks continuously:

We stop after each task
Give control back to JavaScript runtime
Then resume later

Why this works like preemption

Let’s say:

A low-priority task runs
Before next execution, a high-priority task is added

Because we paused:

Scheduler gets a chance to re-check the queue
High-priority task moves to the top
It runs next

Final Thought

This problem is not about setTimeout.

It’s about:

Understanding how JavaScript execution works
Designing systems within its limitations

Shubham Tech. Blog's

Building a ShelfLife Household Inventory Tracker — Frontend

Why ShelfLife?

Step 1: Setting Up the Project with Vite

Step2: Deciding the Folder Structure

Step3 : Understanding @ Alias Imports in React + Vite

Step 4: Installing React Router DOM

Step 5: Setting Up Centralized Routing

Step 6: Creating a Shared Layout Route

Step 7: Configuring the App Router

Step 8: Setting Up Material UI

Step 9: Setting Up Global State Management with Redux Toolkit

Step 10: Setting Up Axios

baseURL

withCredentials: true

timeout: 10000

Step 11: Building the Shared Navigation Layout

Step12: Connecting Navbar with the Login Dialog

Step 13: Building the Signup Component

Step 14: Building the Login Component

Understanding React Hook Form

Step15: Rendering Login and Signup Components

Step 16: Persistent Authentication

Why This Step Is Important

Step 14: Building the Join Household Flow

Step 17: Implementing Frontend Route Protection (Protected Routes)

Step 18: Creating a Reusable Dashboard Layout with Nested Routes

Step 19: Building the Inventory Management Table using Material React Table

Step 22: Implementing Server-Side Pagination & Search using Material React Table

Building a ShelfLife Household Inventory Tracker - Backend

What are we building?

Goal

Core Features

Step 1: Initialize Project

Step 2: Install Dependencies

Step 3: Setup App Entry (src/app.js)

Step 4: Environment Variables

Step 5: Server Entry Point (server.js)

Step 6: Scripts Setup

Step 7: Setup Database Connection

Step 8: Standard API Response Structure

Step 9: Standard API Error Structure

Step 10: Authentication Module (Modular Structure)

Step 11: Implement Login

Step 12: Refresh Access Token

Authentication Flow

Step 13: Get Current User & Logout APIs

Service Layer (Business Logic)

Update:

Step 14: Create household inside households Module

Step 14: Join Household Feature

Step 15: Get All Household Members

Step 16: Leave Household Feature

Step 17: Add Items Feature (Inventory Management)

Step 18: Automated Status Updates (Using Cron Job)

Step 19: Email Notification System for Expiring Items

Expiring Items Alert

Expiring Items Alert

Outcome

Step 20: Get All Items & Update Item APIs

Step 21: Delete Item API

Sliding Window

Problem

Understanding the Problem

Brute Force Thinking

Key Observation

Sliding Window Idea

Step-by-Step Dry Run

Key Insight

Code

Complexity

Aggressive Cows Problem using Binary Search

Problem

Core Idea

Goal

Why Binary Search?

Example

Step 1: Sort

Step 2: Apply Binary Search on distance

Step 3: Try Mid Values

Step3 : Understanding `@` Alias Imports in React + Vite

`baseURL`

`withCredentials: true`

`timeout: 10000`

What is `Promise.all()`?

Custom Implementation of `Promise.all()`