🎓 Codezela Career Accelerator - Student Onboarding Platform

A modern, full-stack student registration and management system for Codezela Career Accelerator programs.

Features • Tech Stack • Architecture • Getting Started • Deployment

📋 Table of Contents

Overview
Features
Tech Stack
Architecture
Project Structure
Getting Started
Environment Variables
Database Schema
API Routes
Scripts
Deployment
Security
License

🎯 Overview

The Codezela Career Accelerator Student Onboarding Platform is a comprehensive web application designed to streamline the student registration process for career accelerator programs. It features a beautiful, animated public-facing registration form and a powerful admin dashboard for managing registrations, programs, payments, and user accounts.

Key Highlights

🎨 Stunning UI/UX — Glassmorphism design with Three.js animated backgrounds
🔐 Secure Authentication — Supabase Auth with Row Level Security (RLS)
📄 Document Management — Secure file uploads to Cloudflare R2
📊 Admin Dashboard — Comprehensive management tools with activity logging
🌍 International Support — Multi-country support with localized fields
♿ Accessibility First — WCAG compliant components
⚡ Performance Optimized — Next.js 16 with streaming and edge capabilities

✨ Features

Public Portal

Feature	Description
📝 Multi-Step Registration	Comprehensive form with program selection, personal info, contact details, qualifications, and document uploads
🎨 3D Animated Homepage	Interactive Three.js geometric shapes with mouse-responsive animations
📎 Secure File Uploads	Direct-to-cloud uploads with presigned URLs (academic docs, ID proof, photo, payment slip)
🛡️ Spam Protection	Cloudflare Turnstile integration
📱 Responsive Design	Mobile-first approach with Tailwind CSS
🌐 International Support	Country selection with dynamic Sri Lankan province/district fields

Admin Dashboard

Feature	Description
📊 Analytics Overview	Real-time statistics on registrations, programs, and payments
👥 Registration Management	View, search, filter, edit, and soft-delete student registrations
📚 Program Management	Create, edit, and manage accelerator programs and intake windows
💰 Finance & Payments	Track payments, generate financial reports, manage payment status
👤 User Accounts	Admin user management with role-based access
📜 Activity Logging	Comprehensive audit trail for all admin actions
🔍 Advanced Filtering	Multi-criteria search and filtering capabilities
📥 CSV Export	Export registrations and payment data to CSV
🖼️ Document Viewer	Built-in image/PDF viewer with zoom and pan capabilities
💳 Payment Recording	Record new payments and void existing ones
🔔 Toast Notifications	Real-time feedback for all user actions

🛠️ Tech Stack

Core Framework

Next.js 16 — React framework with App Router
React 19 — UI library with latest features
TypeScript — Type-safe development

Database & Backend

PostgreSQL — Primary database via Supabase
Prisma ORM — Type-safe database client
Supabase — Auth, database, and storage

Storage & File Handling

Cloudflare R2 — S3-compatible object storage
AWS SDK v3 — File operations with presigned URLs

UI & Styling

Tailwind CSS 4 — Latest version with @import "tailwindcss" syntax
shadcn/ui — Beautiful, accessible components (30+ components)
Radix UI — Unstyled, accessible primitives
CSS Variables — Custom theming with HSL color system
Glassmorphism — Backdrop blur and transparency effects throughout
Framer Motion — Smooth animations
Three.js — 3D graphics and animations
Lucide React — Icon library

Forms & Validation

React Hook Form — Performant form handling
Zod — Schema validation

Animation & Effects

Framer Motion — Page transitions and micro-interactions
Three.js — 3D animated background on homepage
Tailwind CSS Animations — Blob animations, hover effects, transitions

Security

Cloudflare Turnstile — Bot protection
Supabase Auth — Authentication and authorization
Row Level Security (RLS) — Database-level access control

🏗️ Architecture

System Architecture Diagram

┌─────────────────────────────────────────────────────────────────────────┐
│                              Client Layer                                │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────────────┐  │
│  │   Public Pages  │  │   Admin Pages   │  │    API Routes           │  │
│  │                 │  │                 │  │                         │  │
│  │  / (Homepage)   │  │  /admin         │  │  /api/registrations     │  │
│  │  /cca-register  │  │  /admin/programs│  │  /api/upload/presign    │  │
│  │                 │  │  /admin/finance │  │                         │  │
│  └────────┬────────┘  └────────┬────────┘  └───────────┬─────────────┘  │
└───────────┼────────────────────┼───────────────────────┼────────────────┘
            │                    │                       │
            ▼                    ▼                       ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                         Server Layer (Next.js)                           │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────────────┐  │
