This is the public-facing React website built for Kholafaa Al-Laithy Primary School.
- Framework: React + Vite
- Router: React Router v7
- Styling: Tailwind CSS v4 (RTL-first)
- Icons: React Icons (Feather Icons)
- Toasts: React Hot Toast
- Languages: Bilingual support (Arabic & English translation system with automatic LTR/RTL flip)
- Node.js LTS installed
- Install dependencies in
/client:npm install
- Start the development server:
npm run dev
- Home (
/): Main landing page showcasing school features, metrics (numbers), principal message, core school values, and teasers for the latest announcements/events. - About Us (
/about): View the school's Vision & Mission (الرؤية والرسالة), core values, and history. - Academics (
/academics): Dynamic listing of Grade Levels (1 to 6). Click on any grade to view its classes (e.g. 1/أ, 1/ب) and subjects (e.g. Arabic, Math, English). - News (
/news): Full paginated list of announcements with search capability. Click on any card to read details in a modal. You can deep link to an announcement using?id=ANNOUNCEMENT_ID. - Events (
/events): Complete timeline of upcoming school events, showing locations and times. - Gallery (
/gallery): Beautiful photo album of school events, fully filterable by category (activities, celebrations, sports, general). - Contact Us (
/contact): Submit suggestions/messages. Form validates parameters using Zod on the server and provides instant interactive toast and validation messages. - Login Portal (
/login): Secure form leading to the dashboard login page. - Admin Dashboard (
/admin): Core management workspace containing sub-panels:- Overview: Dynamic school metrics statistics.
- Students (
/admin/students): Search, paginate, filter, add/edit students, and bulk import from Excel worksheets. - Guardians (
/admin/guardians): CRUD fields for parent/guardian contact profiles. - Teachers (
/admin/teachers): Create profiles and assign classes and subjects to teachers. - Academics (
/admin/academics): Set up Grade Levels, Classrooms, and Subjects. - Results (
/admin/results): Enter scores, view reports, upload and delete PDF report cards. - CMS Management (
/admin/cms): Manage announcements, calendar events, and gallery slider images. - Messages (
/admin/messages): Read and manage contact form submissions. - Users (
/admin/users): Create credentials, update roles (ADMIN,TEACHER,STAFF,TEACHER_STAFF), and reset passwords.
https://primary-school-virid.vercel.app/
**backend not included in this repo still work on progress but it's applied to the live view