Dirasah
Dirasah is an academic platform designed for Qawmi Madrasah curriculum. It provides comprehensive access to religious texts with Arabic content, translations, detailed analysis, note-taking capabilities, and community discussion features. The platform empowers students and scholars to engage deeply with their studies in a secure, collaborative environment.
Role
Lead Frontend Developer
Technologies
Goals
- 01Create an intuitive interface for navigating complex Arabic texts
- 02Build a robust note-taking system with verse-level annotations
- 03Enable community discussions while maintaining a focused learning environment
- 04Ensure accessibility across devices for students worldwide
Challenges
- 01Implementing right-to-left (RTL) text support with proper typography
- 02Building a performant search system for Arabic content
- 03Managing complex state for reading progress and annotations
- 04Optimizing load times for large text collections
Implementation
The platform was built using Next.js for server-side rendering and optimal SEO. We implemented a custom RTL layout system and used Prisma ORM with PostgreSQL for efficient data management. The frontend leverages React Query for caching and Tailwind CSS for responsive styling. Special attention was paid to typography, using carefully selected Arabic fonts for readability.
Results
500+ active students using the platform daily
40% improvement in study engagement metrics
98% user satisfaction rate in feedback surveys
Successfully digitized 50+ classical texts