DEV Community: Navin Yadav

Story of me and my computer

Navin Yadav — Sat, 14 Feb 2026 06:46:54 +0000

In this post i am going to write my story about my computer basically how i seem it's first and how currently i am doing it with. this is not a tech blog just a story of me and my computer.

So let's me start from begining I saw computer first time when i am studing in second classs during those day computer is new to our school basically i live in India study in a private school where they take 12,000 rupees per year for just computer class that only run for 1 hour in 1 week only. so i remember that time when all the standard class have 1 hour period of computer classes and the 1 hour is divided in to 30 min each because we have some around 10 computer and student capacity is 30 so 15 goes in first half and next 15 goes on second half and i also remember that we need to share those computer with our partner basically two student will seat on single computer and we both play or run the computer. in the first half teacher will introduce some basic concept related to hardware and software like this is monitor, keyboard,mouse etc.

I also remember that i actually think this is a real mouse(living mouse) human try to catch them and kill them for attaching to our pc thank god i came to know that's not true we have given a slim book title called intro to computer,basic of computer,computer u need to know,those are around 20 pages book that also we never read we only wanted to see those machine and wanted to run them with games.

in next year we taught power point, the whole year round around ms-power point and nothing else. I also remember their is a guy called raja in our class he has computer in his home so when ever we stuck at somepoint we ask him and he used to guide us.
He also brought a pendrive with some mini game install init and we used to some how install them on the pc and play with them with hiding from teacher at that time we run with window xp in our computer.
Next year teacher introduce execel the whole year on execel everything was fun we friend also teaches me some software like power-point, word, etc

One more thing that when i am in my 8 standard many computer classes started opening there basically you pay fees around 1,000rs -12,000rs they will teach you courses from basic computer to execel to tally to coding software developement touch typing, video editing many thing's. my friend join a computer classes for basic of computer he said me this and show me thier notes they also give you notes for studing so my friend make a copy from zerox shop and bring one for me honestly speaking i look that once and kept it in my notes section after one year i saw those notes again and completed it without fail (only read them) In that notes the history of the computer is writter the calculation of storage is written means bits,bytes,mb,gb etc and what you can do with your computer.

when i go in 9 class i saw same computer lab with some new computer replace them and new os window 7 and i didn't know about os update software update etc. when i completed my 10 standard i go to new school in that they used to take 20,000 for a computer subject basically you have a option between two subject if you want to learn computer you need to pay 20k rs or take hindi which is kind of free. so took computer subject in that we introuduce some basic of computer subject and computer network(hardware part in theoritical knowledge) and some coding (that two with html,css,js only) super basic. and let me tell you one thing that this is around 2017 -2019 and in india this is a new thing currently we are living in age of ai that's the whole diffrent case.

so countinue with this when i first time came to new school computer lab the lab was big i first time the lab is square in shape and there are around 44 computer with a big projecter we all get a individual computer and we learn there html,css and at time the school has install a window 10 and i am like this is new even at this point i didn't knew about various os version so after some time i became comfortable. i complete my 11 and 12 standard and i take my studies in computer only
I go to my college Where i took this bscit and this course cost me around 2,00,000rs let me write those subject that they teaches me intro to programming,data bases,computer network,python,java,c,c++,web development,mongodb etc.

As you can see this is more like a computer student study.and one more thing when i first enter in class i saw new window os window 11 then i also thaught this is something new i again got confident with this os and some how pass the college.

I also remember 2 oct 2021 i told my father i need a computer for my study and my father brought one on that same day. He manage some how money and given me we go to lamington road and my father brought dell monitor gigabyte mother board ,intel gold pentium processor which cost around 25,000rs and 5,000rs gst total 30,000rs. we brought that computer in home and run them i learn python,js,c etc thing.

During those process today i came to know that i lost in between i didn't did anything which i can proud of my self but here i am will try hard and make my self proud.

HTML starter

Navin Yadav — Wed, 11 Feb 2026 13:20:05 +0000

Let's me start a series with name of starter. In this series I am going to write all my learing of web dev Everything that i know till 2026 as a Dev i am really exited to start to seires let's go.
In today starter we are going to see html from basic to intermediate let's go.

just install vscode and one extention called live server and you are good to go.

HTML

