EMP: Education Platform
An Arabic-first admin console for selling exam-prep courses through a network of bookshops across Iraq.
Blurred on purpose: client work under NDA
Slide 1 of 9
Sole frontend developer
I built the front end of EMP, the admin console behind a tutoring business that sells exam-prep courses through bookshops and registration offices across Iraq. Staff use it to price courses, look after the agents who sell them and their debt, approve every sale, deposit and refund, and decide who can do what. It’s Arabic-first, with English, dark mode and a phone layout for every page.
- Agent wallets and debt limits, with a warning past 74% of the limit
- Sales, deposits and refunds, each approved or rejected by staff
- Receipt PDFs with a barcode, a Telegram QR code and activation steps
- Course pricing with exam price, agent commission and code uploads from Excel
- Coupons with separate course and exam discounts, caps and validity
- A statistics dashboard with per-card filters and a detail panel
- Vue 3
- TypeScript
- Vite
- Vuetify 3
- Vuexy
- Pinia
- TanStack Vue Query
- ofetch
- CASL
- vue-i18n
- Mapbox GL
- jsPDF
How I built it
- Role-based access with CASL: routes, menu, cards and buttons all check the same rules
- Arabic-first RTL with vue-i18n (Arabic and English), plus light, dark and system themes
- A Desktop and a Mobile variant for every list and detail page, lazy-loaded and switched at 960px
- TanStack Vue Query over ofetch, with a single-flight JWT refresh and URL-synced filters
- Receipts, bank statements and vouchers generated in the browser (jsPDF, html2canvas-pro, JsBarcode, qrcode)
- An installable PWA with an update prompt, a Mapbox location picker, and phone OTP login