Lisan & Quran (TrackQuran)
A tutoring platform for Quran and Arabic lessons — live at lisanquran.com.
What's inside
- Tutor workspace — student roster, live Quran recitation logging with per-letter
mistake marking and a full tajweed color engine, progress statistics, attendance,
billing/invoices, and a lesson calendar with Google Meet integration.
- Student portals — shareable
/report/:id links and the unified /portal/:id,
plus Google sign-in self-registration (/join) with a logged-in portal (/student).
- Arabic lessons — lesson calendar, homework/exam builder, vocabulary and grammar
authoring, and lesson-progress tracking with PDF slides.
- Learning games — Letter Flight, Word Flight, Letter Race, Flappy Letters
(online 2-player over WebRTC P2P + Supabase fallback), Tower Defense,
and Crane Builder (live tutor↔student sessions).
Stack
React 19 + TypeScript + Vite · Tailwind (build-time via PostCSS) · Supabase
(Postgres, Auth, Realtime, Storage) · Vercel (hosting + api/gemini.js
serverless Gemini proxy) · lottie-web · pdfjs-dist.
Run locally
npm install
npm run dev # http://localhost:3000
npm run build # production build into dist/
Environment: Supabase keys live in lib/supabase.ts; GEMINI_API_KEY is a
Vercel serverless env var (never shipped to the browser).
Layout
| Path | Contents |
|---|
components/ | All pages + games (routing is pathname-based in App.tsx) |
services/ | Supabase data access + domain engines (e.g. tajweed colors) |
supabase/ | SQL migrations (migrations/ is the dated, canonical set) |
public/ | Static assets — Fonts/ here is the LIVE, hand-patched set |
Fonts/ | Local-only pre-patch font backups (untracked) |
api/ | Vercel serverless functions |