HTML stands for Hyper text markup language.
It describe the structure of the web.
It tells the browser how to display the content(text,image,video,audio etc)

In html we have something called element <tagname>your contenct</tagname> so this is an example of element
element start from tag and end with closing tag and in between their is a content

just copy paste this and right on open with live server

index.html

<!DOCTYPE html>
<html>
<head>
<title>your title goes here</title>
</head>
<body>

<h1>Heading content</h1>
<p>paragraph content.</p>

</body>
</html>

you just saw your website on your browser congratulations 🎊.Now let's learn what those tag suppose to mean step by step.

<!DOCTYPTE html> start of html file for declaring this document is an html5 document
<html> this is a root element of html
<head> this contain meta information of the html
<title> by using this you can give title to your web page
<body> all the visible content are written inside this body tag
<h1> this gives heading to your web page
`

this is a paragraph tag as the name suggest this use to give paragraph to your web page.

now let's see variation of heading tag
cpy this
html

Example of h1 tag

Example of h2 tag

Example of h3 tag

Example of h4 tag

Example of h5 tag

Example of h6 tag

so the above example tell that heading come from h1 to h6 and were do we use them? we use for the ranking our website one tip use only one h1 tag for best ranking your website.

HTML Attributes

html attributes provides addition information about the element.

`html <a href='https://www.w3schools.com/'>w3School home page</a> `
we uses href attribute of a tag anchor tag on click on w3School you will redirect to w3school page.by they way this is a super cool and helpful website out their for learning web dev.

`html <p style="color: red;">paragraph with red color</p> `

as you can see we uses style attribute to give red color to our paragraph tag this style attribute is also called inline styling.

what if you want to add images in your website for this <img> tag came in picture let's see example

`html <img src='https://avatars.githubusercontent.com/u/114822499?v=4&size=64' height='150' width='150' alt='navin image' /> `

above is my github profile image 😊.

if the image will not load in browser then the alt value will show in browser also useful for semantic purpose.
height attribute is used to define the height of the image
width attribute is used to define the width of the image.

list in html

In html you can create two kind of list ordered list and unordered list
see example

`html

My todo in order list format

Write blog on css
go for a jogging
Publish a yt video on how to use zustand in react project

My Grocerry item in unorder list format

1 kg Onion
1 kg Tomato
500 gms Paneer

above is the example of order list where i mention my todo list and below is the example of unorder list where i wrote abot my grocerry list item.

How i Create a dashboard

Navin Yadav — Tue, 10 Feb 2026 14:13:05 +0000

In this post i am going to write how i create a Dashboard with react,tailwind,recharts,tanstack table.
See If you want to create a Dashboard or want to learn how to create one this is a perfect post for you.

live project link
https://eclectic-crostata-422732.netlify.app/
This is publish in netlify cannot say how long it will active because it on free tier

code link (github link)
https://github.com/naviny058/dashb

Table with TanStack Table
Let me tell you one thing that Dashboard are everywhere for eg :- for Admin - Admin Dashboard,User - User Dashboard, Manager - Manger Dashboard.

Suppose their are lot's of info like All Products, Total Orders,Active User, Daily sales. and for checking those data you are visited differenct page but what if all those data came under one roof what if you can see them in chart or graph or some kind of table isn't it amazing. this problem solve dashboard. So let's create one.

First of all setup your react app with help of vite and also install tailwind. Don't worry this is not a big task you can easily go to tailwind website and search setup with vite react and you can go.

Tech we will use

Recharts for Displaying Charts
tanstack-table for Displaying Table
React Router for Navigation

So for implementing Dashboard we need some data that data comes from backend or mock data we are going to use data just copy paste this

