A comprehensive certification preparation platform with offline-first capabilities.
CertPrep.ai is a modern, offline-first quiz application designed to help users prepare for certifications. It features secure authentication, multiple quiz modes (Zen and Proctor), and detailed analytics to track your progress.
 Secure Authentication Email/password auth with Supabase, session management, and secure cookies |
 Offline-First Sync Local IndexedDB storage with automatic cloud synchronization |
 Quiz Modes Proctor, Zen, Topic Study, and Spaced Repetition modes |
 Analytics Dashboard Track progress, heatmaps, and trend charts |
 Responsive Design Fully responsive UI that works on all devices |
 Accessible WCAG 2.1 compliant with full keyboard navigation |
Click to expand
Live Demo: https://cert-prep-ai.vercel.app
Please sign up for a new account to use the application.
| Requirement | Version | Installation |
|---|---|---|
| Node.js | >=20.9.0 |
Download |
| npm/yarn/pnpm | Latest | Comes with Node.js |
| Supabase Account | - | Sign up |
# Clone the repository
git clone https://github.com/TJZine/CertPrep.ai.git
# Navigate to directory
cd CertPrep.ai
# Install dependencies
npm install
# or
yarn install
# or
pnpm install- Copy the environment template:
cp .env.example .env.local- Configure required variables:
# Supabase Configuration (Required)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# Optional: Analytics
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id📖 Where to find these values
| Variable | Location |
|---|---|
SUPABASE_URL |
Supabase Dashboard → Settings → API → Project URL |
SUPABASE_ANON_KEY |
Supabase Dashboard → Settings → API → anon public key |
- Set up the database:
This project does not currently ship Supabase migrations in-repo. You will need to:
- Create a Supabase project.
- Configure the database schema described in docs/ARCHITECTURE.md (tables for users, quizzes, results, etc.).
- Optionally manage your own migrations using the Supabase CLI (
supabase db ...) in your environment.
- Start the development server:
npm run devTip
The app will be available at http://localhost:3000
- Start the development server with
npm run dev. - Open http://localhost:3000 in your browser.
- Sign up for a new account (or log in).
- Import a sample quiz from
docs/SAMPLE_QUIZ.jsonvia the Library/Import UI. - Start a quiz (Zen or Proctor mode), complete it, and view your results and analytics.
For code-level examples (auth, quizzes, results, and sync), see the dedicated API Reference.
| Mode | Description | Best For |
|---|---|---|
| 🎯 Proctor | Timed, monitored quiz environment | Assessments, exams |
| 🧘 Zen | Relaxed, self-paced learning | Practice, study |
| 🧠 SRS | Spaced repetition review (Leitner) | Long-term retention |
| 📚 Topic | Targeted category practice | Weak area improv. |
| 🔀 Interleaved | Mixed questions from all quizzes | Varied practice |
View mode comparison
graph TD
A[Start Quiz] --> B{Select Mode}
B -->|Proctor| C[Timer Enabled]
B -->|Zen| D[No Timer]
B -->|SRS/Topic| D
C --> E[Strict Navigation]
D --> F[Free Navigation]
E --> G[Submit on Complete]
F --> G
G --> H[View Results]
┌─────────────────────────────────────────────────────────────┐
│ Frontend │
├─────────────────────────────────────────────────────────────┤
│ Next.js 16 (App Router) │ React 19 │ TypeScript │ Tailwind │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ State & Storage │
├─────────────────────────────────────────────────────────────┤
│ Dexie.js (IndexedDB) │ React Context │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Backend │
├─────────────────────────────────────────────────────────────┤
│ Supabase (Auth + PostgreSQL + RLS + Realtime) │
└─────────────────────────────────────────────────────────────┘
src/
├── app/ # Next.js App Router
│ ├── analytics/ # Analytics dashboard
│ ├── auth/ # Auth callback routes
│ ├── login/, signup/ # Auth pages
│ ├── library/ # Quiz library
│ ├── create/ # Create custom quizzes guide
│ ├── quiz/ # Quiz flows ([id]/zen, [id]/proctor)
│ ├── results/ # Results pages
│ └── settings/ # Settings pages
├── components/ # React components
│ ├── auth/ # Authentication forms
│ ├── dashboard/ # Dashboard/library components
│ ├── quiz/ # Quiz components
│ ├── results/ # Results display
│ ├── analytics/ # Analytics components
│ └── ui/ # Shared UI components
├── db/ # Dexie IndexedDB setup
│ ├── index.ts # Database initialization
│ ├── quizzes.ts # Quiz operations
│ └── results.ts # Results operations
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
│ ├── supabase/ # Supabase clients
│ ├── sync/ # Sync engine
│ └── sanitize.ts # HTML sanitization
└── types/ # TypeScript definitions
View detailed module diagram
graph TB
subgraph "Client Layer"
A[Pages/Routes] --> B[Components]
B --> C[Hooks]
end
subgraph "Data Layer"
C --> D[Dexie DB]
C --> E[Supabase Client]
end
subgraph "Sync Layer"
D <--> F[Sync Manager]
E <--> F
end
subgraph "Backend"
E --> G[Supabase Auth]
E --> H[PostgreSQL + RLS]
end
| Document | Description |
|---|---|
| 📖 API Reference | API overview and examples |
| 🏗️ Architecture | System design and patterns |
| 🔒 Security | Security policies and practices |
| 🤝 Contributing | Contribution guidelines |
| 📝 Changelog | Version history |
| ❓ FAQ | Frequently asked questions |
| 👩💻 Code Review | Implementation standards & persona |
# Run the unit test suite (Vitest)
npm test# Build for production
npm run build
# Start production server
npm startImportant
Ensure all required environment variables are set in your production environment.
| Variable | Required | Description |
|---|---|---|
NEXT_PUBLIC_SUPABASE_URL |
✅ | Supabase project URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
✅ | Supabase anonymous key |
NEXT_PUBLIC_SITE_URL |
✅ | Production site URL |
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add new feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run lint |
Run ESLint |
npm test |
Run the test suite |
npm run security-check |
Run basic secret scanning |
npm run supabase:types |
Generate DB types |
Caution
If you discover a security vulnerability, please report it responsibly.
Do NOT open a public issue. Please refer to SECURITY.md for reporting instructions.
See SECURITY.md for our full security policy.
This project is licensed under the Apache 2.0 License - see the LICENSE file for details.
Copyright 2025 TJZine
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
- Next.js - The React Framework
- Supabase - Open-source Firebase Alternative
- Tailwind CSS - Utility-First CSS Framework
- Dexie.js - IndexedDB Wrapper
- Vercel - Deployment Platform