CodeZilla Security is a full-stack web application built with Next.js 14, Prisma, and Clerk that delivers an online security awareness training program for individuals and organizations. It helps users learn how to recognize phishing, social engineering, and other cyber threats through structured courses, progress tracking, and interactive learning tools.
CodeZilla Security is a cybersecurity education and awareness platform designed to make security training accessible, engaging, and measurable. It combines a public-facing marketing site with an authenticated learning dashboard, giving learners a guided path through security topics such as data protection, social engineering defense, and secure data exchange, while giving admins the tools to manage course content and track participant progress.
The project is a great reference implementation for anyone building a learning management system (LMS), course platform, or SaaS dashboard with the modern Next.js App Router stack.
- 🔐 Secure authentication & user management powered by Clerk
- 📚 Structured security awareness courses with rich-text lesson content
- 📊 Progress tracking & analytics dashboards with interactive charts
- 🧩 Admin content management for creating and editing courses
- 💬 Testimonials, FAQ, and marketing pages for onboarding new users
- 🌓 Light/dark theme support out of the box
- 📱 Fully responsive UI built with Radix UI and Tailwind CSS
| Category | Description |
|---|---|
| Authentication | Sign up / sign in flows and route protection via Clerk, with webhook syncing via Svix |
| Course Content | Rich-text course/lesson authoring using TinyMCE editor |
| Data Layer | Type-safe database access with Prisma ORM |
| Data Fetching | Server-state management with TanStack Query |
| Tables & Dashboards | Sortable, filterable data tables via TanStack Table |
| Analytics | Progress and engagement charts rendered with Recharts |
| Forms & Validation | React Hook Form + Zod schema validation |
| UI Components | Accessible, composable primitives from Radix UI, styled with Tailwind CSS |
| Marketing Site | Landing page with features, testimonials, FAQ, About Us, and Contact Us sections |
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS,
tailwindcss-animate,class-variance-authority - UI Primitives: Radix UI (accordion, dialog, dropdown, tooltip, toast, and more)
- Authentication: Clerk (
@clerk/nextjs) with Svix webhook verification - Database / ORM: Prisma (
@prisma/client) - Data Fetching: TanStack Query & TanStack Table
- Rich Text Editor: TinyMCE React
- Charts: Recharts
- Forms: React Hook Form + Zod resolvers
- Icons: Lucide React
- Deployment: Vercel
codezilla-security/
├── app/ # Next.js App Router pages, layouts, and API routes
├── components/ # Reusable UI components (Radix-based design system)
├── hooks/ # Custom React hooks
├── lib/ # Utility functions, Prisma client, shared config
├── prisma/ # Prisma schema and database migrations
├── public/images/ # Static assets and illustrations
├── middleware.ts # Clerk auth middleware / route protection
├── tailwind.config.ts # Tailwind CSS configuration
└── package.json
- Node.js ≥ 18
- npm, yarn, pnpm, or bun
- A PostgreSQL (or your preferred Prisma-supported) database
- A Clerk account for authentication keys
- A TinyMCE API key for the rich-text editor
git clone https://github.com/sachidumaleesha/codezilla-security.git
cd codezilla-securitynpm install
# or
yarn install
# or
pnpm installCreate a .env file in the project root with values such as:
# Database
DATABASE_URL="postgresql://user:password@host:port/dbname"
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=
# TinyMCE Editor
NEXT_PUBLIC_TINYMCE_API_KEY=
⚠️ Checkapp/,lib/, andmiddleware.tsfor the exact set of environment variables the app expects, since requirements may evolve.
npx prisma generate
npx prisma migrate devnpm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to see the app.
| Script | Description |
|---|---|
npm run dev |
Start the local development server |
npm run build |
Generate the Prisma client and build the production app |
npm run start |
Start the production server |
npm run lint |
Run ESLint checks |
- Course completion certificates
- Quiz / assessment modules
- Organization/team accounts
- Email notifications for course reminders
- Multi-language support
Have an idea? Open an issue to suggest a feature.
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is available under the MIT License. Feel free to use it as a learning reference or starting point for your own project.
Sachidu Maleesha GitHub: @sachidumaleesha
If you find this project useful, consider giving it a ⭐ on GitHub — it helps others discover it too!