{
  "stats": {
    "totalUsers": 12450,
    "activeUsers": 3890,
    "monthlyRevenue": 842300,
    "conversionRate": 3.8,
    "growth": {
      "users": 12.4,
      "revenue": 8.9,
      "orders": -2.1
    }
  },

  "revenueOverTime": [
    { "month": "Jan", "revenue": 52000 },
    { "month": "Feb", "revenue": 61000 },
    { "month": "Mar", "revenue": 58000 },
    { "month": "Apr", "revenue": 72000 },
    { "month": "May", "revenue": 81000 },
    { "month": "Jun", "revenue": 95000 },
    { "month": "Jul", "revenue": 102000 },
    { "month": "Aug", "revenue": 110000 }
  ],

  "usersOverTime": [
    { "date": "2025-01-01", "users": 1200 },
    { "date": "2025-02-01", "users": 1800 },
    { "date": "2025-03-01", "users": 2600 },
    { "date": "2025-04-01", "users": 3400 },
    { "date": "2025-05-01", "users": 4200 },
    { "date": "2025-06-01", "users": 5100 }
  ],

  "revenueByCategory": [
    { "category": "Subscriptions", "value": 55 },
    { "category": "One-time Purchases", "value": 25 },
    { "category": "Ads", "value": 15 },
    { "category": "Affiliates", "value": 5 }
  ],

  "trafficSources": [
    { "source": "Organic", "visits": 4200 },
    { "source": "Paid Ads", "visits": 2800 },
    { "source": "Social Media", "visits": 1900 },
    { "source": "Referral", "visits": 1100 }
  ],

  "recentOrders": [
    {
      "id": "ORD-1001",
      "customer": "Amit Sharma",
      "email": "amit@example.com",
      "amount": 4999,
      "status": "completed",
      "date": "2025-02-01"
    },
    {
      "id": "ORD-1002",
      "customer": "Neha Verma",
      "email": "neha@example.com",
      "amount": 1999,
      "status": "pending",
      "date": "2025-02-02"
    },
    {
      "id": "ORD-1003",
      "customer": "Rahul Mehta",
      "email": "rahul@example.com",
      "amount": 2999,
      "status": "failed",
      "date": "2025-02-02"
    },
    {
      "id": "ORD-1004",
      "customer": "Priya Singh",
      "email": "priya@example.com",
      "amount": 9999,
      "status": "completed",
      "date": "2025-02-03"
    }
  ],

  "usersTable": [
    {
      "id": "USR-001",
      "name": "Amit Sharma",
      "email": "amit@example.com",
      "role": "Admin",
      "status": "active",
      "lastLogin": "2025-02-07"
    },
    {
      "id": "USR-002",
      "name": "Neha Verma",
      "email": "neha@example.com",
      "role": "User",
      "status": "inactive",
      "lastLogin": "2025-01-29"
    },
    {
      "id": "USR-003",
      "name": "Rahul Mehta",
      "email": "rahul@example.com",
      "role": "Manager",
      "status": "active",
      "lastLogin": "2025-02-06"
    }
  ],

  "notifications": [
    {
      "id": 1,
      "type": "warning",
      "message": "Server CPU usage is above 80%"
    },
    {
      "id": 2,
      "type": "success",
      "message": "New user registered successfully"
    },
    {
      "id": 3,
      "type": "error",
      "message": "Payment gateway timeout detected"
    }
  ]
}

We are going to follow this folder structure for making our life easier
src/ │ ├── components/ │ ├── ui/ │ ├── layout/ │ ├── pages/ │ └── Dashboard.jsx │ ├── data/ │ └── dashboardData.json │ ├── hooks/ │ ├── lib/ │ ├── App.jsx ├── main.jsx └── index.css

src/pages/Dashboard.jsx

import data from "../data/dashboardData.json";

export default function Dashboard() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold text-slate-800">
        Dashboard
      </h1>

      <pre className="mt-6 bg-slate-900 text-green-400 p-4 rounded-lg overflow-auto">
        {JSON.stringify(data.stats, null, 2)}
      </pre>
    </div>
  );
}

Import the Dashboard in App.js file

import Dashboard from "./pages/Dashboard";

export default function App() {
  return (
    <div className="min-h-screen bg-slate-100">
      <Dashboard />
    </div>
  );
}

run your vite code and see if you can see the stats data on your browser then congratulations you have seen your data stats info now let's start our actual Dashboard implementation.

Stat Cards

Now let's create a Card for showing some Data to our user
src/components/ui/StatCard.jsx

