Interactive Web App · EdTech
Ajrum: Interactive Arabic Grammar Study Engine
A responsive, client-side single-page application transforming classical Arabic grammar rules into interactive breakdowns, visual component hierarchies, and active quiz testing engines.
100% Client-Side Zero-latency interactive grammar engine
The challenge
Classical Arabic grammar texts like Matn Al-Ajrumiyyah are foundational yet dense, historically presented in linear, static books that encourage rote memorization rather than active syntactic mastery.
The strategic move
Engineered an offline-first single-page web app structured with component hierarchies, color-coded grammar cases (Marfoo'at, Mansoobat, Makhfoodat), instant search, and self-scoring drills.
The verified impact
Shipped as a standalone, ultra-lightweight web tool deployed live on mohamedelbana.net/ajrum/ with zero loading lag and full mobile responsiveness.
The vision & architecture
Grammar is essentially a deterministic rule engine. When presented as code and interactive UI components, rules become tangible: every grammatical state has distinct visual markers, and users can test their comprehension with immediate feedback.
Key takeaways
My contribution
Sole architect, designer, and developer. Structured the grammatical data schemas, built the responsive frontend in React/Tailwind, and packaged it for instant static hosting.
What I'd do differently
- Complex rule systems are dramatically more accessible when structured through visual UI hierarchies rather than flat text.
- Self-contained, static-first architecture eliminates operational costs and guarantees 100% uptime with sub-100ms load times.