Stop 08 · ReactProjects · 6/6

Admin Panel

In short

Every real product has an admin side: tables of users, edit forms, delete buttons and pages only some people can open. This project brings tables, forms and protected routes together.

A management interface for CRUD operations across multiple resources (users, products, orders) — practice for forms, tables, and role-based UI.

The jaadu mascot as a warden sits at a desk with a big key and an open register.

Think of it like this

The hostel warden's office

Students can read the notice board, but only the warden opens the register to add, edit or remove names. An admin panel is that office: powerful pages behind a locked door, and only the right people get the key.

Watch it happen

Who gets past the guard

Student

RequireAdmin

useAuth

Users page

open /admin/users

1/5A student types /admin/users into the address bar.

The big ideas

What you need to know

Data tables

List users with search, sorting and pagination, because real tables have hundreds of rows.

One form, two jobs

The same form component handles both 'add user' and 'edit user'.

Protected routes

Redirect anyone who isn't logged in or isn't an admin. And check it on the server too.

Confirm dangerous actions

Deleting asks 'Are you sure?' in a modal before anything happens.

How it works

Build plan

1
Layout
A sidebar with Users, Courses and Settings, and an Outlet for the pages.
2
Users table
Mock or fetch users and show them in a paginated table.
3
Forms
Add and edit users with one shared form component.
4
Guard routes
Wrap admin routes in a component that checks the user's role.

See it in code

Walk through the code

tsx

1import { Navigate, Outlet } from "react-router";2import { useAuth } from "./auth"; // your own hook3 4export function RequireAdmin() {5  const { user } = useAuth();6 7  if (!user) return <Navigate to="/login" replace />;8  if (user.role !== "admin") return <p>You don't have access to this page.</p>;9 10  return <Outlet />;11}12 13// <Route element={<RequireAdmin />}>14//   <Route path="/admin/users" element={<Users />} />15// </Route>