Detailed Architecture Diagram – Full Flow with JWT Authentication & CRUD

Published: March 2026 | Reading time: 20–25 minutes

In this complete tutorial, we’ll build a modern, secure admin panel from scratch:

React + TypeScript frontend
Material-UI DataGrid with full CRUD
JWT authentication (register + login)
Zod + React Hook Form for form validation
Express + PostgreSQL backend
Jest + React Testing Library tests

Everything is production-ready-ish, typed, validated, and tested. Perfect for internal tools, side projects, or learning full-stack TypeScript.

Prerequisites

Node.js ≥18
PostgreSQL (local or cloud: Supabase, Neon, Railway…)
Basic knowledge of React, TypeScript, Express

1. Database Setup (PostgreSQL)

Create two tables:

CREATE TABLE auth_users (
  id SERIAL PRIMARY KEY,
  email VARCHAR(100) UNIQUE NOT NULL,
  password_hash VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  firstname VARCHAR(50) NOT NULL,
  lastname VARCHAR(50) NOT NULL
);

-- Sample data
INSERT INTO users (firstname, lastname) VALUES
('John', 'Doe'), ('Jane', 'Smith'), ('Alice', 'Johnson');

2. Backend – Express + JWT + PostgreSQL

Folder: backend/

npm init -y
npm install express cors pg bcryptjs jsonwebtoken dotenv
npm install --save-dev @types/express @types/node ts-node-dev typescript

backend/src/server.ts (or keep as .js if you prefer plain JS):

// Full backend code here (from earlier messages - register, login, CRUD with auth middleware)
const express = require('express');
const cors = require('cors');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
require('dotenv').config();

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

const { Pool } = require('pg');
const pool = new Pool({ /* your env creds */ });

const JWT_SECRET = process.env.JWT_SECRET || 'change-me';

const authenticateToken = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ error: 'No token' });
  jwt.verify(token, JWT_SECRET, (err, user) => {
    if (err) return res.status(403).json({ error: 'Invalid token' });
    req.user = user;
    next();
  });
};

// Register, Login, GET/POST/PUT/DELETE /users (protected) ...
// (paste full backend code from earlier responses here)

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

.env

DB_USER=postgres
DB_HOST=localhost
DB_NAME=yourdb
DB_PASSWORD=yourpass
JWT_SECRET=super-long-secret-here

3. Frontend – React + TypeScript + MUI + Zod + Testing

Create the app:

npx create-react-app frontend --template typescript
cd frontend
npm install axios @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/icons-material react-router-dom zod react-hook-form @hookform/resolvers
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest ts-jest jest-environment-jsdom

Folder Structure

src/
├── components/
│   ├── Login.tsx
│   ├── Register.tsx
│   ├── Dashboard.tsx
│   ├── AddUserDialog.tsx
│   └── DeleteConfirmDialog.tsx
├── services/
│   └── api.ts
├── schemas/
│   └── authSchemas.ts
├── types/
│   └── index.ts
├── App.tsx
├── setupTests.ts
└── __tests__/
    ├── Login.test.tsx
    ├── Register.test.tsx
    └── AddUserDialog.test.tsx

All frontend code files (copy-paste each one – full versions from previous messages):

types/index.ts → User, NewUser, AuthResponse…
services/api.ts → Axios with interceptors
schemas/authSchemas.ts → Zod schemas for login/register/add user
components/Login.tsx, Register.tsx, Dashboard.tsx, AddUserDialog.tsx, DeleteConfirmDialog.tsx
App.tsx → Router + ProtectedRoute
__tests__/Login.test.tsx etc. → Jest tests

App.tsx (entry point)

// Full App.tsx with Router, ProtectedRoute (from earlier)

4. Architecture Overview

High-level flow:


[ Browser / React + TS ]
  ├── /login, /register (Zod validated forms)
  └── /dashboard (protected) → MUI DataGrid CRUD

       Axios + JWT Bearer Token
           ↓↑
[ Express + Node.js ]
  ├── /auth/register → bcrypt.hash → INSERT auth_users
  ├── /auth/login    → bcrypt.compare → jwt.sign
  └── /users/*       → JWT middleware → pg queries

       pg Pool
           ↓↑
[ PostgreSQL ]
  ├── auth_users (email + hash)
  └── users (firstname, lastname)

Detailed JWT flow diagram (recommended):

5. Running & Testing

Start backend: node server.js or ts-node-dev server.ts
Start frontend: npm start
Run tests: npm test or npm run test:coverage

6. Deployment Suggestions

Frontend: Vercel / Netlify
Backend: Render / Railway / Fly.io
Database: Supabase / Neon / Railway PostgreSQL
Security upgrades: HttpOnly cookies for tokens, refresh tokens, rate limiting, input sanitization

Conclusion

You now have a modern, typed, validated, tested full-stack admin panel connected to PostgreSQL.

GitHub repo (create your own or fork similar ones like bezkoder’s) – feel free to clone, extend, and deploy!

Questions? Bugs? Want to add roles / refresh tokens / dark mode? Drop a comment below.

Happy coding! 🚀🔒

Tags: React, TypeScript, PostgreSQL, JWT, Zod, React Hook Form, Jest, MUI, Express, Full-Stack, Admin Panel, CRUD, Authentication