Authentication
JWT-based registration and login with hashed passwords, expiring access tokens and protected routes.
CASE STUDY · FULL-STACK SAAS · 2026
WORKGRID
A multi-tenant project management SaaS with a React Kanban dashboard and a Fastify/PostgreSQL backend — built to make authentication, authorization, relational data, workflow state and auditability visible in one complete product.
VIEW SOURCE CODE ↗WHY I BUILT IT
Full-stack quality becomes visible when UI state, permissions and database state have to agree.
Workgrid was designed as a portfolio project that goes beyond CRUD screens. The goal was to model the concerns that appear in real SaaS systems: workspace isolation, user roles, protected actions, relational constraints, workflow state and traceable mutations.
The React dashboard is not a static mockup. It consumes the API for sessions, workspaces, projects, tasks and activity. Authentication proves who the user is; workspace membership and role checks decide what that user can do.
SYSTEM ARCHITECTURE
01React DashboardVite + TypeScript UI
→02Fastify APIValidation + domain routes
→03Auth + RBACWorkspace-scoped permissions
→04PostgreSQLPrisma + relational constraints
CORE SYSTEMS
Multi-tenancy
Users belong to isolated workspaces through explicit memberships instead of global application roles.
Authorization
OWNER, ADMIN and MEMBER permissions are enforced on the server before workspace actions execute.
Kanban workflow
A React dashboard consumes the real API and moves tasks through four persisted workflow states.
Auditability
Important mutations create workspace-scoped audit records surfaced directly in the product UI.
Responsive product UI
Workspace switching, projects, metrics, modals and the board adapt across desktop and mobile.
PRODUCT FLOW
01sign in
02workspace
03project
04task
05workflow state
The interface and backend share the same domain model: a user enters a workspace, selects a project, creates tasks and moves them through persisted workflow states while each mutation is checked and recorded.
TECHNICAL STACK
React 19 · Vite · TypeScript · responsive CSS
Node.js 22 · Fastify · TypeScript
PostgreSQL · Prisma ORM · relational constraints
JWT · bcrypt · RBAC · request validation · rate limiting
Vitest · ESLint · Docker · GitHub Actions · OpenAPI
ENGINEERING DECISIONS
Server-side RBAC
Permission checks live beside backend operations rather than relying on hidden UI controls.
Database constraints
Unique workspace slugs, project keys and relational foreign keys protect invariants below the HTTP layer.
Optimistic board updates
Task moves update immediately in the UI, persist through the API and roll back if the server rejects the change.
Quality gates
The repository includes linting, type checking, automated tests, Docker configuration and CI workflow definitions.
WHAT THIS PROVES
The dashboard, API and database operate on the same workspace/project/task model rather than existing as disconnected demos.
Identity, authorization and tenant isolation are treated as product rules, not optional polish.
Workspace membership, projects, tasks and audit history are represented as explicit PostgreSQL relationships.
Responsive UI, loading and failure states, optimistic updates, API contracts and backend rules are designed together.
NEXT CASE STUDYTAWADUD ↗