│  │  Server Actions │  │  Prisma Client  │  │  File Upload Service    │  │
│  │                 │  │                 │  │                         │  │
│  │  Dashboard      │  │  Database       │  │  Cloudflare R2          │  │
│  │  Actions        │  │  Queries        │  │  (S3-Compatible)        │  │
│  └────────┬────────┘  └────────┬────────┘  └───────────┬─────────────┘  │
└───────────┼────────────────────┼───────────────────────┼────────────────┘
            │                    │                       │
            ▼                    ▼                       ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                        External Services                                 │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────────────┐  │
│  │    Supabase     │  │  Cloudflare R2  │  │   Cloudflare Turnstile   │  │
│  │                 │  │                 │  │                         │  │
│  │  PostgreSQL     │  │  Object Storage │  │   Bot Protection        │  │
│  │  Auth           │  │  CDN            │  │                         │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘

Route Groups

app/
├── (public)/          # Public routes (no auth required)
│   ├── page.tsx       # Homepage with 3D animation
│   └── register/      # Registration form
│
├── (admin)/           # Admin routes (auth required)
│   └── admin/
│       ├── login/     # Admin login
│       └── (dashboard)/
│           ├── page.tsx           # Dashboard home
│           ├── programs/          # Program management
│           ├── registrations/     # Registration management
│           ├── finance/           # Payment tracking
│           ├── accounts/          # User management
│           └── activity/          # Activity logs
│
└── api/               # API routes
    ├── registrations/ # Registration CRUD
    └── upload/        # File upload handlers

📁 Project Structure

cca-student-onboarding-next/
├── 📁 app/                          # Next.js App Router
│   ├── (admin)/                     # Admin route group
│   │   └── admin/
│   │       ├── (dashboard)/         # Dashboard layout
│   │       │   ├── accounts/        # User management
│   │       │   ├── activity/        # Activity logs
│   │       │   ├── finance/         # Finance dashboard
│   │       │   ├── programs/        # Program CRUD
│   │       │   ├── registrations/   # Registration management
│   │       │   ├── dashboard-actions.ts
│   │       │   └── page.tsx
│   │       └── login/               # Admin login page
│   ├── (public)/                    # Public route group
│   │   ├── page.tsx                 # Homepage
│   │   └── register/                # Registration form
│   ├── api/                         # API routes
│   │   ├── registrations/           # Registration API
│   │   └── upload/                  # File upload API
│   ├── globals.css
│   └── layout.tsx
│
├── 📁 components/                   # React components
│   ├── admin/                       # Admin-specific components
│   ├── layout/                      # Layout components
│   └── ui/                          # shadcn/ui components
│
├── 📁 lib/                          # Utility libraries
│   ├── data/                        # Static data (countries, districts)
│   ├── hooks/                       # Custom React hooks
│   ├── services/                    # Business logic services
│   ├── supabase/                    # Supabase clients
│   ├── validations/                 # Zod schemas
│   ├── prisma.ts                    # Prisma client
│   └── utils.ts                     # Utility functions
│
├── 📁 hooks/                        # Global hooks
│
├── 📁 prisma/                       # Database schema
│   └── schema.prisma
│
├── 📁 scripts/                      # Utility scripts
│   ├── enable-rls.ts               # Enable Row Level Security
│   ├── seed-admin.ts               # Seed admin user
│   ├── seed-programs.ts            # Seed program data
│   └── test-db.ts                  # Database connection test
│
├── 📁 public/                       # Static assets
│   └── images/
│
├── .env.example                     # Environment template
├── .gitignore
├── LICENSE                          # Proprietary license
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── prisma.config.ts
├── README.md
└── tsconfig.json

🚀 Getting Started

Prerequisites

Node.js 20.x or later
npm 10.x or later
PostgreSQL database (Supabase recommended)
Cloudflare R2 bucket (for file storage)
Supabase project (for auth and database)

1. Clone the Repository

git clone <repository-url>
cd cca-student-onboarding-next

2. Install Dependencies

npm install

3. Configure Environment Variables

cp .env.example .env

Edit .env with your credentials. See Environment Variables for details.

4. Set Up the Database

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev --name init

# (Optional) Seed programs
npx tsx scripts/seed-programs.ts

# (Optional) Create admin user
npx tsx scripts/seed-admin.ts

# (Optional) Enable RLS
npx tsx scripts/enable-rls.ts

5. Start Development Server

npm run dev

Open http://localhost:3000 in your browser.

🔐 Environment Variables

Required Variables

