logo
Videos
Osta Logo

© 2026 Osta. All rights reserved © OSTA

Back to Projects
WebsiteFreelancer

Khottwa

Khottwa

Overview

I engineered a comprehensive Full-Stack educational management platform designed for Quranic institutes. The system facilitates the entire educational process through three distinct dedicated portals (Admin, Teacher, and Student). The project is currently hosted on my personal server as a live demonstration of complex system architecture. Key Contributions & Features Developed: Smart Student Portal: Automated enrollment and gender-based class separation. Students have access to dynamic weekly schedules, media-rich lesson archives (video and audio), and time-boxed discussion boards. Advanced Anti-Cheat Exam Engine: Built a highly secure exam environment featuring disabled "Inspect Element", real-time auto-saving of answers, forced focus lock (redirects users back if they navigate away or drop connection), and auto-submission upon timeout. Teacher Dashboard & Analytics: Empowered teachers with tools for attendance tracking, lesson scheduling, and a hybrid exam grading system (one-click auto-grading for objective questions and manual grading for written ones). Included a comprehensive analytics dashboard for student performance. Data & Media Optimization: Designed an algorithmic custom user ID generator [role][year][gender][birth_day][sequence]. Implemented a robust image upload system (max 5MB) that automatically crops and converts images to WebP format for optimal storage and rendering speed. Performance & Security Engineering: Leveraged Next.js Server Components heavily for blazing-fast performance, paired with Skeleton loaders for smooth UX. Implemented strict HTTP Security Headers along with JS Nonce for top-tier application security. Live Demo Credentials: Teacher ID: t12345678 Student ID: s12345678 Admin ID: a12345678 Password (All): 12345678

Technologies

Next jsTailwindFramer MotionShadcnNextAuth.jsPostgreSQLDrizzle ORM