export default function StatCard({ title, value, subtitle, trend }) {
  const isPositive = trend >= 0;

  return (
    <div className="rounded-xl bg-white p-6 shadow-sm border border-slate-200">
      <p className="text-sm font-medium text-slate-500">
        {title}
      </p>

      <h2 className="mt-2 text-3xl font-bold text-slate-900">
        {value}
      </h2>

      {subtitle && (
        <p className="mt-1 text-sm text-slate-500">
          {subtitle}
        </p>
      )}

      {trend !== undefined && (
        <p
          className={`mt-4 text-sm font-medium ${
            isPositive ? "text-emerald-600" : "text-rose-600"
          }`}
        >
          {isPositive ? "▲" : "▼"} {Math.abs(trend)}%
        </p>
      )}
    </div>
  );
}

let's import this StatCard and use in our project
src/pages/Dashboard.jsx

import data from "../data/dashboardData.json";
import StatCard from "../components/ui/StatCard";

export default function Dashboard() {
  const { stats } = data;

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold text-slate-800">
        Dashboard
      </h1>

      {/* Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatCard
          title="Total Users"
          value={stats.totalUsers.toLocaleString()}
          trend={stats.growth.users}
        />

        <StatCard
          title="Active Users"
          value={stats.activeUsers.toLocaleString()}
          subtitle="Currently online"
        />

        <StatCard
          title="Monthly Revenue"
          value={`₹${stats.monthlyRevenue.toLocaleString()}`}
          trend={stats.growth.revenue}
        />

        <StatCard
          title="Conversion Rate"
          value={`${stats.conversionRate}%`}
          trend={stats.growth.orders}
        />
      </div>
    </div>
  );
}

Sidebar + Header Layout

See If you have seen Dashboard then you must seen those Sidebar and Header in almost every Dashboard so let's create one.

src/components/layout/SideBar.jsx

export default function Sidebar() {
  return (
    <aside className="w-64 bg-slate-900 text-slate-100 flex flex-col">
      <div className="px-6 py-4 text-xl font-bold border-b border-slate-800">
        MyDashboard
      </div>

      <nav className="flex-1 px-4 py-6 space-y-2">
        <button className="w-full text-left px-4 py-2 rounded-lg bg-slate-800">
          Dashboard
        </button>
        <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-slate-800">
          Users
        </button>
        <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-slate-800">
          Orders
        </button>
        <button className="w-full text-left px-4 py-2 rounded-lg hover:bg-slate-800">
          Settings
        </button>
      </nav>
    </aside>
  );
}

Header

src/components/layout/Header.jsx

export default function Header() {
  return (
    <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6">
      <h2 className="text-lg font-semibold text-slate-800">
        Dashboard Overview
      </h2>

      <div className="flex items-center gap-4">
        <span className="text-sm text-slate-600">
          Hello, Admin
        </span>
        <div className="h-8 w-8 rounded-full bg-slate-300" />
      </div>
    </header>
  );
}

Now wrap those around Dashboard

src/components/layout/DashboardLayout.jsx

import Sidebar from "./Sidebar";
import Header from "./Header";

export default function DashboardLayout({ children }) {
  return (
    <div className="min-h-screen flex bg-slate-100">
      <Sidebar />

      <div className="flex-1 flex flex-col">
        <Header />

        <main className="flex-1 p-6 overflow-y-auto">
          {children}
        </main>
      </div>
    </div>
  );
}

Wrap Dashboard page with Layout

src/pages/Dashboard.jsx

import data from "../data/dashboardData.json";
import StatCard from "../components/ui/StatCard";
import DashboardLayout from "../components/layout/DashboardLayout";

export default function Dashboard() {
  const { stats } = data;

  return (
    <DashboardLayout>
      <div className="space-y-6">
        {/* Stat Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <StatCard
            title="Total Users"
            value={stats.totalUsers.toLocaleString()}
            trend={stats.growth.users}
          />

          <StatCard
            title="Active Users"
            value={stats.activeUsers.toLocaleString()}
            subtitle="Currently online"
          />

          <StatCard
            title="Monthly Revenue"
            value={`₹${stats.monthlyRevenue.toLocaleString()}`}
            trend={stats.growth.revenue}
          />

          <StatCard
            title="Conversion Rate"
            value={`${stats.conversionRate}%`}
            trend={stats.growth.orders}
          />
        </div>
      </div>
    </DashboardLayout>
  );
}

Let's Add Charts using Recharts

npm install recharts

create Two file

components/ └── charts/ ├── RevenueLineChart.jsx └── RevenuePieChart.jsx

src/components/charts/RevenueLineChart.jsx

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid
} from "recharts";

export default function RevenueLineChart({ data }) {
  return (
    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
      <h3 className="text-lg font-semibold text-slate-800 mb-4">
        Revenue Over Time
      </h3>

      <div className="h-72">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="month" />
            <YAxis />
            <Tooltip />
            <Line
              type="monotone"
              dataKey="revenue"
              strokeWidth={3}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

src/components/charts/RevenuePieChart.jsx

import {
  PieChart,
  Pie,
  Tooltip,
  ResponsiveContainer
} from "recharts";

export default function RevenuePieChart({ data }) {
  return (
    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
      <h3 className="text-lg font-semibold text-slate-800 mb-4">
        Revenue Distribution
      </h3>

      <div className="h-72">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={data}
              dataKey="value"
              nameKey="category"
              outerRadius={100}
              label
            />
            <Tooltip />
          </PieChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

Use charts in Dashboard Page

src/pages/Dashboard.jsx

import data from "../data/dashboardData.json";
import StatCard from "../components/ui/StatCard";
import DashboardLayout from "../components/layout/DashboardLayout";
import RevenueLineChart from "../components/charts/RevenueLineChart";
import RevenuePieChart from "../components/charts/RevenuePieChart";

export default function Dashboard() {
  const { stats, revenueOverTime, revenueByCategory } = data;

  return (
    <DashboardLayout>
      <div className="space-y-6">
        {/* Stat Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <StatCard
            title="Total Users"
            value={stats.totalUsers.toLocaleString()}
            trend={stats.growth.users}
          />
          <StatCard
            title="Active Users"
            value={stats.activeUsers.toLocaleString()}
            subtitle="Currently online"
          />
          <StatCard
            title="Monthly Revenue"
            value={`₹${stats.monthlyRevenue.toLocaleString()}`}
            trend={stats.growth.revenue}
          />
          <StatCard
            title="Conversion Rate"
            value={`${stats.conversionRate}%`}
            trend={stats.growth.orders}
          />
        </div>

        {/* Charts */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <RevenueLineChart data={revenueOverTime} />
          </div>
          <RevenuePieChart data={revenueByCategory} />
        </div>
      </div>
    </DashboardLayout>
  );
}

