Projects/Case Study
Personal Project — Startup Architect
[YSRCP Cadre Management]
System
A production-grade, full-stack cadre registration and identity card management platform built end-to-end as Startup Architect — serving 13+ lakh registered members across 175 Assembly Constituencies in Andhra Pradesh.
Next.js 16
React 19
TypeScript
Supabase
PostgreSQL 15
Tailwind v4
Deno Edge Functions
AI Photo Enhancement
Production · Live
Role: Startup Architect (End-to-End)
Stack: 231 files · 81K+ LoC
0+
Registrations
0
Assembly Constituencies
0
REST API Endpoints
0+
Lines of Code
0
SQL Migrations
0
User Role Types
01
The Challenge
The Problem
◆1.3M+ cadre members maintained in paper records and scattered spreadsheets — no digital registry
◆No standardised identity cards with verifiable barcodes or QR codes
◆12-level administrative hierarchy spanning national → village with three entity types at leaf level
◆Thousands of poor-quality photos requiring AI enhancement before print-quality ID card production
◆Multi-role access requirements across 8 distinct role types from state admin to print validator
◆Real-time analytics for leadership across geographic and demographic dimensions
The Solution
✓Full-stack Next.js 16 platform with Supabase backend — single codebase, serverless-first architecture
✓Auto-generated barcodes and QR codes per registration, scannable for real-time card verification
✓Cascading geography FK design with runtime lookup maps handling all 12 administrative levels
✓Supabase Edge Function AI batch processor with async webhook callbacks and admin queue UI
✓Three-layer RBAC: PostgreSQL RLS + API middleware + server-side page guards
✓15+ Chart.js visualisations with PostgreSQL RPC aggregation and Zustand filter state
02
Architecture Diagrams
How the System is Built
Interactive diagrams for each architectural layer — click a tab to explore.
01
CLIENT LAYER
React 19 UI, data visualisations, state management & animations
›Next.js 16 (Pages Router, SSR/SSG)
›React 19 + TypeScript 5
›Tailwind CSS v4.1
›Zustand — 3 global stores
›Chart.js + react-chartjs-2 (15+ charts)
›Framer Motion page transitions
›React Hook Form + Zod validation
›ExcelJS · jsPDF · JsBarcode · QRCode
Next.js 16
React 19
TypeScript
Tailwind v4
Zustand
Chart.js
Framer Motion
02
API LAYER
57 serverless REST endpoints with JWT auth, RBAC and rate limiting
›57 Next.js API Routes (Serverless Functions)
›JWT auth guards on every endpoint
›Role-Based Access Control (8 roles)
›OTP rate limiting — DB-backed sliding windows
›Zod schema validation (client + server)
›Streaming ZIP via archiver.pipe(res)
57 REST APIs
JWT Auth
RBAC
Rate Limiting
Zod
Streaming
03
EDGE FUNCTIONS LAYER
11 Supabase Edge Functions (Deno runtime) for AI processing & async ops
›11 Edge Functions on Deno Runtime
›ai-photo-batch-processor — AI queue worker
›photo-ai-callback — webhook handler
›user-auth-management & user-management
›crud-operations, geographic-data, master-data
›Supabase Cron scheduled batch processing
Deno Runtime
11 Edge Fns
AI Processing
Webhooks
Cron Jobs
04
BACKEND / DATABASE LAYER
PostgreSQL 15 with RLS, PostgREST auto-API, GoTrue auth, 50 SQL migrations
›Supabase (PostgreSQL 15)
›PostgREST — auto-generated REST from schema
›GoTrue — Auth service (email/OTP)
›Row-Level Security on every table
›50 versioned SQL migrations
›3 RPC Functions (aggregated dashboard stats)
›Composite indexes on filtered query columns
PostgreSQL 15
PostgREST
GoTrue
RLS
50 Migrations
RPC
05
STORAGE LAYER
S3-compatible private photo storage with time-limited signed URLs and CDN
›Supabase Storage (S3-compatible)
›Private photo bucket — no public access
›Time-limited signed URLs for photo delivery
›CDN edge distribution
›Parallel photo downloads (50 concurrent waves)
S3 Compatible
Private Bucket
Signed URLs
CDN
50× Parallel
External Services
MSG91
OTP delivery via SMS
Resend
Transactional email
AI Photo API
Photo quality enhancement
Architecture Patterns
▸DAO Pattern
▸Repository Pattern
▸Store Pattern (Zustand)
▸Streaming Response
▸Event-Driven (Webhooks)
▸Batch Processing
▸Soft Delete
03
Challenges & Solutions
Engineering Decisions
01
10K+ Record Exports Without Memory Overflow
⌄
02
12-Level Administrative Hierarchy
⌄
03
AI Photo Processing at Scale
⌄
04
8-Role RBAC Across Three Layers
⌄
05
Real-Time Analytics on 1.3M+ Records
⌄
06
Bulk Excel Validation with Geography Cross-Checks
⌄
07
ID Card Designation Sizing Across 60+ Variants
⌄
04
Technology Stack
Full Stack Breakdown
Frontend
Next.js 16
React 19
TypeScript 5
Tailwind CSS v4
Framer Motion
Chart.js
Zustand
Forms & Validation
React Hook Form
Zod
React Easy Crop
XLSX (SheetJS)
Backend
Supabase
PostgreSQL 15
PostgREST
GoTrue
Deno (Edge Fns)
Data Processing
ExcelJS
Archiver
jsPDF
JsBarcode
QRCode
html2canvas
JSZip
Camera & Scanning
@zxing/browser
React Easy Crop
External APIs
MSG91 (OTP/SMS)
Resend (Email)
AI Photo Enhancement API
DevOps & Infra
Supabase Cron
Signed URLs CDN
RLS Policies
50 SQL Migrations
05
Codebase Statistics
Scale of the System
0
TypeScript/TSX Files
0+
Lines of Code
0
REST API Endpoints
0
SQL Migrations
0
Edge Functions (Deno)
0+
Page Routes
0+
UI Components
0+
Utility Modules
06
API Architecture
57 REST Endpoints
/api/admin
13+ endpoints
›ai-photo-bulk-submitPOST
›ai-photo-listGET
›ai-photo-resetPOST
›create-userPOST
›dashboard-statsPOST
›lookup-by-barcodeGET
›mark-card-printedPOST
›print-rejectPOST
›reports/generatePOST
›metadata/* (corporations, mandals, wards…)
/api/bulk-upload
11 endpoints
›uploadPOST
›validatePOST
›listGET
›get-recordGET
›update-recordPUT
›confirm-to-masterPOST
›delete-selectedPOST
›clear-allPOST
›fix-row-numbersPOST
›templateGET
/api/print-export
8 endpoints
›previewPOST
›generatePOST (streaming ZIP)
›bulk-approvePOST (≤200)
›bulk-rejectPOST
›approve-allPOST
›reset-exportedPOST
›rejected-listGET
›resubmitPOST
/api (root)
12 endpoints
›send-otpPOST
›verify-otpPOST
›verify-phonePOST
›upload-photoPOST
›update-correctionPOST
›committee-definitionsGET
›positionsGET
›wingsGET
›metadataGET
›grid-upload/templateGET
07
Future Roadmap
⚡Real-time WebSocket subscriptions for live dashboard updates
📱Progressive Web App (PWA) for offline field registration
🌐Multi-language support — Telugu, Hindi, English
📲Mobile app (React Native) for field workers
🔗Blockchain-based card verification
🏛Integration with government voter ID databases
📧Automated report scheduling and email delivery
🤖ML-based duplicate detection beyond exact-match
Want to discuss this system?
I designed and built every layer of this platform — from PostgreSQL schema through Edge Functions to the React UI. Happy to walk through any part of it.
Get in Touch →Back to Projects