A modern cybersecurity education platform designed to teach digital safety in just 10 modules. Built for lecturers, staff, and students to learn essential cybersecurity skills through interactive modules and assessments.
CyberAware is an educational platform that makes cybersecurity accessible to everyone, regardless of technical background. The application provides a structured 10-day learning journey covering essential topics like phishing detection, password security, and social engineering awareness.
- 📚 10-Day Learning Program: Structured daily modules covering essential cybersecurity topics
- 🎯 Beginner-Friendly: No technical background required - designed for everyone
- 📱 Mobile-First Design: Responsive interface optimized for mobile devices
- 🏆 Certification System: Earn digital certificates by scoring 80% or above on quizzes
- 🔐 User Authentication: Secure signup, signin, password reset, and account verification
- 📊 Progress Tracking: Visual progress indicators and completion tracking
- 🎨 Modern UI: Clean, accessible interface with custom design system
- Next.js 15.4.6 - React framework with App Router
- React 19.1.1 - Latest React with concurrent features
- TypeScript - Type-safe development
- Tailwind CSS 4.1.11 - Utility-first CSS framework
- Custom Design System - Consistent UI components and theming
- Responsive Design - Mobile-first approach
- Zustand - Lightweight state management with theme persistence
- TanStack Query - Server state management and caching
- React Hook Form - Form handling with validation
- @zayne-labs/callapi - Type-safe API client with schema validation and plugin architecture
- ESLint - Code linting with custom configuration
- Prettier - Code formatting
- Husky - Git hooks for code quality
- TypeScript - Static type checking
- Zod - Runtime schema validation for API responses
├── app/ # Next.js App Router
│ ├── (home)/ # Landing page route group
│ ├── (protected)/ # Protected routes requiring authentication
│ │ └── dashboard/ # User dashboard
│ ├── auth/ # Authentication pages
│ │ ├── signin/ # User login
│ │ ├── signup/ # User registration
│ │ ├── forgot-password/ # Password recovery
│ │ ├── reset-password/ # Password reset
│ │ └── verify-account/ # Account verification
│ ├── -components/ # Shared app components
│ ├── layout.tsx # Root layout
│ └── Providers.tsx # App providers setup
├── components/ # Reusable UI components
│ ├── common/ # Common utilities & toast notifications
│ ├── icons/ # Icon components
│ └── ui/ # UI component library
├── lib/ # Utility functions
│ ├── api/ # Backend API integration
│ ├── react-query/ # Query client and options
│ ├── utils/ # Utility functions
│ └── zustand/ # State management stores
├── public/ # Static assets
└── tailwind.css # Global styles
- Node.js 18+
- pnpm (recommended package manager)
-
Clone the repository
git clone [repository-url] cd cyber-aware -
Install dependencies
pnpm install
-
Start development server
pnpm dev
-
Open your browser Navigate to
http://localhost:3000
pnpm dev- Start development server with Turbopnpm build- Build production applicationpnpm start- Start production serverpnpm lint:eslint- Run ESLint checkspnpm lint:format- Format code with Prettierpnpm lint:type-check- Run TypeScript type checking
The application uses a custom design system with:
- Color Palette: AECES Blue, Unizik Orange, and neutral grays
- Typography: Work Sans font family with multiple weights
- Components: Consistent button styles, form inputs, and layout components
- Responsive Breakpoints: Mobile-first responsive design
- User Registration: Email-based signup with form validation
- Account Verification: Email verification process
- User Login: Secure authentication
- Password Reset: Self-service password recovery
- Progress Tracking: Visual progress bar showing completion percentage
- Module Access: Sequential unlocking of daily modules
- Quiz System: Assessment with multiple attempts (up to 5)
- Certificate Generation: Digital certificates for successful completion
- Day 1-10: Progressive learning modules
- Interactive Elements: Engaging content delivery
- Assessment: Final quiz requiring 80% score
- Certification: Downloadable completion certificates
Powered by:
- AECES (Association of Electronic and Computer Engineering Students)
- Nnamdi Azikiwe University, Awka
Developed by the 2025 final-year students of the Department of Electronics and Computer Engineering.
This project is developed by students for educational purposes. For contributions or questions, please contact the development team.
This project is developed as part of an academic initiative by AECES 2025 Set - Computer Option.
Ready to Stay Safe Online? Join thousands of users becoming cyber smart in just 10 days! 🛡️