Now you can see two beautiful charts one Line chart and second Pie chart both use in Dashboard.

table-with-tanStack-table

Now let's implement Table with the help of Tanstack Table

npm install @tanstack/react-table

create a file OrderTable.jsx inside table folder

components/ └── table/ └── OrdersTable.jsx

src/components/table/OrdersTable.jsx

import {
  flexRender,
  getCoreRowModel,
  useReactTable
} from "@tanstack/react-table";

export default function OrdersTable({ data, columns }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel()
  });

  return (
    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
      <div className="p-6 border-b border-slate-200">
        <h3 className="text-lg font-semibold text-slate-800">
          Recent Orders
        </h3>
      </div>

      <table className="w-full text-sm">
        <thead className="bg-slate-50 border-b border-slate-200">
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th
                  key={header.id}
                  className="px-6 py-3 text-left font-medium text-slate-600"
                >
                  {flexRender(
                    header.column.columnDef.header,
                    header.getContext()
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>

        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr
              key={row.id}
              className="border-b border-slate-100 hover:bg-slate-50"
            >
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} className="px-6 py-4 text-slate-700">
                  {flexRender(
                    cell.column.columnDef.cell,
                    cell.getContext()
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

create ordercolumns

src/components/table/OrderColumns.jsx
this will help in send the columns data inside table

export const orderColumns = [
  {
    header: "Order ID",
    accessorKey: "id"
  },
  {
    header: "Customer",
    accessorKey: "customer"
  },
  {
    header: "Email",
    accessorKey: "email"
  },
  {
    header: "Amount",
    accessorKey: "amount",
    cell: info => `₹${info.getValue().toLocaleString()}`
  },
  {
    header: "Status",
    accessorKey: "status",
    cell: info => {
      const status = info.getValue();

      const styles = {
        completed: "bg-emerald-100 text-emerald-700",
        pending: "bg-amber-100 text-amber-700",
        failed: "bg-rose-100 text-rose-700"
      };

      return (
        <span
          className={`px-3 py-1 rounded-full text-xs font-medium ${styles[status]}`}
        >
          {status}
        </span>
      );
    }
  },
  {
    header: "Date",
    accessorKey: "date"
  }
];

finally impelment in Dashboard.jsx

import data from "../data/dashboardData.json";
import StatCard from "../components/ui/StatCard";
import DashboardLayout from "../components/layout/DashboardLayout";
import RevenueLineChart from "../components/charts/RevenueLineChart";
import RevenuePieChart from "../components/charts/RevenuePieChart";
import OrdersTable from "../components/table/OrdersTable";
import { orderColumns } from "../components/table/orderColumns";

export default function Dashboard() {
  const {
    stats,
    revenueOverTime,
    revenueByCategory,
    recentOrders
  } = data;

  return (
    <DashboardLayout>
      <div className="space-y-6">
        {/* Stat Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <StatCard title="Total Users" value={stats.totalUsers.toLocaleString()} trend={stats.growth.users} />
          <StatCard title="Active Users" value={stats.activeUsers.toLocaleString()} subtitle="Currently online" />
          <StatCard title="Monthly Revenue" value={`₹${stats.monthlyRevenue.toLocaleString()}`} trend={stats.growth.revenue} />
          <StatCard title="Conversion Rate" value={`${stats.conversionRate}%`} trend={stats.growth.orders} />
        </div>

        {/* Charts */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <RevenueLineChart data={revenueOverTime} />
          </div>
          <RevenuePieChart data={revenueByCategory} />
        </div>

        {/* Orders Table */}
        <OrdersTable
          data={recentOrders}
          columns={orderColumns}
        />
      </div>
    </DashboardLayout>
  );
}

so finally you implement Table also in your Dashboard.

If you can manage to make this till here then congratulation you are serious for your Journey 🎉

My plan for 2026.

Navin Yadav — Sat, 17 Jan 2026 21:49:35 +0000

In this post i am writing my 2026 resolution I know it's 11 Jan but as i working on my goal then i just thought why not give it shape of blog so here we are.

What i am going to do.

Become a good backend dev
better my frontend skills
create digital presence
start a tech youtube channel
read a lot tech blog's
complete a book by writing my journey

so today is 18 jan and oh man i don't have a word of disiciple in my life i thought i will write this mini blog and post on next day but OMG i am too irresponsible. But that it i need to develop (desiciple) this only in my life. and i am keep going to update my journey at least one blog in one month i Promise.

StateFul and StateLess System

Navin Yadav — Wed, 07 Jan 2026 07:45:21 +0000

In this Post we will understand stateful as well as stateless system write some code and understand thieir benefit

Here is the repo for both stateful and stateless code
auth repo

Theory

1. StateFul System.
stateful system remember past interaction by storing state across all request.server store state

Advantage.
Simple Client Logic

Disadvantage
Hard to scale
Server must manage session

2. StateLess System
stateLess system treat each request completely independent.It doesn't know anythin about previous interaction. user need to send info by tokens.tokens are store from client side eg. inside cookies

Advantage.
High Scalability
Fault tolerance

Disadvantage
Repeated data sent every time.

practical
In this practical section we are going to use express,mongoose for our practical

First of all initialize npm then add package
express - for creating server
nodemon - for restarting server everytime any file changes
mongodb - for connection to mongodb
moongoose - for creating schema
dotenv - loading env variables
bcrypt - so that we can hash user password

create folder:- models controllers routes

npm i express nodemon mongodb mongoose dotenv bcrypt

create db.js

const mongoose = require('mongoose')

const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGODB_URI)
    console.log('mongodb connected');
  } catch (error) {
    console.log('mongodb connection error ', error);
    process.exit(1)
  }
}
module.exports = connectDB;

create index.js and start express server and also add db connection

stateful example

const express = require('express')
const session = require('express-session')
const authRouter = require('./routes/user.route');
const connectDB = require('./db.index');
const app = express();
const PORT = 8080;
const dotenv = require('dotenv')
dotenv.config()
app.use(express.json())

app.get('/', (req, res) => {
  res.send('ok')
})
//we created a session for stateful system
app.use(session({
  secret: "Navin45",
  resave: false,
  saveUninitialized: false
}))
app.use('/auth', authRouter)

app.listen(PORT, async () => {
  await connectDB()
  console.log(`server is listening http://localhost:${PORT}`)
})

In this we create 4 fuction but the import part is we attach userId session after verify it's email and password and by using this we can get user state when ever we need.

 req.session.userId = user._id;

const User = require('../models/user.model.js')

const register = async (req, res) => {
  try {
    const { name, email, password } = req.body;
    const user = await User.create({ name, email, password })
    return res.status(201).json(user)
  } catch (error) {
    console.log(error);
  }
}
const login = async (req, res) => {
  try {
    const { email, password } = req.body;
    if (!email || !password) {
      return res.status(400).json({ mess: "Please enter all fields" })
    }
    const user = await User.findOne({ email });
    if (!user) {
      return res.status(404).json({ mess: "Invalid crediatels " })
    }

    const isValidPassword = await user.isPasswordCorrect(password)
    if (!isValidPassword) {
      return res.status(404).json({ mess: "Invalid crediatels " })
    }
    // 🛑STATEFULL PART
    req.session.userId = user._id;
    return res.status(200).json({ mess: "Login successfully " })
  } catch (error) {
    console.log(error);
    return res.status(500).json({ mess: "Internal server errror" })
  }
}
const logout = (req, res) => {
  try {
    req.session.destroy(() => {
      res.json({ mess: "logout successfully" })
    })
  } catch (error) {
    return res.status(500).json({ mess: "Internal server error" })
  }
}
const dashboard = async (req, res) => {
  if (!req.session.userId) {
    return res.status(401).json({ mess: "Not logged in" })
  }
  return res.status(200).json({
    mess: "Welcome to dashboard",
    userId: req.session.userId
  })
}
module.exports = {
  register,
  login,
  logout,
  dashboard
}

stateless example
we uses jsonwebtoken package for maintaining stateless state
jwt contain 3 part header payload signature

npm i jsonwebtoken

const User = require('../models/user.model')

const jwt = require('jsonwebtoken')

const JWT_SECREAT = "navin5500";

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

    if (!email || !password) {
      return res.status(400).json({ mess: "please enter details" })
    }
    const isUserExists = await User.findOne({ email })
    if (isUserExists) {
      return res.status(405).json({ message: "User with this email already exists " })
    }
    const user = await User.create({ name, email, password })

    return res.status(200).json({ message: "Use register successfully " })

  } catch (error) {
    console.log(error)
    return res.status(500).json({ mess: "internal server error" })

  }
}
const login = async (req, res) => {
  try {
    const { email, password } = req.body;
    if (!email || !password) {
      return res.status(400).json({ mess: "Please enter all fields" })
    }
    const user = await User.findOne({ email });
    if (!user) {
      return res.status(404).json({ mess: "Invalid crediatels " })
    }

    const isValidPassword = await user.isPasswordCorrect(password)
    if (!isValidPassword) {
      return res.status(404).json({ mess: "Invalid crediatels " })
    }

    // 🛑STATELESS PART
    const token = jwt.sign(
      { userId: user._id },
      JWT_SECREAT,
      { expiresIn: "1h" }
    )
    return res.status(200).json({ mess: "Login successfully ", token })
  } catch (error) {
    console.log(error);
    return res.status(500).json({ mess: "Internal server errror" })
  }
}

const dashboard = async (req, res) => {
  try {
    return res.status(200).json({ mess: "Welcome to dashboard", userId: req.userId })
  } catch (error) {
    return res.status(500).json({ mess: "Internal server error", })

  }
}

module.exports = {
  reqister,
  login,
  dashboard,
}

This is a middleware any request will try access any imp data first will grow through this if validate then go next else it will return from here only and we also attact userId on request so that we can get user info whenver we need

const jwt = require('jsonwebtoken')
const JWT_SECREAT = "navin5500";

const checkHeader = (req, res, next) => {
  const authHeader = req.headers.authorization;

  if (!authHeader) {
    return res.status(401).json({ message: "No token provided" });
  }
  const token = authHeader.split(" ")[1];

  try {
    const decoded = jwt.verify(token, JWT_SECREAT)
    req.userId = decoded.userId;
    next()
  } catch (error) {
    return res.status(401).json({ message: "Invalid token" });
  }
}

module.exports = { checkHeader }