A real-time classroom assessment platform that enables teachers to create and host live quizzes while students participate through a dedicated mobile application using a unique game PIN.
Knighthoot was designed to modernize classroom engagement by giving teachers an intuitive platform for creating interactive quizzes while students participate in real time through a companion mobile application. Every session is live, scored, and reportable.
The system combines a React web application, Flutter mobile app, RESTful backend, and MongoDB database into a complete ecosystem supporting authentication, quiz creation, live sessions, scoring, reporting, and email verification. My focus was designing and building the web interface while collaborating closely with backend, mobile, and database developers.
System Architecture
The full web experience was prototyped in Figma before development began, establishing a consistent design language, navigation flow, and responsive layouts. The interface was built around a clean black-and-gold visual identity inspired by the university's branding while prioritizing usability for live classroom sessions.
Teachers interact through the web dashboard while students participate via the Flutter mobile app. Both clients share a single REST API, enabling synchronized quiz sessions, authentication, live scoring, and real-time gameplay across platforms.
MongoDB manages users, quizzes, questions, and student results. The schema supports authentication, quiz ownership, live classroom sessions, and performance reporting while maintaining efficient relationships between teachers, students, and assessments.
Development followed an agile workflow with early project planning, collaborative GitHub development, and API-first architecture. Detailed prototypes and UML diagrams allowed the frontend, backend, mobile, and database teams to develop independently while maintaining a shared system architecture throughout.
Gantt Chart
Web Prototype
Mobile Prototype
Class Diagram
Accessibility was a core focus throughout development. Key pages consistently achieved perfect Lighthouse accessibility scores while maintaining responsive layouts and intuitive navigation across the application.
REST API endpoints were documented and validated using SwaggerHub and Postman to ensure reliable communication between the web application, mobile app, and backend before full system integration.
Automated integration tests simulated complete user workflows — registration, quiz participation, and account management — to verify end-to-end system behavior rather than isolated API endpoints.
Coordinating development across web, mobile, backend, and database teams required careful planning, clear communication, and well-defined API contracts. Early planning and shared documentation allowed each subsystem to evolve independently while remaining compatible during integration.
Deploying the application introduced new challenges including SSL certificate requirements, HTTPS configuration, dependency management, and cloud hosting. Solving these issues provided hands-on experience moving beyond local development into production-ready software.
Teacher Dashboard
Quiz Creation
Student Mobile App
Live Quiz Interface