CEM-PLS-Pro is a Firebase-backed personalized learning system for computer architecture education. It combines learner authentication, module-based lessons, adaptive-style assessment flows, AI-assisted reviewer generation, progress tracking, certification, and admin analytics in a React + TypeScript application.
The project is designed as a portfolio-ready academic system prototype: it demonstrates end-to-end product thinking, structured learning workflows, secure Firestore access patterns, and maintainable frontend architecture.
Production deployment: https://cem-pls-pro-21ey.vercel.app
Note: Some features require Firebase configuration and authenticated user data. Admin analytics require a Firebase Auth user with an admin profile role in Firestore.
- Email/password and Google authentication through Firebase Auth
- Dashboard for learning progress, module access, and assessment status
- Computer architecture modules with bundled local video lessons
- Guided module viewer with progress persistence
- Learning results and certificate generation flow
- Diagnostic pre-test and summative post-test workflows
- Adaptive-style question selection using module balancing and weighted scoring
- Gap analysis visualizations for competency-level feedback
- Stage progression gates for structured learning flow
- Firestore-backed assessment and module progress records
- Personalized study plan generation based on learner assessment data
- OpenAI-compatible reviewer generation through a Vite server proxy
- Review formats for flashcards, audiobook-style narration, and cheatsheets
- Fallback reviewer behavior when AI generation is unavailable
- Protected admin dashboard
- Cross-user progress and completion analytics
- Item analysis views for assessment performance review
- Admin-only Firestore access enforced through security rules and user profile roles
Browser client
React + TypeScript + Vite
React Router
Tailwind CSS
Recharts / React Flow visualizations
|
| Firebase client SDK
v
Firebase
Authentication
Firestore
Storage
Analytics
|
| Optional reviewer generation proxy during Vite dev/preview
v
OpenAI-compatible chat API
Deployment
Vercel serves the static Vite build
Firebase hosts authentication, data, rules, and storage servicesFor a portfolio case-study view, see docs/portfolio.md.
Login
Create Account
Dashboard
Course Module
Diagnostic Pre-test
Gap Anlaysis
Study Plan
Summative Post-Test
Learning Result
Certification Page
Admin Page
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Firebase Auth, Firestore, Storage, and Analytics
- React Router
- Recharts
- React Flow
- Framer Motion
- html2canvas and jsPDF for downloadable outputs
- Vercel deployment
docs/ Portfolio, Firebase, release, and system documentation
public/videos/ Bundled lesson videos served by Vite
src/admin/ Admin pages, analytics views, and route protection
src/auth/ Learner authentication screens
src/contexts/ Shared React context providers
src/dashboard/ Learner dashboard, modules, assessments, and review pages
src/lib/ Firebase initialization
src/routes/ Route definitions and route constants
src/services/ Firebase and reviewer-generation service helpers- Node.js and npm
- Firebase project with Auth and Firestore enabled
- Optional OpenAI-compatible API key for reviewer generation
npm installCreate a local environment file:
copy .env.example .envOn macOS/Linux:
cp .env.example .envFill in the required values, then start the development server:
npm run devThe app reads Firebase configuration from Vite environment variables:
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=Optional reviewer-generation and admin route values:
OPENAI_API_KEY=
VITE_OPENAI_API_BASE_URL=/api/openai
VITE_OPENAI_DEFAULT_MODEL=gpt-4.1-mini
VITE_ADMIN_USERNAME=
VITE_ADMIN_PASSWORD=Do not commit .env. Use .env.example for placeholders only. See docs/firebase.md for Firebase and admin access notes.
npm run dev # Start the Vite development server
npm run build # Type-check and create a production build
npm run preview # Preview the production build locally- Firestore rules are stored at
firestore.rulesand referenced byfirebase.json. - Learner data is scoped to authenticated users.
- Admin analytics access requires a Firebase Auth user with
role: "admin"inuserProfiles/{uid}. - The frontend is deployed as a Vite static build on Vercel.
- Bundled lesson videos are currently served from
public/videos/.
More details:
- Production-oriented React + TypeScript organization
- Firebase Auth and Firestore integration with security rules
- Role-aware admin access and analytics workflows
- Data-driven assessment, progress tracking, and review generation
- Vercel deployment flow for a modern frontend application
- Documentation discipline for public release and academic review
Prioritize these captures before sharing with recruiters or professors:
- Login and sign-up screens
- Learner dashboard with populated progress
- Module viewer with video lesson
- Diagnostic pre-test question screen
- Gap analysis visualization
- Personalized study plan generation
- Flashcard, audiobook, and cheatsheet review modes
- Learning results and certificate screen
- Admin dashboard analytics
- Admin item analysis table/chart
- Add route-level code splitting to reduce the production bundle size.
- Replace bundled videos with Firebase Storage or CDN-hosted assets.
- Add automated UI smoke tests for the main learner and admin flows.
- Add real screenshot and architecture image assets under
docs/assets/. - Add CI checks for TypeScript, build, and markdown link validation.
MIT