CommunityHub

A full-stack community management platform for organizing programs and member registrations. Members can browse programs, sign up, and manage their registrations. Admins get a dashboard with analytics, member management, and program CRUD.

Live Demo: https://communityhub-api.vercel.app/

Demo Accounts

Role	Email	Password
Admin	admin@communityhub.com	Password123!
Member	alice.johnson@example.com	Password123!

Admin login grants access to both the admin dashboard and the member-facing site.

What This Project Demonstrates

• Layered API architecture — Controllers, services, and repositories with clear separation of concerns
• Two-tier authentication — Admin API keys (HMAC constant-time comparison) and member session tokens with expiry
• Transactional business logic — Registration with capacity limits and waitlist promotion, wrapped in database transactions to prevent race conditions
• Feature-based frontend structure — Lazy-loaded routes, shared component library built on Radix UI primitives
• Comprehensive testing — API integration tests against a real PostgreSQL database (no mocks), frontend component tests with Testing Library, E2E tests with Playwright using Page Object Model
• CI/CD pipeline — GitHub Actions running lint, typecheck, unit tests, and Playwright E2E on every push
• Production deployment — Vercel serverless functions (API) + static SPA (Web) with Supabase PostgreSQL

Tech Stack

Layer	Technology
Monorepo	pnpm workspaces
API	Express 5, TypeScript, Prisma 7, PostgreSQL 16
Web	React 19, Vite, React Router v7, Tailwind CSS v4, Radix UI
Testing	Vitest, Supertest, Playwright, Testing Library
Deployment	Vercel, Supabase

Architecture

┌─────────────────┐        ┌──────────────────────────────┐
│   React SPA     │───────▶│     Express 5 REST API       │
│   (Vite)        │        ├──────────────────────────────┤
│                 │        │  Controllers  (validation)    │
│  Feature-based  │        │  Services     (business logic)│
│  lazy routes    │        │  Repositories (data access)   │
└─────────────────┘        ├──────────────────────────────┤
                           │  Prisma 7 + pg adapter        │
                           └──────────┬───────────────────┘
                                      │
                           ┌──────────▼───────────────────┐
                           │       PostgreSQL 16           │
                           └──────────────────────────────┘

Key Features

Member-facing

• Browse programs with a calendar view (monthly navigation)
• Program detail pages with capacity indicators
• Self-service signup, login, and registration
• Account page with profile editing and registration management

Admin dashboard

• Statistics overview with registration trend charts (Recharts)
• Member management — create, edit, archive, promote to admin
• Program management — CRUD with capacity and date controls
• Registration management — filter, create, cancel with waitlist auto-promotion

Security

• Helmet, CORS, rate limiting (global + per-endpoint)
• Bcrypt password hashing with dummy-hash on invalid lookups (timing attack prevention)
• HMAC constant-time API key comparison
• Zod schema validation on all inputs

Project Structure

communityhub/
├── apps/
│   ├── api/           # Express REST API
│   │   ├── src/
│   │   │   ├── controllers/    # Request handlers
│   │   │   ├── services/       # Business logic
│   │   │   ├── repositories/   # Data access (Prisma)
│   │   │   ├── middleware/     # Auth, errors, rate limiting
│   │   │   ├── routes/         # Route definitions
│   │   │   ├── schemas/        # Zod validation schemas
│   │   │   └── test/           # Integration tests
│   │   └── prisma/             # Schema + migrations + seed
│   └── web/           # React SPA
│       ├── src/
│       │   ├── features/       # Feature modules (public + admin)
│       │   ├── shared/         # Reusable components, hooks, API clients
│       │   └── app/            # Router + layouts
│       └── e2e/                # Playwright E2E tests
├── api/               # Vercel serverless entry point
├── infra/docker/      # Docker Compose for local PostgreSQL
└── .github/workflows/ # CI pipeline

Getting Started

Prerequisites

• Node.js v20+
• pnpm v9+
• Docker (for local PostgreSQL)

Setup

pnpm install                  # Install dependencies
pnpm db:up                    # Start PostgreSQL container
cp apps/api/.env.example apps/api/.env   # Configure env vars
pnpm --filter @communityhub/api exec prisma migrate deploy
pnpm seed                     # Populate with sample data
pnpm dev                      # Start API (4000) + Web (5173)

Scripts

Command	Description
pnpm dev	Start API + Web dev servers
pnpm build	Build both apps for production
pnpm test	Run all unit/integration tests
pnpm test:e2e	Run Playwright E2E tests
pnpm lint	Lint the entire codebase
pnpm typecheck	Type-check both apps
pnpm seed	Seed database with sample data

License

Private — all rights reserved.