Variable	Description	Source
`NEXT_PUBLIC_SUPABASE_URL`	Supabase project URL	Supabase Dashboard
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY`	Supabase anon key	Supabase Dashboard
`SUPABASE_SECRET_KEY`	Supabase service role key	Supabase Dashboard
`DATABASE_URL`	PostgreSQL connection URL (with PgBouncer)	Supabase Dashboard
`DIRECT_URL`	Direct PostgreSQL connection URL	Supabase Dashboard
`AUTH_SECRET`	NextAuth.js secret	Generate with `openssl rand -base64 32`

Turnstile Configuration

Variable	Description	Source
`NEXT_PUBLIC_TURNSTILE_SITE_KEY`	Turnstile site key	Cloudflare Dashboard
`TURNSTILE_SECRET_KEY`	Turnstile secret key	Cloudflare Dashboard
`TURNSTILE_ALLOWED_HOSTNAME`	Optional hostname pin for server validation	Your deployment hostname

Cloudflare R2 Configuration

Variable	Description	Source
`R2_ACCESS_KEY_ID`	R2 access key ID	Cloudflare R2 Dashboard
`R2_SECRET_ACCESS_KEY`	R2 secret key	Cloudflare R2 Dashboard
`R2_BUCKET`	Bucket name	Cloudflare R2 Dashboard
`R2_ENDPOINT`	R2 endpoint URL	Cloudflare R2 Dashboard
`R2_PUBLIC_URL`	Public access URL	Cloudflare R2 Dashboard

Admin Seeding

Variable	Description	Example
`SEED_ADMIN_EMAIL`	Initial admin email	`admin@example.com`
`SEED_ADMIN_PASSWORD`	Initial admin password	`ChangeMe123!`
`SEED_ADMIN_NAME`	Initial admin name	`Admin User`

Application

Variable	Description	Default
`NEXT_PUBLIC_APP_URL`	Public app URL	`http://localhost:3000`

🗄️ Database Schema

Entity Relationship Diagram

┌─────────────────┐     ┌─────────────────────┐     ┌─────────────────┐
│      User       │     │  ProgramIntakeWindow│     │     Program     │
├─────────────────┤     ├─────────────────────┤     ├─────────────────┤
│ id (PK)         │     │ id (PK)             │     │ id (PK)         │
│ name            │     │ programId (FK)      │────▶│ code (Unique)   │
│ email (Unique)  │     │ windowName          │     │ name            │
│ password        │     │ opensAt             │     │ yearLabel       │
│ role            │     │ closesAt            │     │ durationLabel   │
│ createdAt       │     │ priceOverride       │     │ basePrice       │
│ updatedAt       │     │ isActive            │     │ currency        │
└─────────────────┘     │ createdAt           │     │ isActive        │
         │              │ updatedAt           │     │ createdBy (FK)  │◀──┐
         │              └─────────────────────┘     │ updatedBy (FK)  │◀──┤
         │                                          │ createdAt       │   │
         │                                          │ updatedAt       │   │
         │                                          └─────────────────┘   │
         │                                                                │
         │              ┌─────────────────────┐                          │
         │              │  CCARegistration    │                          │
         │              ├─────────────────────┤                          │
         │              │ id (PK)             │                          │
         │              │ registerId (Unique) │                          │
         │              │ programId (FK)      │──────────────────────────┘
         │              │ fullName            │
         │              │ emailAddress        │
         │              │ ...                 │
         │              └─────────────────────┘
         │                         │
         │                         │
         ▼                         ▼
┌───────────────────────────────────────┐
│       RegistrationPayment             │
├───────────────────────────────────────┤
│ id (PK)                               │
│ ccaRegistrationId (FK)                │
│ paymentNo                             │
│ amount                                │
│ paymentMethod                         │
│ status (active/void)                  │
│ createdAt                             │
└───────────────────────────────────────┘

Models

`CCARegistration`

Core registration model storing student application data:

Personal information (name, DOB, gender)
Contact details (address, email, phone)
Identification (NIC/Passport)
Qualifications and documents
Payment information
Document URLs (stored as JSON)

`Program`

Career accelerator programs:

Program code, name, and metadata
Pricing and currency
Active/inactive status
Display ordering

`ProgramIntakeWindow`

Enrollment periods for programs:

Opening and closing dates
Price overrides for specific windows
Active status

`RegistrationPayment`

Payment tracking for registrations:

Payment history with sequential numbers
Void capability with audit trail
Receipt reference tracking

`AdminActivityLog`

Comprehensive audit logging:

Actor identification (user snapshots)
Action categorization
Before/after data storage
IP address and user agent tracking

⚡ Server Actions

The application uses Next.js Server Actions for all data mutations:

Dashboard Actions (`dashboard-actions.ts`)

Action	Description
`getDashboardStats()`	Get registration statistics (active, trashed, total, by tags)
`getRegistrations()`	Fetch registrations with filtering and search
`getActivePrograms()`	List all programs for filters
`toggleRegistrationTrash()`	Soft-delete or restore a registration
`purgeRegistration()`	Permanently delete a registration
`getRegistrationById()`	Fetch single registration with payments
`updateRegistration()`	Update registration details

