DEV Community: Reshma Shaik

Stock Management System - Frontend

Reshma Shaik — Tue, 08 Apr 2025 00:37:54 +0000

As we are done with 👉 auth and private route setup . Let's continue further to complete frontend part of our project following the below requirements.

1. Create a Dashboard page `pages/Dashboard.jsx`

I wanted a dashboard that provides all my required components are displayed on the screen.

As, dashboard has to be a private route i.e, after login only user r allowed to access.
Fetching user details from AuthContext.
If the user is not available, provides a loading screen.
Displaying a dark-themed dashboard with a Navbar.
Showing a welcome message with user.name.
Providing three navigation links to different sections using a grid layout with appropriate styling.

import { useContext } from "react";
import { AuthContext } from "../context/AuthContext";
import { Link } from "react-router-dom";
import Navbar from "../components/Navbar";

const Dashboard = () => {
  const { user } = useContext(AuthContext);

  if (!user) {
    return <div className="h-screen flex justify-center items-center text-white text-lg">Loading...</div>;
  }

  return (
    <div className="min-h-screen bg-gray-900 text-white flex flex-col">
      {/* Navbar */}
      <Navbar />

      {/* Dashboard Content */}
      <div className="flex-grow flex flex-col items-center justify-center px-6">
        <h1 className="text-3xl font-semibold mb-4">Welcome, {user.name}!</h1>
        <p className="text-gray-400 mb-8">Manage your stock efficiently with real-time insights.</p>

        {/* Dashboard Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 w-full max-w-4xl">
          <Link to="/products" className="p-6 bg-white/10 backdrop-blur-lg rounded-xl text-center hover:bg-white/20 transition">
            <h2 className="text-xl font-semibold">Manage Products</h2>
          </Link>
          <Link to="/stock-overview" className="p-6 bg-white/10 backdrop-blur-lg rounded-xl text-center hover:bg-white/20 transition">
            <h2 className="text-xl font-semibold">Stock Overview</h2>
          </Link>
          <Link to="/analytics" className="p-6 bg-white/10 backdrop-blur-lg rounded-xl text-center hover:bg-white/20 transition">
            <h2 className="text-xl font-semibold">Analytics Dashboard</h2>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;

Let's implement the components that we defined above.

2. `components/ProductManagement.jsx`

Setting up the required imports.

import { useEffect, useState } from "react"; //for statemanagement and sideeffects.
import { toast } from "react-toastify"; //for notification pop-ups
import { Trash2, Edit3 } from "lucide-react"; //Icons for delete and edit operations.
import api from "../utils/api"; //for api calls.
import Navbar from "./Navbar";  //navbar component
import { useNavigate } from "react-router-dom"; //React router navigation function.

State Variables
products: storing the list of products.

form: Managing product form data for adding/editing.
sellForm: Storing sales data.
showAddForm, showSellForm: Toggle forms for adding/selling products.
editingProduct: Stores the ID of the product being edited.

const [products, setProducts] = useState([]);
const [form, setForm] = useState({ name: "", category: "", price: "", quantityInStock: "" });
const [sellForm, setSellForm] = useState({ productId: "", quantity: "" });
const [showAddForm, setShowAddForm] = useState(false);
const [showSellForm, setShowSellForm] = useState(false);
const [editingProduct, setEditingProduct] = useState(null);

Fetching the Products Fetching the products data when the component loads from the API,then updating the state with API response.

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

const fetchProducts = async () => {
  try {
    const { data } = await api.get("/products");
    setProducts(data);
  } catch (error) {
    console.error(error);
    toast.error("Failed to fetch products. Please try again.");
  }
};

Handling Input Changes

Updates form state dynamically as user types.

const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });

const handleSellChange = (e) => {
  const { name, value } = e.target;
  setSellForm((prev) => ({
    ...prev,
    [name]: name === "quantity" ? Number(value) : value, // Ensures quantity is a number
  }));
};

Handling the product editing

const handleEdit = (product) => {
  setEditingProduct(product._id); // Store product ID
  setForm({ ...product }); // Populate form with product data
  setShowAddForm(true); // Open form modal
};

Adding or updating the products 1.If editingProduct exists → Update product (PUT /products/:id).

2.Else → Create new product (POST /products).

const handleSubmit = async (e) => {
  e.preventDefault();
  if (!form.name || !form.category || !form.price || !form.quantityInStock) {
    toast.warn("Please fill in all fields before submitting.");
    return;
  }
  try {
    if (editingProduct) {
      await api.put(`/products/${editingProduct}`, form);
      toast.success("Product updated successfully");
      setEditingProduct(null); 
    } else {
      await api.post("/products", form);
      toast.success("Product added successfully");
    }
    fetchProducts();
    setForm({ name: "", category: "", price: "", quantityInStock: "" });
    setShowAddForm(false);
  } catch (error) {
    toast.error(error.response?.data?.message || "Error adding product.");
  }
};

Selling a Product 1.Sends a sale request (POST /sales/sell).

2.Reduces stock count when a product is sold.

const handleSellSubmit = async (e) => {
  e.preventDefault();
  if (!sellForm.productId || !sellForm.quantity || sellForm.quantity <= 0) {
    toast.warn("Please select a product and enter a valid quantity.");
    return;
  }
  try {
    await api.post("/sales/sell", sellForm);
    toast.success("Product sold successfully! 💰");
    fetchProducts();
    setSellForm({ productId: "", quantity: "" });
    setShowSellForm(false);
  } catch (error) {
    toast.error(error.response?.data?.message || "Error selling product.");
  }
};

Deleting a Product

const handleDelete = async (id) => {
  try {
    await api.delete(`/products/${id}`);
    toast.success("Product deleted successfully! 🗑️");
    fetchProducts();
  } catch (error) {
    console.error(error);
    toast.error("Error deleting product. Please try again.");
  }
};

CSV Import
Allows users to upload a CSV file.

Sends a multipart/form-data request to /csv/import-csv.

const handleImportCSV = async (e) => {
  e.preventDefault();
  const file = e.target.files[0];
  if (!file) {
    toast.warn("Please select a CSV file to import.");
    return;
  }

  const formData = new FormData();
  formData.append("file", file);

  try {
    await api.post("/csv/import-csv", formData, { headers: { "Content-Type": "multipart/form-data" } });
    toast.success("CSV imported successfully! 📂");
    fetchProducts();
  } catch (error) {
    console.error(error);
    toast.error("Error importing CSV. Please check the file format, and duplicates before Import.");
  }
};

CSV Export 1.Fetches CSV data from /csv/export-csv.

2.downloads a file for the user.

const handleExportCSV = async () => {
  try {
    const response = await api.get("/csv/export-csv", { responseType: "blob" });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "products.csv");
    document.body.appendChild(link);
    link.click();
    toast.success("CSV exported successfully! 📤");
  } catch (error) {
    console.error(error);
    toast.error("Error exporting CSV. Please try again.");
  }
};

Component Structure in return statement.
Adding new products

Selling products
Importing/exporting CSV files
Editing and deleting products
Displaying a list of products

Header Section Back to Dashboard button → Navigates back to the dashboard.

Title: "Product Management" → Displays the section title.

CSV Import & Export → Allows importing a CSV file.
→ Exports the product list as a CSV.

{/* Header */}
    <div className="flex items-center justify-between mb-6">
      <button
        onClick={() => navigate("/dashboard")}
        className="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg shadow-md transition duration-300"
      >
        Back to Dashboard
      </button>
      <h1 className="text-2xl font-bold flex-grow text-center">Product Management</h1>
      <div className="flex gap-4">
        <input type="file" accept=".csv" onChange={handleImportCSV} className="hidden" id="importCSV" />
        <label htmlFor="importCSV" className="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded cursor-pointer">Import CSV</label>
        <button onClick={handleExportCSV} className="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded">Export CSV</button>
      </div>
    </div>

Action Buttons 1."Add Product" Button → Toggles the add/edit product form.

2."Sell Product" Button → Toggles the sell product form.

{/* Action Buttons */}
    <div className="flex gap-4 mb-4">
      <button onClick={() => setShowAddForm(!showAddForm)} className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg">
        {showAddForm ? "Close" : "Add Product"}
      </button>
      <button onClick={() => setShowSellForm(!showSellForm)} className="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg">
        {showSellForm ? "Close" : "Sell Product"}
      </button>
    </div>

Add/Edit Product form 1.Displays a form when adding a new product or editing an existing one.

2.Fields:Product Name,Category,Price,Stock Quantity

3.Submit button → Adds or updates the product.

4.Cancel button → Closes the form and resets the state.

{/* Add Product Form */}
    {showAddForm && (
      <form onSubmit={handleSubmit} className="bg-gray-800 p-6 rounded-xl shadow-lg grid gap-4 w-full max-w-md mx-auto">
        <h2 className="text-xl font-semibold text-white text-center">{editingProduct ? "Edit Product" : "Add New Product"}</h2>
        <input type="text" name="name" placeholder="Product Name" value={form.name} onChange={handleChange} required className="p-3 bg-gray-700 text-white rounded-lg border border-gray-600" />
        <input type="text" name="category" placeholder="Category" value={form.category} onChange={handleChange} required className="p-3 bg-gray-700 text-white rounded-lg border border-gray-600" />
        <input type="number" name="price" placeholder="Price" value={form.price} onChange={handleChange} required className="p-3 bg-gray-700 text-white rounded-lg border border-gray-600" />
        <input type="number" name="quantityInStock" placeholder="Stock Quantity" value={form.quantityInStock} onChange={handleChange} required className="p-3 bg-gray-700 text-white rounded-lg border border-gray-600" />
        <div className="flex justify-between">
          <button type="submit" className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg">{editingProduct ? "Update Product" : "Add Product"}</button>
          <button type="button" onClick={() => { setShowAddForm(false); setEditingProduct(null); }} className="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg">Cancel</button>
        </div>
      </form>
    )}

Sell Product form 1.Allows selecting a product and entering the quantity to sell.

2.Fields:
Dropdown: Selects a product from available ones.
Quantity input: Specifies the number of units to sell.
Submit button → Processes the sale and updates stock.

 {/* Sell Product Form */}
    {showSellForm && (
      <form onSubmit={handleSellSubmit} className="bg-gray-800 p-6 rounded-xl shadow-lg grid gap-4 mt-4 w-full max-w-md mx-auto">
        <h2 className="text-xl font-semibold text-white text-center">Sell Product</h2>
        <select name="productId" value={sellForm.productId} onChange={handleSellChange} required className="p-3 bg-gray-700 text-white rounded-lg border border-gray-600">
          <option value="">Select Product</option>
          {products.map((product) => (
            <option key={product._id} value={product._id}>{product.name} (Stock: {product.quantityInStock})</option>
          ))}
        </select>
        <input type="number" name="quantity" placeholder="Enter Quantity" value={sellForm.quantity} onChange={handleSellChange} required className="p-3 bg-gray-700 text-white rounded-lg border border-gray-600" />
        <button type="submit" className="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg">Sell Product</button>
      </form>
    )}

Product List Table

1.Displays all available products in a table.

2.Columns:
Product Name, Category, Price, Stock Quantity, Actions
Edit button → Opens the edit form with pre-filled details.
Delete button → Deletes the selected product.

{/* Product List */}
    <h3 className="text-xl font-bold mb-4 mt-6">Product List</h3>
    <div className="bg-gray-800 p-4 rounded-lg shadow-md">
      <table className="w-full text-left">
        <thead>
          <tr className="border-b border-gray-700 text-gray-300">
            <th className="p-3">Product</th>
            <th>Category</th>
            <th>Price</th>
            <th>Stock</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {products.map((product) => (
            <tr key={product._id} className="border-b border-gray-700 text-gray-200">
              <td className="p-3">{product.name}</td>
              <td>{product.category}</td>
              <td>${product.price}</td>
              <td>{product.quantityInStock}</td>
              <td className="flex gap-2">
                <button onClick={() => handleEdit(product)} className="text-blue-400 hover:text-blue-600 p-2">
                  <Edit3 size={20} />
                </button>
                <button onClick={() => handleDelete(product._id)} className="text-red-500 hover:text-red-700 p-2">
                  <Trash2 size={20} />
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

3. Stock Overview Component `components/StockOverview.jsx`

Importing Dependencies

import { useEffect, useState } from "react"; //Manages state and API calls.
import { toast } from "react-toastify"; //Displays error messages if API calls fail.
import api from "../utils/api"; //Axios instance for API requests.
import { useNavigate } from "react-router-dom"; //Enables navigation between pages.

Component Initialization & State Management

1.stockData → Stores the stock details retrieved from the API.

loading → Tracks whether data is still being fetched.

const navigate = useNavigate();
const [stockData, setStockData] = useState(null);
const [loading, setLoading] = useState(true);

Fetching the Stock Data

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

Fetching Stock Overview from API

1.Calls the API (/stock-overview) to retrieve stock details.

2.Handles errors (logs error + displays a toast notification).

3.Sets loading to false after fetching data.

const fetchStockOverview = async () => {
  try {
    const { data } = await api.get("/stock-overview");
    setStockData(data);
  } catch (error) {
    console.error(error);
    toast.error("Failed to fetch stock overview");
  } finally {
    setLoading(false);
  }
};

UI or Component Return Statement

1.Dashboard Navigation

<button 
  onClick={() => navigate("/dashboard")} 
  className="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg shadow-md transition duration-300"
>
  <span>Back to Dashboard</span>
</button>

Stock Overview section

<h2 className="text-3xl font-bold text-gray-100 mb-6 text-center w-full">
  Stock Overview
</h2>

Stock Data Card Displays 3 key metrics: Total Items, Total Sold, Total Revenue

Skeleton Loading Effect: While fetching data, it displays a placeholder using animate-pulse.

<div className="grid grid-cols-3 gap-6 text-center">
  {loading ? (
    [...Array(3)].map((_, i) => (
      <div key={i} className="p-6 bg-gray-800 rounded-lg shadow-md animate-pulse">
        <div className="h-6 bg-gray-700 rounded w-3/4 mx-auto mb-2"></div>
        <div className="h-8 bg-gray-700 rounded w-1/2 mx-auto"></div>
      </div>
    ))
  ) : (
    <>
      <div className="p-6 bg-gray-800 rounded-lg shadow-md">
        <h3 className="text-lg font-semibold text-gray-300">Total Items</h3>
        <p className="text-2xl font-bold text-white">{stockData.totalItems}</p>
      </div>
      <div className="p-6 bg-gray-800 rounded-lg shadow-md">
        <h3 className="text-lg font-semibold text-gray-300">Total Sold</h3>
        <p className="text-2xl font-bold text-white">{stockData.totalSold}</p>
      </div>
      <div className="p-6 bg-gray-800 rounded-lg shadow-md">
        <h3 className="text-lg font-semibold text-gray-300">Total Revenue</h3>
        <p className="text-2xl font-bold text-green-400">
          ${stockData.totalRevenue.toFixed(2)}
        </p>
      </div>
    </>
  )}
</div>

Sold Items List

Displays sold items in a list.
Shows a skeleton loading effect if data is still being fetched.
Handles empty data gracefully (No items sold yet.)

<div className="mt-8 bg-gray-800 p-6 rounded-lg shadow-md">
  <h3 className="text-xl font-bold text-gray-100 mb-4">Sold Items</h3>
  <ul className="divide-y divide-gray-700">
    {loading ? (
      [...Array(5)].map((_, i) => (
        <li key={i} className="p-4 flex justify-between animate-pulse">
          <div className="h-4 bg-gray-700 rounded w-1/3"></div>
          <div className="h-4 bg-gray-700 rounded w-1/4"></div>
          <div className="h-4 bg-gray-700 rounded w-1/6"></div>
          <div className="h-4 bg-gray-700 rounded w-1/6"></div>
        </li>
      ))
    ) : stockData.soldItems.length > 0 ? (
      stockData.soldItems.map((item, index) => (
        <li key={index} className="p-4 flex justify-between">
          <span className="font-semibold text-white">{item.name}</span> 
          <span className="text-gray-400">{item.category}</span>
          <span className="text-green-500">Sold: {item.quantitySold}</span>
          <span className="text-blue-400">
            Revenue: ${item.revenueGenerated.toFixed(2)}
          </span>
        </li>
      ))
    ) : (
      <p className="text-gray-500 text-center">No items sold yet.</p>
    )}
  </ul>
</div>

4. Analytics Component `components/Analytics.jsx`

Imports and Initial Setup.

import { useEffect, useState } from "react";
import { Bar } from "react-chartjs-2";  //Registers bar chart components.
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import api from "../utils/api"; // Using baseURL configured API
import { useNavigate } from "react-router-dom";

State Management

const [stockData, setStockData] = useState([]); //Stores fetched product stock data
const [chartData, setChartData] = useState(null); // Stores formatted data for Chart.js
const [category, setCategory] = useState(""); //Stores user-input filter for product category
const [sortBy, setSortBy] = useState("totalRevenue"); //Stores sorting criteria (totalRevenue or totalSold)
const [order, setOrder] = useState("desc"); //Determines sort order (asc or desc)
const [loading, setLoading] = useState(true); //Tracks data fetching state
const [error, setError] = useState(null); //Stores error messages

Data fetching with UseEffect Calls fetchStockData and fetchChartData whenever category, sortBy, or order changes.

useEffect(() => {
  fetchStockData();
  fetchChartData();
}, [category, sortBy, order]);

Fetching Stock Data 1.Sends API request to /analytics/stock to get stock details.

2.Filters products based on category (case-insensitive).

3.Updates stockData with filtered results.

const fetchStockData = async () => {
  setLoading(true);
  try {
    const response = await api.get(`/analytics/stock`, {
      params: { sortBy, order },
    });

    let filteredData = response.data;

    // Apply case-insensitive filtering on the frontend
    if (category.trim() !== "") {
      const searchQuery = category.toLowerCase();
      filteredData = filteredData.filter(product =>
        product.category.toLowerCase().includes(searchQuery) ||
        product.name.toLowerCase().includes(searchQuery)
      );
    }

    setStockData(filteredData);
  } catch (error) {
    setError("Error fetching stock data");
    console.error("Error fetching stock data:", error);
  } finally {
    setLoading(false);
  }
};

Fetching Chart Data

1.Calls API /analytics/chart-data to get total revenue & total sold per category.

2.Converts response into chartData for Chart.js bar graph.

const fetchChartData = async () => {
  try {
    const response = await api.get(`/analytics/chart-data`);
    const data = response.data;
    setChartData({
      labels: data.map((item) => item.category),
      datasets: [
        {
          label: "Total Revenue",
          data: data.map((item) => item.totalRevenue || 0),
          backgroundColor: "rgba(54, 162, 235, 0.6)",
        },
        {
          label: "Total Sold",
          data: data.map((item) => item.totalSold || 0),
          backgroundColor: "rgba(255, 99, 132, 0.6)",
        },
      ],
    });
  } catch (error) {
    setError("Error fetching chart data");
    console.error("Error fetching chart data:", error);
  }
};

UI Rendering
Navigation Button

<button 
  onClick={() => navigate("/dashboard")} 
  className="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg shadow-md transition duration-300"
>
  <span>Back to Dashboard</span>
</button>

Filters and Sorting Options
Text Input: Filters by category.
Dropdowns: 1.Sort by (totalRevenue / totalSold). 2.Sort order (asc / desc).

<div className="flex gap-4 mb-4">
  <input
    type="text"
    placeholder="Filter by category"
    value={category}
    onChange={(e) => setCategory(e.target.value)}
    className="p-2 bg-gray-800 border border-gray-600 rounded"
  />
  <select
    value={sortBy}
    onChange={(e) => setSortBy(e.target.value)}
    className="p-2 bg-gray-800 border border-gray-600 rounded"
  >
    <option value="totalRevenue">Sort by Revenue</option>
    <option value="totalSold">Sort by Items Sold</option>
  </select>
  <select
    value={order}
    onChange={(e) => setOrder(e.target.value)}
    className="p-2 bg-gray-800 border border-gray-600 rounded"
  >
    <option value="desc">Descending</option>
    <option value="asc">Ascending</option>
  </select>
</div>

Table for Stock Data

Displays product, category, sales count, and revenue.

Uses stockData to generate rows.

<table className="w-full border-collapse border border-gray-700">
  <thead>
    <tr className="bg-gray-800">
      <th className="p-2 border border-gray-700">Product</th>
      <th className="p-2 border border-gray-700">Category</th>
      <th className="p-2 border border-gray-700">Items Sold</th>
      <th className="p-2 border border-gray-700">Revenue</th>
    </tr>
  </thead>
  <tbody>
    {stockData.map((product) => (
      <tr key={product._id} className="text-center bg-gray-700">
        <td className="p-2 border border-gray-600">{product.name}</td>
        <td className="p-2 border border-gray-600">{product.category}</td>
        <td className="p-2 border border-gray-600">{product.itemsSold}</td>
        <td className="p-2 border border-gray-600">
          ${product.totalRevenue ? product.totalRevenue.toFixed(2) : "0.00"}
        </td>
      </tr>
    ))}
  </tbody>
</table>

Chart.js Bar Chart
If chartData exists, renders bar chart.

{chartData && (
  <div className="mt-6 bg-gray-800 p-4 rounded-lg">
    <h2 className="text-xl font-bold">Sales & Revenue Overview</h2>
    <Bar data={chartData} />
  </div>
)}

5. Landing Page `pages/LandingPage.jsx`

Handling imports

import { useNavigate } from "react-router-dom";
import { ShoppingCart, BarChart3, FileText, LogIn } from "lucide-react";
import { AuthContext } from "../context/AuthContext";
import { useContext, useState } from "react";

Component definition and AuthChecks

1.Extracts user and logout from AuthContext to manage authentication.

2.isOpen controls the profile dropdown visibility.

3.isAuthenticated checks if the user is logged in using localStorage token.

const LandingPage = () => {
  const { user, logout } = useContext(AuthContext);
  const [isOpen, setIsOpen] = useState(false);
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate("/");
    setIsOpen(false);
  };

  const isAuthenticated = !!localStorage.getItem("token");

Handling Profile Click Toggles the profile dropdown when clicked.

const handleProfileClick = async () => {
  if (!isOpen) {
    await user;
  }
  setIsOpen(!isOpen);
};

Handling Navigation

const handleNavigation = (path) => {
  navigate(isAuthenticated ? path : "/login");
};

Landing page layout // Dark mode styling.

return (
  <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-6 relative">

Navbar section 1.If the user is logged in, show a profile button.

2.Clicking Profile reveals a dropdown with name, email, and a logout button.

3.If not logged in, show Login & Register buttons.

{user ? (
  <div className="absolute top-6 right-6">
    <button onClick={handleProfileClick} className="px-4 py-2 bg-gray-700 bg-opacity-70 hover:bg-opacity-100 rounded-md transition">
      Profile
    </button>

    {isOpen && (
      <div className="absolute right-0 mt-2 w-56 bg-black text-gray-800 rounded-lg shadow-lg border border-white/20 transition-all duration-300">
        <div className="p-4 border-b border-white/20">
          <p className="font-semibold text-white">{user.name}</p>
          <p className="text-sm text-gray-300">{user.email}</p>
        </div>
        <button onClick={handleLogout} className="block w-full text-left px-4 py-2 text-white hover:bg-white/20 rounded-b-lg transition">
          Logout
        </button>
      </div>
    )}
  </div>
) : (
  <div className="absolute top-6 right-6 flex gap-4">
    <button onClick={() => navigate("/login")} className="text-white hover:text-blue-400 transition duration-300">Login</button>
    <span className="text-gray-500">|</span>
    <button onClick={() => navigate("/auth/register")} className="text-white hover:text-green-400 transition duration-300">Register</button>
  </div>
)}

Hero Section Title & Description for the landing page.

<header className="text-center max-w-3xl">
  <h1 className="text-4xl font-bold mb-4">Stock Management System</h1>
  <p className="text-gray-300">
    A powerful tool to track inventory, manage stock levels, and generate reports efficiently.
  </p>
</header>

Features Section

1.Displays 3 feature cards (Product Management, Stock Overview, Analysis).

2.If user is not authenticated, an extra card for Secure Login appears.

<section className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
  {[
    {
      path: "/products",
      icon: <ShoppingCart size={40} className="text-yellow-400 mx-auto mb-3" />,
      title: "Product Management",
      description: "Easily add, edit, and delete products in stock.",
    },
    {
      path: "/stock-overview",
      icon: <BarChart3 size={40} className="text-green-400 mx-auto mb-3" />,
      title: "Stock Overview",
      description: "Monitor available stock, items sold, and revenue trends.",
    },
    {
      path: "/analytics",
      icon: <FileText size={40} className="text-purple-400 mx-auto mb-3" />,
      title: "Analysis",
      description: "Generate reports in charts.",
    },
  ].map((feature, index) => (
    <div key={index} onClick={() => handleNavigation(feature.path)}
      className="bg-gray-800 p-6 rounded-lg shadow-md cursor-pointer hover:bg-gray-700 transition duration-300">
      {feature.icon}
      <h3 className="text-xl font-semibold">{feature.title}</h3>
      <p className="text-gray-400 mt-2">{feature.description}</p>
    </div>
  ))}

  {!isAuthenticated && (
    <div onClick={() => navigate("/login")}
      className="bg-gray-800 p-6 rounded-lg shadow-md cursor-pointer hover:bg-gray-700 transition duration-300">
      <LogIn size={40} className="text-red-400 mx-auto mb-3" />
      <h3 className="text-xl font-semibold">Secure Login</h3>
      <p className="text-gray-400 mt-2">Ensure security with JWT-based authentication.</p>
    </div>
  )}
</section>

Footer Section.

<footer className="mt-12 text-gray-500 text-center">
  &copy; {new Date().getFullYear()} Stock Management System By Shaik Reshma
</footer>

Checkout my project source code 👉github and the you'll find the deployed link, Test it out there.

This is all about frontend setup code and run the application npm run dev.For any queries react out in comment section.

Happy Developing🎉

                       Let's grow together!

Frontened Setup🛠 - Stock Management System

Reshma Shaik — Sun, 06 Apr 2025 09:52:38 +0000

As we are done with our 👉Backend to set up frontend for MERN Stack Application, Let's use Vite framework for building react application.

So, Inorder to complete the steps of our Stock Management System we need to build the frontend that aligns the below requirements.

1.In your Main Project Directory open terminal and follow the steps.

# Create a Vite project
npm create vite@latest stock-management-frontend --template react

# Navigate to the project directory
cd stock-management-frontend

# Install dependencies
npm install

2.Install required dependencies

npm install react-router-dom  //React Router for navigation

npm install axios  //Axios for API requests

npm install react-toastify  //React-Toastify for notifications

npm install chart.js react-chartjs-2 //Chart.js for stock trend 
visualization

npm install file-saver //FileSaver for CSV export:

npm install jwt-decode  //To decode JWT tokens

For Styling install tailwindcss for Vite configuration.
Set up Base API URL for Fetch Requests (api.js), Login page, Register page.

utils/api.js

import axios from "axios";

const BASE_URL = "http://localhost:5000/api"; // Change this for production

const api = axios.create({
  baseURL: BASE_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export default api;

pages/Register.jsx - create a registration form as per our backend requriements.

Defining the register component.
State Management of the fields.
Handling the form Submission.
Creating UserInterface as per your styling requirements.

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import api from "../utils/api"; // Import the centralized API instance

const Register = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState("user");
  const navigate = useNavigate();

  const handleRegister = async (e) => {
    e.preventDefault(); //prevents default form submission.
    try {
      await api.post("/auth/register", { name, email, password, role });
      navigate("/login");
    } catch (error) {
      alert(error.response?.data?.message || "Registration failed!");
    }
  };

  return (
    <div className="flex justify-center items-center h-screen bg-gray-200">
      <form onSubmit={handleRegister} className="bg-white p-6 rounded shadow-lg">
        <h2 className="text-2xl mb-4">Register</h2>
        <input 
          type="text" placeholder="Name" 
          className="mb-2 p-2 w-full border" 
          value={name} 
          onChange={(e) => setName(e.target.value)} 
        />
        <input 
          type="email" placeholder="Email" 
          className="mb-2 p-2 w-full border" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
        <input 
          type="password" placeholder="Password" 
          className="mb-2 p-2 w-full border" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
        <select 
          className="mb-2 p-2 w-full border" 
          value={role} 
          onChange={(e) => setRole(e.target.value)}
        >
          <option value="user">User</option>
          <option value="admin">Admin</option>
        </select>
        <button type="submit" className="w-full bg-green-500 text-white p-2">
          Register
        </button>
      </form>
    </div>
  );
};

export default Register;

pages/Login.jsx - Create a Login form as per our backend requriements.

State Management of required fields.
Accessing the Login Function from AuthContext
Navigation After Successful Login
Handling the Login submission
User Interface

import { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { AuthContext } from "../context/AuthContext";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { login } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await login(email, password);
      navigate("/dashboard");
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <div className="flex justify-center items-center h-screen bg-gray-200">
      <form onSubmit={handleLogin} className="bg-white p-6 rounded shadow-lg">
        <h2 className="text-2xl mb-4">Login</h2>
        <input
          type="email"
          placeholder="Email"
          className="mb-2 p-2 w-full border"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          className="mb-2 p-2 w-full border"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit" className="w-full bg-blue-500 text-white p-2">Login</button>
      </form>
    </div>
  );
};

export default Login;

5.Setup Authentication in frontend using AuthCotext.

The common issues I faced everytime like,

Login persists only on the first login, but logs out on page refresh.
Private routes might not be handling the user state correctly.
The dashboard appears empty after login due to a delay in fetching user data.
Token might not be set correctly before fetching user data.

🔧 Fixed Code

AuthProvider (Fix User Persistence on Refresh)

Importing Required Dependencies
Creating the Authentication Context
-Creates AuthContext, allowing components to access authentication data without prop drilling.
Defining the AuthProvider Component
-This component wraps the entire application, providing authentication state to all components.
Defining the State Variables
-user: Stores authenticated user details.
-token: Stores the authentication token, initially retrieved from localStorage if available.
-loading: Indicates whether authentication actions are in progress (useful for UI handling).

5.Handling Token Changes & User Authentication (useEffect)
-Runs whenever token changes.
-If a valid token exists, it:
Sets the token in Axios headers for all requests.
Calls fetchUser() to get user details.
If no token exists, it:
-Removes the Authorization header.
-Logs the user out by setting user to null.
-Stops loading.

6.Fetching User Details (fetchUser)

7.Handling Login (login function)

8.Handling Logout (logout function)

9.Providing Authentication Context to Components

import { createContext, useState, useEffect } from "react";
import api from "../utils/api";

export const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(localStorage.getItem("token") || "");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    console.log("Token in AuthProvider:", token);

    if (token) {
      api.defaults.headers.common["Authorization"] = `Bearer ${token}`;
      fetchUser();
    } else {
      delete api.defaults.headers.common["Authorization"];
      setUser(null);
      setLoading(false);
    }
  }, [token]);

  const fetchUser = async () => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        console.error("No token found, logging out...");
        logout();
        return;
      }

      console.log("Fetching user with token:", token);
      const { data } = await api.get("/auth/me", {
        headers: { Authorization: `Bearer ${token}` },
      });

      console.log("User fetched successfully:", data);
      setUser(data);
    } catch (error) {
      console.error("Failed to fetch user:", error.response?.data || error.message);
      logout();
    } finally {
      setLoading(false); // ✅ Ensures loading stops
    }
  };

  const login = async (email, password) => {
    try {
      const { data } = await api.post("/auth/login", { email, password });
      setToken(data.token);
      setUser(data.user);
      localStorage.setItem("token", data.token);
      api.defaults.headers.common["Authorization"] = `Bearer ${data.token}`;
    } catch (error) {
      throw new Error(error.response?.data?.message || "Login failed");
    }
  };

  const logout = () => {
    setToken("");
    setUser(null);
    localStorage.removeItem("token");
    delete api.defaults.headers.common["Authorization"];
    setLoading(false); // ✅ Stop loading after logout
  };

  return (
    <AuthContext.Provider value={{ user, token, login, logout, loading }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthProvider;

PrivateRoute (Prevent Redirect on Refresh Before Auth Check) - used to protect routes that require authentication.

import { Navigate } from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "../context/AuthContext";

const PrivateRoute = ({ children }) => { //Represents the protected component/page.
  const { user, loading } = useContext(AuthContext);

  if (loading) return <p>Loading...</p>; // Prevents navigation issues

  return user ? {children} : <Navigate to="/login" />;
};

export default PrivateRoute;

Dashboard (Fix Logout Handling)

import { useContext } from "react";
import { AuthContext } from "../context/AuthContext";

const Dashboard = () => {
  const { user } = useContext(AuthContext);

  if (!user) {
    return <p>Loading...</p>;
  }

  return (
    <div>
        <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
      <h1>Welcome, {user.name}</h1>
      <p>Email: {user.email}</p>
      <p>Role: {user.role}</p>
    </div>
  );
};

export default Dashboard;

App.jsx - Update the main component for setting the frontend routes for navigation.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AuthProvider from "./context/AuthContext";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import PrivateRoute from "./routes/PrivateRoute";
import Register from "./pages/Register";

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/auth/register" element={<Register />} />
          <Route element={<PrivateRoute />}>
            <Route path="/dashboard" element={<Dashboard />} /> 
          </Route>
        </Routes>
      </Router>
    </AuthProvider>
  );
};

export default App;

So, after login the result page of the dashboard will be up like,

Hurray!🎉 We are done with auth based and private route based setup in frontend which is 50% completion of our application.

Let's continue further in upcoming blog post.Reach out in comment section for any queires.

Happy developing!

                      Let's grow together

Stock Management System - Backend Deployment

Reshma Shaik — Sat, 05 Apr 2025 00:03:12 +0000

Hii Guys!

Let's build the additional features that completes the setup as per our task requirements in continution to 👉Backend Setup

Step by step implementation of additional steps.

1. CSV Import/Export for Stock Details

Allowing admin to upload CSV File to add/update the products.
Providing an endpoint to download the current stock data as csv

inorder to perform these steps, create a model and perform actions according to the get and post routes for csv file to store data into the database rather than storageMemory.

CSVFile.js

const mongoose = require("mongoose");

const csvFileSchema = new mongoose.Schema({
    filename: String,
    mimetype: String,
    data: Buffer, // Store the CSV file as binary
    uploadedAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model("CSVFile", csvFileSchema);

create a middleware for csv file in authMiddleware.js

const multer = require("multer");

const storage = multer.memoryStorage(); // Store file in memory as Buffer
const upload = multer({ storage });

module.exports = {upload};

Define route in the server.js inorder to perform the creation of routes and controller actions.
- csvRoutes.js

const express = require("express");
const { importCSV, exportCSV } = require("../controllers/csvController");
const {upload} = require("../middleware/authMiddleware");

const router = express.Router();

router.post("/import-csv", upload.single("file"), importCSV);
router.get("/export-csv", exportCSV);

module.exports = router;

csvController.js

Logic for importing the csv file and storing results in Products file.

const importCSV = async (req, res) => {
    try {
        if (!req.file) {
            return res.status(400).json({ error: "No file uploaded!" });
        }

        // Convert buffer data to stream
        const csvStream = Readable.from(req.file.buffer.toString());

        let products = [];
        csvStream
            .pipe(csv.parse({ headers: true }))
            .on("data", (row) => {
                products.push({
                    name: row["Product Name"], // Mapping CSV column to schema field
                    category: row["Category"],
                    price: parseFloat(row["Price"]), // Ensure numeric value
                    stockQuantity: parseInt(row["Stock Quantity"]), // Ensure integer
                    itemsSold: parseInt(row["Items Sold"]) // Ensure integer
                });
            })
            .on("end", async () => {
                try {
                    await Product.insertMany(products);
                    res.status(200).json({ message: "CSV imported successfully and stored in DB!" });
                } catch (err) {
                    console.error("Error inserting data:", err);
                    res.status(500).json({ error: "Error inserting data" });
                }
            });

    } catch (error) {
        console.error("CSV Import Error:", error);
        res.status(500).json({ error: "Error importing CSV" });
    }
};

Logic for the exporting the products data in the form of csv file.


const exportCSV = async (req, res) => {
    try {
        // Find the most recent CSV file from the database
        const latestFile = await CSVFile.findOne().sort({ uploadedAt: -1 });

        if (!latestFile) {
            return res.status(404).json({ error: "No CSV file found" });
        }

        res.setHeader("Content-Type", latestFile.mimetype);
        res.setHeader("Content-Disposition", `attachment; filename=${latestFile.filename}`);
        res.send(latestFile.data);
    } catch (error) {
        res.status(500).json({ error: "Error exporting CSV" });
    }
};

and export the functions inorder to get referenced to the routes, to perform action with respect to the route.

2. Filters and Sorting on Stock Overview

Implementing query parameters for filtering and sorting stock data.
Define the routes for the analytics in server.js

app.use("/api/analytics", analyticsRoutes);

analyticsRoutes.js

const express = require('express');
const { getStockData, getChartData } = require('../controllers/analyticsController');

const router = express.Router();
router.get('/stock', getStockData); //Fetching stock with filters.

router.get('/chart-data', getChartData);//fetching the data for presenting in chart.


module.exports = router;

Then complete the controller functions to complete the actions to their respective routes.

by requiring the Products model, to the analyticsController.js

functions, 1.Filters Products by Category If a category query parameter is provided (e.g., /stock?category=Fruits), it filters products based on that category.

2.Sorts Products Based on Query Parameters
If sortBy is provided (e.g., /stock?sortBy=price), it sorts the results:
Ascending (asc or default) → order=1
Descending (desc) → order=-1

Example:

/stock?sortBy=price&order=desc → Sorts by price in descending order

3.Finds and Returns Sorted & Filtered Data
Applies filtering (filter) if category is provided.

Applies sorting (sortOptions) if sortBy and order are given.

const getStockData = async (req, res) => {
    try {
        let { category, sortBy, order } = req.query;
        let filter = {};
        let sortOptions = {};

        if (category) filter.category = category;
        if (sortBy) sortOptions[sortBy] = order === "desc" ? -1 : 1;

        const products = await Product.find(filter).sort(sortOptions);
        res.status(200).json(products);
    } catch (error) {
        res.status(500).json({ message: "Error fetching stock data", error });
    }
};

3. Display Charts for Stock Trends and Revenue

analyticsController.js


const getChartData = async (req, res) => {
    try {
        const products = await Product.find();

        const categories = {};
        products.forEach(product => {
            if (!categories[product.category]) {
                categories[product.category] = { totalRevenue: 0, totalSold: 0 };
            }
            categories[product.category].totalRevenue += product.totalRevenue;
            categories[product.category].totalSold += product.itemsSold;
        });

        const chartData = Object.keys(categories).map(category => ({
            category,
            totalRevenue: categories[category].totalRevenue,
            totalSold: categories[category].totalSold
        }));

        res.status(200).json(chartData);
    } catch (error) {
        res.status(500).json({ message: "Error fetching chart data", error });
    }
};

4. Test your backend api

I have tested everyting in here just visit the link for testing the api.

5. Deployment Of Backend API

Create a repository Stock-Management-Api.
Push the code to this repo.
verify my repo to get the code.GithubLink
create vercel.json file in root directory inorder to handle the deployment in vercel.

{
    "version": 2,
    "builds": [
      {
        "src": "server.js",
        "use": "@vercel/node"
      }
    ],
    "routes": [
      {
        "src": "/(.*)",
        "dest": "server.js"
      }
    ]
  }

go to vercel.com create an account and add a new project for deployment.

Select your repo and import it.

Provide the environment variables and path to root directory.

Then click on deploy.

Congratulations! U just deployed your backend API.

Happy Developing.

Let's continue frontend part in upcoming blogs.For any queries reach out in comment section.

Thank You!

                       Let's grow together!

Stock Management System- Backend Setup

Reshma Shaik — Thu, 03 Apr 2025 17:12:00 +0000

Hii Guys!

This blog is the continution to 👉Stock Management System ,Please go through the process

As we set up the basic API end points.Let's move forward to complete the requirements.

Completing the Products Module with all required CURD operations performance in productController

productController.js

Adding a new Product - destructuring the field names to its requested json body, and adding them to the product object then storing them to the database asper the Model defined.

const addProduct = async (req, res) => {
    try {
        const { name, category, price, stockQuantity } = req.body;
        const product = new Product({ name, category, price, stockQuantity, itemsSold: 0 });
        await product.save();
        res.status(201).json({ message: 'Product added successfully', product });
    } catch (error) {
        res.status(500).json({ message: 'Error adding product', error });
    }
};

Fetch all products - find() method applied to the particular model, to fetch all existing products.


const getProducts = async (req, res) => {
    try {
        const products = await Product.find();
        res.status(200).json(products);
    } catch (error) {
        res.status(500).json({ message: 'Error fetching products', error });
    }
};

Update a product - Based on productId retrieving data and modifying the json and then saving the results.


const updateProduct = async (req, res) => {
    try {
        const { id } = req.params;
        const updatedProduct = await Product.findByIdAndUpdate(id, req.body, { new: true });
        if (!updatedProduct) {
            return res.status(404).json({ message: 'Product not found' });
        }
        res.status(200).json({ message: 'Product updated successfully', updatedProduct });
    } catch (error) {
        res.status(500).json({ message: 'Error updating product', error });
    }
};

Delete a Product - by fetching productId and performing action.

const deleteProduct = async (req, res) => {
    try {
        const { id } = req.params;
        const deletedProduct = await Product.findByIdAndDelete(id);
        if (!deletedProduct) {
            return res.status(404).json({ message: 'Product not found' });
        }
        res.status(200).json({ message: 'Product deleted successfully' });
    } catch (error) {
        res.status(500).json({ message: 'Error deleting product', error });
    }
};

Finally export the arrow functions to import in respective routes referenced.

productRoutes.js

const express = require('express');
const { getProducts, addProduct, updateProduct, deleteProduct } = require('../controllers/productController');
const router = express.Router();

router.post('/products', addProduct);
router.get('/products', getProducts);
router.put('/products/:id', updateProduct);
router.delete('/products/:id', deleteProduct);

module.exports = router;

Test these curd operations like we did previously to get these restful API's working correct.

Implementing the Business Logic.

Business Logic - The rules and operations that define how data should be processed according to the business needs.

So, as per our needs we are implementing the business logic under 4conditions satisfying to manage the stock.

Updating the stock when sale happens.
Preventing sales if stock is insufficient.
Calculating total revenue based on sales.
Sending alerts when stock is low.

-> So, to implement above steps.Create a new sales.js route.

const express = require("express");
const { sellProduct } = require("../controllers/productController");

const router = express.Router();
// Endpoint to handle sales
router.post("/sell", sellProduct);
module.exports = router;

-> Now Update the controller function to perform the actions in particular route.


// Sell Product and Update Stock
const sellProduct = async (req, res) => {
    try {
        const { productId, quantity } = req.body; // Get product ID and quantity from request

        // Check if product exists
        const product = await Product.findById(productId);
        if (!product) {
            return res.status(404).json({ message: "Product not found" });
        }

        // Prevent sales if stock is insufficient
        if (product.quantityInStock < quantity) {
            return res.status(400).json({ message: "Insufficient stock available" });
        }

        // Update stock and sales details
        product.quantityInStock -= quantity; // Reduce stock
        product.itemsSold += quantity; // Increase total items sold
        product.totalRevenue += quantity * product.price; // Calculate revenue

        // Save updated product details
        await product.save();

        // Check if stock is low and send an alert (For example, if stock < 5)
        if (product.quantityInStock < 5) {
            console.log(`⚠️ Alert: Stock for ${product.name} is low! Only ${product.quantityInStock} left.`);
            // You can also trigger an email or notification system here
        }

        res.status(200).json({
            message: "Sale successful",
            updatedProduct: product
        });
    } catch (error) {
        res.status(500).json({ message: "Server Error", error: error.message });
    }
};

-> Now to get stock overview, create stock.js route and handle the controller function.

const express = require("express");
const { stockOverview } = require("../controllers/stockController");

const router = express.Router();
// Get stock overview (total items sold and revenue)
router.get("/", stockOverview);

module.exports = router;

stockController.js

const Product = require('../models/Product');

const stockOverview = async (req, res) => {
    try {
        console.log("Stock overview API called"); // Check if API is called

        const products = await Product.find(); // Fetch all products

        let totalItems = 0;
        let totalSold = 0;
        let totalRevenue = 0;
        let soldItems = [];

        products.forEach(product => {
            totalItems += product.quantityInStock || 0;
            totalSold += product.itemsSold || 0;
            totalRevenue += product.totalRevenue || 0;

            if (product.itemsSold && product.itemsSold > 0) { // Ensure condition is met
                soldItems.push({
                    name: product.name,
                    category: product.category,
                    quantitySold: product.itemsSold,
                    revenueGenerated: product.totalRevenue
                });
            }
        });

        res.status(200).json({
            totalItems,
            totalSold,
            totalRevenue,
            soldItems
        });
    } catch (error) {
        console.error("Stock Overview Error:", error.message);
        res.status(500).json({ message: "Server Error", error: error.message });
    }
};


module.exports = {
    stockOverview
};

-> Test this api endpoint to get the required results.

Now that we are done with business logic let's complete our bonus steps.i.e, Authentication, CSV Uploads, filters and sorting on stock overview, Charts for visualizing stock trends and revenue.

3.User Authentication.

Setup User Model models/User.js

1.A MongoDB NoSql schema for data storage and retrieval.Provide all the required fields in the schema so that user model can perform all functionalities.
2.Password Hashing to protect the user credentials in the database.

const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");

const UserSchema = new mongoose.Schema({
    name: { type: String, required: true },
    email: { type: String, required: true, unique: true },
    password: { type: String, required: true },
    role: { type: String, enum: ["admin", "user"], default: "user" }
});

// Hash password before saving
UserSchema.pre("save", async function (next) {
    if (!this.isModified("password")) return next();
    const salt = await bcrypt.genSalt(10);
    this.password = await bcrypt.hash(this.password, salt);
    next();
});

module.exports = mongoose.model("User", UserSchema);

User Registration API controllers/authController.js - a controller function that provides all the fields wrt the user model so as to save the registered details, as per the request sent by the user.A duplicate user check is done before registering and storing to the database.

const User = require("../models/User");

const registerUser = async (req, res) => {
    try {
        const { name, email, password, role } = req.body;

        let user = await User.findOne({ email });
        if (user) return res.status(400).json({ message: "User already exists" });

        user = new User({ name, email, password, role });
        await user.save();

        res.status(201).json({ message: "User registered successfully" });
    } catch (error) {
        res.status(500).json({ message: "Server Error", error: error.message });
    }
};

module.exports = { registerUser };

User Login & JWT Token controllers/authController.js - User Authentication is done by using jsonwebtokens. 1.As per the requested login credentials which are destructured and then email is checked in the database whether it exists or not,if not the response is returned with the status code 500. 2.If user exists ,then password check is done as the password is hashed in the databased it is retrieved to its normal form and compared with the user requested password using bcrypt if no match we get error with status. 3.If there is a match a token is generated from the sign method of jwt.The secret key is used to sign the token to ensure its authenticity, is defined in .env file.

const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const loginUser = async (req, res) => {
    try {
        const { email, password } = req.body;

        const user = await User.findOne({ email });
        if (!user) return res.status(400).json({ message: "Invalid email or password" });

        const isMatch = await bcrypt.compare(password, user.password);
        if (!isMatch) return res.status(400).json({ message: "Invalid email or password" });

        const token = jwt.sign({ id: user._id, role: user.role }, process.env.JWT_SECRET, { expiresIn: "1d" });

        res.json({ token, user: { id: user._id, name: user.name, email: user.email, role: user.role } });
    } catch (error) {
        res.status(500).json({ message: "Server Error", error: error.message });
    }
};

module.exports = { registerUser, loginUser };

add these routes to server.js and test the endpoints to ensure it's working is fine.
Protect Routes with Middleware middleware/authMiddleware.js - To get the authorized access of the particular routes create a middleware based on the token, to allow access after verifying it.

const jwt = require("jsonwebtoken");

const protect = (req, res, next) => {
    const token = req.header("Authorization")?.split(" ")[1];

    if (!token) return res.status(401).json({ message: "Access Denied" });

    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        req.user = decoded;
        next();
    } catch (error) {
        res.status(403).json({ message: "Invalid Token" });
    }
};

module.exports = protect;

use in Routes routes/stockRoutes.js - add the middleware in the routes where you want to perform authorized access.

router.get("/stock-overview", protect, stockOverview);

Role Based Access Control

1.modify authMiddleware.js - create a middleware to specify the Role based access to seperate the user centric functionality.

const adminOnly = (req, res, next) => {
    if (req.user.role !== "admin") {
        return res.status(403).json({ message: "Access denied. Admins only" });
    }
    next();
};

module.exports = { protect, adminOnly };

Use in Admin Routes - here for creating new product admins only has the access, if user tries to access it then access denied message is generated.

const { protect, adminOnly } = require("../middleware/authMiddleware");

router.post("/add-product", protect, adminOnly, addProduct);

Connect routes in routes/userRoutes.js - update the routes ,by providing the respective functionality.

const express = require("express");
const { registerUser, loginUser } = require("../controllers/authController");

const router = express.Router();

router.post("/register", registerUser);
router.post("/login", loginUser);

module.exports = router;

and call this authRoutes in server.js

const userRoutes = require('./routes/userRoutes');
app.use("/api/auth", userRoutes);

test these endpoints to ensure they are working fine.

As the jsonwebtokens provides the authorized access to the routes through middleware which is passed inside the routes that specifies only registered or logged in user is allowed to access the particular route controllers.

When it comes to role based access I have specified the role in User model so that if the logged in user is admin he has his own functionality and that is be differed with user access, which is even specified in the authMiddleware.

Let's complete the further steps in upcoming blog. Reach out in comment section for any queries.
Happy Developing!

                       Let'grow together

Stock Management System - Basic Setup

Reshma Shaik — Thu, 03 Apr 2025 13:09:00 +0000

Hi Guys!

Let's Build a MERN Stack Application from scratch,A Stock Management System as part of this plan let's complete this step by step.

Backend Setup

1.Initialize the project directory and split the folder by creating subfolders as client and server.

And now we complete the server setup.
code along with me in IDE called VSCode.

mkdir stock-management-system && cd stock-management-system
mkdir backend && cd backend
npm init -y

2.After initializing the package.json install the backend dependencies that are required to build our project.

npm install express mongoose dotenv cors jsonwebtoken bcryptjs multer nodemon

3.Maintain a directory structure in this format to address the code with no trouble and to maintain a clear view.

backend/
│── models/
│   ├── Product.js
│   ├── User.js
│── routes/
│   ├── productRoutes.js
│   ├── userRoutes.js
│── controllers/
│   ├── productController.js
│   ├── userController.js
│── middleware/
│   ├── authMiddleware.js
│── config/
│   ├── db.js
│── uploads/
│── .env
│── server.js
│── package.json

4.Start coding

Connect database db.js

const mongoose = require('mongoose');
const connectDB = async () => {
    try {
        const conn = await mongoose.connect(process.env.MONGO_URI, {
            useNewUrlParser: true,
            useUnifiedTopology: true,
        });
        console.log(`MongoDB Connected: ${conn.connection.host}`);
    } catch (error) {
        console.error(`Error: ${error.message}`);
        process.exit(1);
    }
};
module.exports = connectDB;

create model

Product.js

const mongoose = require('mongoose');

const productSchema = mongoose.Schema({
    name: { type: String, required: true },
    category: { type: String, required: true },
    price: { type: Number, required: true },
    stockQuantity: { type: Number, required: true },
    itemsSold: { type: Number, default: 0 },
    description: { type: String }
}, { timestamps: true });

module.exports = mongoose.model('Product', productSchema);

provide routes to specified model

productRoute.js

const express = require('express');
const { getProducts, createProduct } = require('../controllers/productController');
const router = express.Router();

router.get('/', getProducts);
router.post('/', createProduct);

module.exports = router;

perform controller functions to perform actions on routes

productController.js

const Product = require('../models/Product');

exports.getProducts = async (req, res) => {
    const products = await Product.find({});
    res.json(products);
};

exports.createProduct = async (req, res) => {
    const { name, category, price, stockQuantity, description } = req.body;
    const product = new Product({ name, category, price, stockQuantity, description });
    await product.save();
    res.status(201).json(product);
};

set up the server server.js

const express = require('express');
const dotenv = require('dotenv');
const cors = require('cors');
const connectDB = require('./config/db');
const productRoutes = require('./routes/productRoutes');

dotenv.config();
connectDB();

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

app.use('/api/products', productRoutes);

app.listen(5000, () => console.log('Server running on port 5000'));

app.get('/', (req, res) => {
    res.send('API is running...');
}   );  

module.exports = app;

Start the Server

npm start -> as you need to specify under the scripts inside the package.json file as
"start": "nodemon server.js"

If you Got to see the above result your server is live at port 5000.

Test the API

now U are all set to test the api created to implement the basic product specific model and product specific actions inorder to execute and test it using the api testing tools like Thunder Client or the Postman based on your preferences.

I'm using Thunder client which is a VSCode extension, just install and proceed to continue along.

1.Provide a get request http://localhost:5000/

2.Add a product based on model specified using post request.

3.Test the another route we have created, to get all the products.

Explanation

In API Testing of the CURD operations plays a crutial role which are defined in routes i.e. Controllers

to post a product, the server is requesting a json body that is aligned with the model specified fields to be matched, as the client sends the response as described in image 2.

    const { name, category, price, stockQuantity, description } = req.body;

2.The response is printed with status code specified by the user.
res.status(200).json(products);
3.And the get request of getting all the products with find query
const products = await Product.find({});

For any errors U can even get the results in console log to know what is breaking, or U can use the middleware directly to address the errors

app.use((err, req, res, next) => {
    const statusCode = res.statusCode ? res.statusCode : 500;
    res.status(statusCode);
    res.json({
        message: err.message,
        stack: process.env.NODE_ENV === 'production' ? null : err.stack,
    });
}

Don't forget to setup the environment variables, .env file

Hurray!😃 we have completed our basic backned setup!

Let's continue in further in upcoming blog.

Happy Developing!

                     Let's grow together!

MERN Stack Deployment Issue🛠

Reshma Shaik — Sat, 22 Mar 2025 18:14:50 +0000

To resolve this issue! 🤔

It has a simple Solution Go to MongoDB in your Project Find Network Access in security tab ,

Add IP Address
Allow Access From Anywhere
Confirm

The other possible issues might be

Incorrect vercel configuration.
Missing or Incorrect Environment Variables
Memory or Execution Time Limit Exceeded

If still didn't found debug the issue by

1.Check Vercel Logs

Run: vercel logs

Or go to the Vercel Dashboard > Project > Functions > Logs to see detailed errors.

2.Test Locally

Run: vercel dev to test the function before deploying.

3.Redeploy Your Project

Run: vercel --prod to force a fresh deployment.

React if you like it helpful.😊
Happy Developing!

create-react-app❌

Reshma Shaik — Fri, 07 Mar 2025 09:46:13 +0000

As, we all know about the update of the deprecation of create-react-app ,and the documentation itself suggests to go with other popular apps or frameworks!

So, what are your preferences right now? And why do you choose?

Let's listen to people in Comments
Happy developing!

React - MERN Stack

Reshma Shaik — Tue, 04 Mar 2025 17:56:41 +0000

Let's learn and develop along.!😊

Part5

If anyone missed the previous part you can vist from here checkout👈

Today let's understand React from Mern Stack, it's importance in the MERN Stack project.

What is React?

As we know react is a Javascript library which mostly helpful to create UI's for websites, apps etc.

Why React?

As we all know Javascript is the core language which is the foundation for libraries and other frameworks like React.
If we look at the pros and cons of the Javascript

Pros:

1.In the beginning Javascript has large popularity due it's fast responsive behaviour, Versatile nature, simple & lightweight, user friendly, browser supportive, etc.

2.It Works fine for small and medium projects with simple DOM manipulations.

Cons:

1.Hard for DOM manipulation of large and complex projects.

2.unorganized behaviour of code.

So, react is helpful for:

Component based architechture for better code organization and structuring.
Creates a Virtual DOM(Document Object Model) with respect to the actual DOM for handling efficient and fast rendering ,results in better performance.
Due to it's component structure the code is Reusable.
React is best for creating Single Page Application.
React also offers ecosystem of tools like Redux, Node, Flux.

Also React has several Disadvantages which was solved further using Next.Js which is on top of React ,and is on top of Javascript.

So,as we got a glimpse of the working of React Let's start over working with the project.

React Project - MERN Stack.

As we set up the backend and performed the user auth in previous sections.

Now we are creating a new folder in the main directory called client,as react handles all client side information.

press ctrl+and in the client directory and create react app in the current directorynpx create-react-app@latest .` as '.' denotes current directory.

As we get the deprecating warning which tells,

1.Create React App (CRA) is no longer actively maintained.

2.React recommends using Next.js, Remix, or Vite for new projects.

3.go through the link as it provides clear blog post from ur installation, for better understanding about the deprecation.

Despite this, the installation continued.

It provides the scripts to start the react app.So,follow the instruction and run npm start to start the react app locally.

You can see the directory structure of the client with installed nodemodules, scripts and all required dependencies used by react to create the app.

This is how we start working with react.If u want my content as out for faster delivery.Let's develop together.

Happy Developing!

Virtual Environment for Projects🤔- Python

Reshma Shaik — Tue, 04 Mar 2025 08:50:29 +0000

When setting up any project of any technology setting up virtual environment is not necessary.

But for working with python projects I got to know that Setting Up a Virtual Environment is must and necessary step.

Why a Virtual Environment?

It is a containarized isolated enviroment which helps to maintain all the files related to this project like python files, packages, dependencies, installations, configurations etc. and provides a better organization so that, it doesn't interfear in other system settings and other projects.

1.Dependency Management – Each project can have its own isolated dependencies, preventing conflicts between different versions of packages.
2.Avoid System-Level Changes – Installing packages globally can mess up system dependencies or cause issues with other projects.
3.Reproducibility – You can share requirements.txt or pyproject.toml to recreate the exact environment on another machine.
4.Better Organization – Keeps project-specific packages separate, reducing clutter in the global Python environment.

When You might not need one?

When you are working on smaller scripts or a one time task then u might not need it.

How to set up Virtual Environment for Python Projects?

I'm working on a flask project,so to setup the virtual env

1.Go to that folder open with VSCode (IDE of your choice).
2.press ctrl+` to open the terminal.

Now run the command pip install virtualenv

To create a virtual environment run virtualenv env

or run the command python -m venv venv

then activate it run venv\Scripts\activate

You can see(venv) is set before the path,which specifies virtual environment is set to your directory.
Then install your required dependencies which you want to work with.
pip install -r requirements.txt
It is simple but effectively important.Do,not miss this step if did then face the complications.

Reach out for any content you are looking for and help me improve my developing skills.let's learn and innovate together.Please do react and make me understand my content was satisfactory.😊

Happy developing!

Python Version Setup

Reshma Shaik — Tue, 04 Mar 2025 06:57:23 +0000

To see the updated python version in commandline after installing the latest version of python from official website, after setting up into your system.

1.Open the commandline or powershell to check for the updated version, and type python --version
2.if you see the latest version as a result then you are good to go.
3.But, if u see the result as previous version even after installing the latest version successfully like-

if u have previously 3.10 version and u want to update to latest like 3.13 and ur set up was done successfully by installing to ur system.
and when u verify the version ur getting same previous one which should not.
we will fix this by positioning the path from evironment variables. 4.Open environment variables to check whether it is added to the path or not
Press windows+R and type sysdm.cpl and hit enter.
Go to advanced and Select Environment Variables

then go to System Variables and select path and click on edit and see if the path was there or not

After selecting if u see there is a path see the position and select the python313 and its scripts, moveup to the top

Hit ok and Now exit the cmd and open again.
Now check python --version You will get the updated version

You are good to go Now.

Happy Developing!

The journey-Confused❌Organized✔️

Reshma Shaik — Sat, 01 Mar 2025 18:21:06 +0000

Hello World .!Before starting ,Let me ask you something..

Are u confused in choosing your techstack or ur organized in ur path?comment down below😊Let's see how may want to know how to be organized.

Most of the 50% engineers are confused to select the role to select as their job like me.
-It's not wrong ,eitherways they get most of the oppurtunities to select and move forward accordingly.
And it is organized when you are consistant in whatever tech stack you are following ,And surely connections are important to help you out interms of fixing things .
What works more is the time and consistancy, If you are perfect in this then you are good to go.
Don't skip things in trying something new whether it may leave you bugs all day .But what it leaves you is the knowledge behind solving those bugs easily for rest.

Y companies ask for the experience for freshers??

Most of us react like ...without joining any company how can get any kind of experience.?🙄Right?Yeah, But this tells them ur unique behaviour and the intrest towards this field by putting u different from other applicants.
So,Try! not hard but smarter.Smart enough to adapt things easily.

Now that if ur intrested let's go further!😁

If you have started a particular course which involves multiple new stuff and if you pic one ,it has it's own story?for example:

Full Stack Development

As this is involved with various stack ultimately results in developing a production ready application.
if you pick java it has it's story ,and if it's js it's linked with different pillars like Node, React ,so on and so forth...

what u need to understand here is the main pillar.In my case

Javascript

A scripting language which provides a dynamic view to the web applicaitions.And the frameworks ,libraries are built on it,to work with it's scalability, redundant application and performace factor.
Documentation is the 1st priority and based on that topic we see different experts try to help us understand its functioning so explore them as per ur needs.If you find the things are getting repeated again again,then think of it as important.
What the pitfalls would be is you will fail in implementing it,or simply the app yells at you in your 1st build not once but may be many times.

But think this no one can dislike you forever,so do an application?which is built by you ?No right!

So if done ,you will get the satisfaction of you achieved something.And you will get a story to share amoung.Yes!This sounds crazy about developing.

Happy Developing!Just smile and startover.

Connecting AI Agent with UI - State Management🧩

Reshma Shaik — Fri, 28 Feb 2025 19:16:04 +0000

Image Generation In Next.js application.

From your UI based on your prompt message the copilot agent going to generate the image in your desired location.🤨

Thinking how? If so,let's dive in :)

Hello World! 😀
How are you all doing?Hoping everything is fine!😉So,Today let's dive in with my new stuff which i'm excited to share and if ur intrested u can try along.!👌
As the title of my post describes about ** AI Agent ** and copilotkit.

What are these..?Suddenly Y I ended up connecting these things? Yes,I got the same question when I was doing,But this is fascinating experience where, letting ai agent connect with us and do stuff which we specify with my little document knowledge itself made me more intrested in diving more deeper.

I love this evolution, where there is continues growth!Unlike getting stuck in building and recovering things from bugs and bugs and bugs..😓 through the entire day,which is literally a hopeless experience .And this exciting experience journey.I'm thankful to see such a drastic change in me aswell.Hahahhaa..its quite a story right? I know !😅

In my view CopilotKit works more efficient and smooth than tools like assistant-ui and open-canvas.

What we will walk through here is ,assuming that you are connected to to your nextjs applicaiton with copilot kit if not it's a simple step go through the documentation you will find the selfhosting part or copilot cloud, based on your preference go through it.And set things up like choosing amoung:

CopilotPopup
CopilotSidebar
CopilotChat
Headless UI I'm working with CopilotkitSidebar.

Unsplash Account - it's free
Now to generate images based on your prompts, create an account in unsplash, and create your new application and access api key token to fetch the images through url, which hepls to generate images based on the url encoding, which will be handled through the state management.

ConnectData.tsx

Create a new component in your next.js application.

Here we use 2 hooks, useCopilotReadable(), useCopilotAction() from @copilotkit/react-core library.

useCopilotReadable
This hook helps to read the state from the UI.
Example:
useCopilotReadable({
    description: "User-provided prompt when Copilot cannot generate an image",
    value: imagePrompt,
  });
as the default library provides the hook with different parameters described.

useCopilotAction
This hook helps to write state to the UI.

define the component which you want to display

for example:

export default function ConnectData() {

  return(
    <div>
      <h2>AI Image Generator</h2>
      <div>
        <input
          type="text"
          placeholder="Describe an image..."/>
        <button>Save Prompt</button>
      </div>
     <div>
            <p>Prompt:</p>
            <img src={} alt="Generated"/>
     </div>
        ))}
      </div>
    </div>
}

Now, to handle states from UI ,I declared 3 useState() hooks.

//for image output
 const [images, setImages] = useState<ImageObject[]>([]);
//for prompt input
  const [imagePrompt, setImagePrompt] = useState<string>("");
//for highlight input
  const [needsUserInput, setNeedsUserInput] = useState(false);

update the UI state handlers and the display in the return component with preferred tailwindCSS.

return (
    <div className="p-6">
      <h2 className="text-2xl font-semibold">AI Image Generator</h2>

      {/* ✅ Input box is ALWAYS visible, but highlights when needed */}
      <div
        className={`flex flex-col items-center bg-white p-6 rounded-lg shadow-lg w-96 border 
        ${needsUserInput ? "border-red-500 shadow-red-300" : "border-gray-300"}
        transition-all duration-300`}
      >
        <input
          type="text"
          placeholder="Describe an image..."
          value={imagePrompt}
          onChange={(e) => setImagePrompt(e.target.value)}
          className={`w-full p-3 border rounded-md focus:outline-none text-gray-700 shadow-sm
          ${needsUserInput ? "border-red-500 focus:ring-2 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500"}
          transition-all duration-300`}
        />

        <button
          onClick={() => setNeedsUserInput(false)}
          className="mt-4 px-6 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 transition-all duration-200"
        >
          Save Prompt
        </button>
      </div>

      {/* ✅ Display generated images */}
      <div className="mt-5 flex flex-wrap gap-4">
        {images.map((img) => (
          <div key={img.id} className="border p-3 rounded-lg shadow-md">
            <p className="font-semibold">Prompt: {img.prompt}</p>
            <img src={img.url} alt="Generated" className="w-48 rounded-md" />
          </div>
        ))}
      </div>
    </div>
  );

reading input from the ui by copilotkit

  // ✅ Log state changes when CopilotKit requires input
  useCopilotReadable({
    description: "User-provided prompt when Copilot cannot generate an image",
    value: imagePrompt,
  });

fetching images from the unsplash

 // ✅ Function to fetch an image based on the user's prompt
  const fetchImageByPrompt = async (prompt: string): Promise<ImageObject | null> => {
    try {
      const response = await fetch(`https://source.unsplash.com/featured/?${encodeURIComponent(prompt)}`);
      return { id: crypto.randomUUID(), url: response.url, prompt };
    } catch (error: unknown) {
        if(error)
        {
            console.log(error);
        }else{
            console.log("unknown error occured");
        }

      return null;
    }
  };

returning user specific output

// ✅ Copilot Action: Generates image, keeps input field intact
  useCopilotAction({
    name: "generateImage",
    description: "Generate an image based on a user's description",
    parameters: [],
    handler: async () => {
      if (!imagePrompt.trim()) {
        setNeedsUserInput(true);
        console.log("CopilotKit: Needs user input for prompt.");
        return "I need a description to generate an image. Please enter one.";
      }

      const newImage = await fetchImageByPrompt(imagePrompt);

      if (!newImage) {
        setNeedsUserInput(true);
        console.log("CopilotKit: Image generation failed, requesting new input.");
        return "I couldn't generate an image. Please provide a new prompt.";
      }

      setNeedsUserInput(false);
      setImagePrompt(""); // Reset the prompt after successful generation
      setImages((prevImages) => [...prevImages, newImage]);
      console.log("CopilotKit: Image generated successfully.");
      return `Generated an image for: "${imagePrompt}"`;
    },
  });

from the above steps if you add this component to your main page it looks like this.

And if you check your console log and you can test it's state management , starting from reading input ,fetching images, generating results everything can be kept track.

If not attempted the prompt and asked copilotkit to generate image it triggers the ui component in highlight state, which uses
our boolean highlight input hook.
If entered proper prompt, the state is updated when we click on the save prompt that triggers the copilotAction to respond to the prompt when user types generate image in the chat,which results in creating the result in our specified location.
U can either check the console.

Doesn't this interaction with AI Agent represents Developer mode UI-Agent Interaction.😄I did enjoyed writing this.What about you.Share your expreriences, queries or anything else in comment section.
I'd love to reach out.
Happy developing.Bye bye!

DEV Community: Reshma Shaik

Stock Management System - Frontend

1. Create a Dashboard page pages/Dashboard.jsx

2. components/ProductManagement.jsx

3. Stock Overview Component components/StockOverview.jsx

4. Analytics Component components/Analytics.jsx

5. Landing Page pages/LandingPage.jsx

Happy Developing🎉

Frontened Setup🛠 - Stock Management System

Stock Management System - Backend Deployment

Happy Developing.

Stock Management System- Backend Setup

Stock Management System - Basic Setup

Backend Setup

MERN Stack Deployment Issue🛠

create-react-app❌

So, what are your preferences right now? And why do you choose?

React - MERN Stack

Part5

React Project - MERN Stack.

Virtual Environment for Projects🤔- Python

Python Version Setup

The journey-Confused❌Organized✔️

Connecting AI Agent with UI - State Management🧩

ConnectData.tsx

1. Create a Dashboard page `pages/Dashboard.jsx`

2. `components/ProductManagement.jsx`

3. Stock Overview Component `components/StockOverview.jsx`

4. Analytics Component `components/Analytics.jsx`

5. Landing Page `pages/LandingPage.jsx`