An Arabic-first learning platform that helps students understand their skills, follow personalized learning plans, and explore future career paths.
Masari — مساري brings learning, study guidance, and career exploration into one place.
Students can assess their current skills, practice areas that need attention, track their progress, and talk to an AI assistant for explanations and guidance.
The platform provides two conversation modes:
- AI Tutor — Explains mathematics, offers hints, and reviews solutions.
- Study Mentor — Helps organize study time and explore interests and career options.
Career suggestions are opportunities to explore, not decisions about a student's future.
- Account registration and login
- Student profiles with grade level, goals, and daily study time
- Diagnostic mathematics assessments
- Personalized learning plans
- Practice tasks and progress tracking
- AI Tutor and Study Mentor conversations
- Saved conversation history
- Suggested tasks that students can add to their plans
- School grade recording and editing
- Career exploration with practical activities
- Arabic interface with right-to-left layout
- Responsive design for desktop and mobile
- Soft colors and animated backgrounds with reduced-motion support
| Layer | Technology |
|---|---|
| Frontend | React + JavaScript |
| Routing | React Router |
| Styling | CSS |
| Build tool | Vite |
| HTTP client | Axios |
| Backend | Node.js + Express |
| Authentication | Supabase Auth |
| Database | Supabase PostgreSQL |
| AI provider | Google Gemini |
| Request validation | Zod |
| Automated testing | Vitest |
| Code quality | ESLint |
- Create an account and complete your student profile.
- Take an assessment to identify strengths and areas to practice.
- Get a learning plan based on your results and available study time.
- Practice skills through focused tasks.
- Ask the AI Tutor for explanations, hints, and feedback.
- Talk to the Study Mentor about study habits and future interests.
- Track progress and record school grades.
The initial learning content focuses on:
- Fractions
- Equations
- Percentages
Career exploration currently includes:
- Engineering
- Computer Science
Student profiles support grades 1–12, while the current question bank focuses on secondary-school mathematics.
Full curriculum coverage, official assessments, and school administration dashboards are outside the current scope.
Masari/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ ├── context/
│ │ ├── hooks/
│ │ ├── locales/
│ │ ├── pages/
│ │ ├── services/
│ │ └── styles/
│ └── .env.example
├── server/ # Express backend
│ ├── src/
│ │ ├── controllers/
│ │ ├── routes/
│ │ ├── services/
│ │ └── validators/
│ ├── scripts/
│ ├── tests/
│ └── .env.example
├── supabase/ # Database configuration and migrations
├── docs/ # Evaluation and deployment documentation
├── package.json
└── README.md
- Node.js compatible with the project dependencies
- npm
- A Supabase project
- A Gemini API key for real AI responses
Run from the project root:
npm ci
npm ci --prefix client
npm ci --prefix server
Create your local environment files using:
client/.env.example → client/.env
server/.env.example → server/.env
Configure the API URL, Supabase settings, and AI provider settings using the example files as the reference.
Server secrets must remain in server/.env.
Variables prefixed with VITE_ are public frontend configuration.
Link the Supabase project, review migration history, and apply any pending migrations using the team's database setup process.
See deployment instructions for details.
npm run dev
| Service | Local URL |
|---|---|
| Frontend | http://localhost:5173 |
| API health check | http://localhost:5000/api/health |
Run frontend linting:
npm run lint --prefix client
Run backend tests:
npm test --prefix server
Build the frontend:
npm run build --prefix client
Database concurrency tests require an isolated test database. A successful build does not replace testing the deployed application.
- Authentication through Supabase Auth
- Server-side request validation
- Ownership checks for student data
- PostgreSQL Row Level Security
- Server-only AI and privileged database credentials
- Chat rate limiting and AI concurrency limits
- Request identifiers to prevent duplicate writes
- Retry handling for interrupted chat requests
| Member | Main contribution |
|---|---|
| Basher | Project integration, authentication, student profiles, chat integration, grades, and release preparation |
| Ward | Learning engine, assessments, plans, practice, progress APIs, and AI service foundation |
| Yousef | React interfaces and frontend integration |
All team members contribute to testing, reviewing, and presenting the project.
Masari was built to demonstrate how AI can support students through clear explanations, manageable learning steps, and thoughtful career exploration.
The goal is to help students become more confident learners and make informed choices about their next steps.
The application uses a static React frontend and a separate Express API.
Production deployment requires HTTPS URLs, server environment configuration, Supabase Auth settings, and final acceptance testing.
Learn · Practice · Explore · Grow