Alkamnja
Bilingual Arabic/English online violin school
Role: Full-stack: schema, payments, i18n and UI
- locales, RTL-first
- 2
- tables and RPCs
- 17
- design-token source of truth
- 1
Overview
An online violin school for an Egyptian instructor, built Arabic-first: the default locale is Arabic and the entire layout is RTL unless a visitor switches to English. Locale lives in the route (`/[lang]/…`), so every page, every dashboard and every email exists in both languages with the correct direction.
Students browse courses, buy through Paymob with coupon support, work through sections and lessons with playback progress tracked per lesson, ask questions the instructor answers inline, and download a certificate that carries a public verification code.
The admin side covers courses and curriculum, orders and invoices, students, coupons, contact messages and settings. Payment settlement runs through a Paymob webhook with a separate return handler, so a customer closing the tab mid-redirect does not lose the order.
The screens
15The same site in Arabic, laid out right to left
Captured from the running system. Records shown are demonstration data.
The interesting part
Design tokens as the only source of truth.
Colour, type, spacing, effects and motion each live in their own token file, wired into Tailwind with `@theme inline` so utilities emit `var(--brand)` rather than baking in a hex value. Change a token and every utility in the app follows. Copy is treated the same way: the dictionaries are taken verbatim from the approved design, so a wording change starts in the design rather than drifting in the code.
What it does
- Arabic-first bilingual routing with per-locale metadata and direction
- Paymob checkout with a webhook settlement path and a separate return handler
- Coupons, quoted orders and printable invoices
- Per-lesson playback progress and course completion
- Certificates issued automatically, with public code verification
- Student Q&A with instructor replies
- Admin: courses, curriculum, orders, students, coupons, messages, settings
- Transactional email templates with a scheduled welcome cron
- Signed attachment delivery and a storage sweep cron for orphaned files
Built with
- Framework
- Next.js
- React
- App Router
- Server Components
- Language
- TypeScript
- UI
- Tailwind CSS
- GSAP
- Design tokens
- Data
- Supabase
- PostgreSQL
- Postgres RPC
- Backend
- Row Level Security
- Paymob
- Resend
- Cron routes
- Practices
- Arabic RTL
- i18n
- SEO
Next project
Byway LMS
Course marketplace with instructor, student and operations dashboards