School Management System
Operations hub for scheduling, roles, and secure authentication — built for clarity at scale.
Year
2024
Role
Full-Stack Developer
Platform
Web
Status
Live
Stack
Technologies used
| Technology | Category | Purpose |
|---|
| Next.js | Framework | App Router, Server Actions, and SSR for the entire application |
| TypeScript | Language | End-to-end type safety across components, actions, and schemas |
| Tailwind CSS | UI/UX | Utility-first styling with custom color palette |
| Prisma ORM | Backend | Type-safe database client and schema management |
| PostgreSQL | Database | Serverless Postgres with connection pooling via pgbouncer |
| Clerk | Auth | Authentication, session management, and role metadata storage |
| Zod | Backend | Schema validation for all form inputs on both client and server |
| React Hook Form | Frontend | Performant form state management with zodResolver integration |
| Recharts | Frontend | Attendance charts, count charts, and finance data visualizations |
| React Big Calendar | Frontend | Interactive weekly schedule views for lessons and events |
| Cloudinary | Cloud | Profile image upload, storage, and transformation |
| React Toastify | UI/UX | Non-blocking success and error notifications on form submission |
| Moment.js | Tools | Date formatting and manipulation for calendar and schedule data |
| Vercel | DevOps | Production deployment, edge network, and preview environments |
What was built
Key features
Role-based dashboards deliver tailored views for admins, teachers, students, and parents — each seeing only what's relevant to them.
Full CRUD management for students, teachers, parents, classes, subjects, lessons, exams, and assignments from a unified admin interface.
Interactive scheduling with React Big Calendar shows weekly timetables and upcoming events per role.
Academic tracking records exam and assignment results, attendance history, and performance charts per student.
Server Actions with Zod validation handle all form submissions server-side with real-time error feedback and toast notifications.
Cloudinary-powered image uploads let admins attach profile photos during user creation or update flows.
Clerk authentication with middleware-enforced route guards prevents unauthorized access across all protected routes.
Paginated, searchable data tables with role-scoped action buttons keep large datasets manageable at every list view.
More work
Related projects
M1720 – Shop Center
A production-grade multi-vendor e-commerce platform with real-time chat, AI-powered recommendations, Stripe payments, and a full microservices backend — all in one Nx monorepo.
Hirfa Barber — حِرفة
A cinematic, bilingual luxury barbershop website for a 15-year-old Bethlehem institution — built with animated page transitions, scroll-driven storytelling, and a full AR/EN experience.
Cancer Reports Management System
A secure, role-based medical portal for Khaled Al-Hassan Cancer Hospital — enabling staff to manage research reports, categories, and events with granular access control.