Program Actions (`programs-actions.ts`)

Action	Description
`getAllPrograms()`	List all programs with counts
`getProgramById()`	Fetch program with intake windows
`toggleProgramStatus()`	Activate/deactivate a program
`upsertProgram()`	Create or update a program
`deleteProgram()`	Delete program (if no registrations)
`getProgramIntakes()`	List intake windows for a program
`upsertIntakeWindow()`	Create or update intake window
`toggleIntakeStatus()`	Activate/deactivate intake window
`deleteIntakeWindow()`	Delete an intake window

Finance Actions (`finance-actions.ts`)

Action	Description
`getFinanceStats()`	Get total revenue and payment counts
`getPaymentLedger()`	List all payment transactions
`addPayment()`	Record a new payment
`voidPayment()`	Void a payment with reason

Admin Actions (`actions.ts`)

Action	Description
`loginAction()`	Authenticate admin user with Turnstile
`logoutAction()`	Sign out current user
`getAdminUsers()`	List all admin users
`createAdminUser()`	Create new admin account
`deleteAdminUser()`	Delete an admin account

🔌 API Routes

`/api/registrations`

Method	Endpoint	Description
`POST`	`/api/registrations`	Create new registration

Request Body:

{
  turnstile_token: string;
  program_id: string;
  full_name: string;
  name_with_initials: string;
  gender: "male" | "female";
  date_of_birth: string;
  // ... other fields
  academic_urls: string;      // JSON string of URLs
  nic_urls: string;           // JSON string of URLs
  passport_urls: string;      // JSON string of URLs
  photo_url: string;
  payment_url: string;
}

`/api/upload/presign`

Method	Endpoint	Description
`POST`	`/api/upload/presign`	Get presigned URL for file upload

Request Body:

{
  filename: string;
  contentType: string;
  directory: "documents" | "receipts" | "avatars";
}

Response:

{
  success: true;
  data: {
    url: string;        // Presigned upload URL
    key: string;        // Storage key
    publicUrl: string;  // Public access URL
  }
}

🛠️ Scripts

Database Setup

# Test database connection
npx tsx scripts/test-db.ts

# Enable Row Level Security on all tables
npx tsx scripts/enable-rls.ts

# Seed programs data
npx tsx scripts/seed-programs.ts

# Create initial admin user
npx tsx scripts/seed-admin.ts

Utility Scripts

Script	Purpose
`test-db.ts`	Verify database connectivity
`enable-rls.ts`	Enable RLS policies on all tables
`seed-programs.ts`	Seed 30+ career programs
`seed-admin.ts`	Create initial admin user

📦 Deployment

Vercel (Recommended)

Push to GitHub
```
git push origin main
```
Connect to Vercel
- Import project from GitHub
- Framework preset: Next.js
Configure Environment Variables
- Add all variables from .env.example
Deploy
- Vercel will build and deploy automatically

Docker (Alternative)

# Dockerfile
FROM node:20-alpine AS base

FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npx prisma generate
RUN npm run build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]

🔒 Security

Implemented Security Measures

Feature	Implementation
Row Level Security (RLS)	PostgreSQL RLS policies on all tables
Authentication	Supabase Auth with session management
File Upload Security	Presigned URLs with 5-minute expiration
Bot Protection	Cloudflare Turnstile on public submissions
Input Validation	Zod schema validation on all inputs
SQL Injection Prevention	Prisma ORM with parameterized queries
XSS Protection	React's built-in escaping + CSP headers
CSRF Protection	SameSite cookies + origin validation

Security Best Practices

Never commit .env files — Always use .env.example as template
Rotate credentials regularly — Especially service account keys
Enable RLS — Run scripts/enable-rls.ts after migrations
Validate file types — Server-side validation on uploads
Rate limiting — Implement on API routes for production

📄 License

This project is proprietary software owned by Codezela Technologies (Pvt) Ltd.

Copyright (c) 2026 Codezela Technologies (Pvt) Ltd
All Rights Reserved.

Unauthorized copying, distribution, modification, public display, or public
performance of this Software is strictly prohibited.

For licensing inquiries, please contact Codezela Technologies (Pvt) Ltd.

See LICENSE for full terms.

🤝 Support

📧 Email: ca@codezela.com | shamal@codezela.com
📱 WhatsApp: +94 76 677 2923 | +94 76 677 8438
🌐 Website: codezela.com
📱 Social: Facebook | LinkedIn

Built with ❤️ by Codezela Technologies (Pvt) Ltd

Name		Name	Last commit message	Last commit date
Latest commit History 72 Commits
app		app
components		components
hooks		hooks
lib		lib
prisma		prisma
public		public
scripts		scripts
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
prisma.config.ts		prisma.config.ts
proxy.ts		proxy.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation