Educational Prototype

Multi-Vendor Cleaning Platform

A full-stack SaaS prototype demonstrating modern web architecture, role-based workflows, real-time features, and production-grade engineering.

Demo Access

Demo accounts are available on request. Credentials are never published on this page.

Go to Login

Architecture

Next.js 16 App Router with Server Components

Server Actions for data mutations

Prisma ORM + Supabase PostgreSQL

Recharts for analytics visualization

Zod validation on all forms

Workflows

Authentication & role-based authorization

Vendor onboarding & admin approval

Service CRUD with image upload

Multi-step booking & availability

Review, invoice, payment simulation

Real-time

Supabase Realtime subscriptions

Live notification updates

Booking status changes

Client-vendor messaging

PWA support for mobile install

Features

Multi-Role Auth

Admin, Vendor, and Client roles with role-based access control and Supabase Auth.

Booking Engine

Full booking lifecycle: request, confirm, complete, cancel with availability management.

Vendor Onboarding

Vendor applications with admin approval workflow and profile management.

Analytics

Recharts-powered dashboards for admin, vendor, and client analytics.

Real-time Chat

Messaging between clients and vendors with Supabase Realtime subscriptions.

Notifications

Real-time notification system with unread counts and mark-as-read.

Payment Simulation

Simulated payment flow with invoice generation and payout tracking.

Invoice System

Professional invoice generation with tax/fee breakdown and print support.

Reviews & Ratings

Client reviews with star ratings and vendor average rating updates.

Technology Stack

Next.js 16

App Router, Server Actions, React 19

TypeScript

Strict type safety across the entire codebase

Prisma 7

ORM with PostgreSQL adapter and Decimal support

Supabase

Auth, PostgreSQL, Realtime, Storage

Tailwind CSS 4

Utility-first styling with shadcn/ui components

Recharts

Composable charting for analytics dashboards

Zod

Schema validation for all forms and server actions

PWA

Progressive Web App with offline support

Architecture Overview

Data Flow

Server Components fetch data directly via Prisma. Client mutations use Server Actions with Zod validation. Supabase Realtime provides live updates for chat and notifications.

Authentication

Supabase Auth with SSR cookie-based sessions. Middleware protects routes using role-based checks stored in cookies. The proxy file replaces the deprecated middleware.ts convention.

File Organization

Grouped routes: (public), (auth), (client), (vendor), (admin). Shared components in /components. Reusable actions in /app/actions. Prisma schema with AuditLog for all mutations.

Security

Rate limiting, input sanitization, file validation, role-based route guards, ownership checks in all server actions, audit logging, production-safe error messages.

Built for academic demonstration. No real payment processing.