A beautifully crafted, interactive educational platform dedicated to teaching Arabic fundamentals, Quranic Surahs, and Namaz guides with seamless audio integration.
Live Site • Features • Tech Stack • Setup Guide • Architecture
Murtuja Full-Stack Developer |
Hi! I'm Murtuja, a passionate developer who loves building premium, production-grade web applications. NoorLearn is a platform built to provide a beautiful, seamless, and interactive way to master foundational Arabic, Surahs, and Namaz. I designed and built every aspect of this platform, focusing heavily on premium aesthetics, flawless audio synchronization, and mobile-first accessibility. My goal is to prove that educational tools can feature polished, "liquid-glass" UI while remaining lightweight and universally accessible.
|
NoorLearn is designed to be a comprehensive educational hub, segmented into distinct interactive modules to facilitate focused learning.
| Feature | Description |
|---|---|
| Audio Synchronization | Built-in custom AudioPlayer utilizing a custom useAudioSync hook to flawlessly sync verse recitations in real-time. |
| Beautiful Typography | High-quality, readable Arabic typesetting utilizing standard digital fonts optimized for supreme legibility across devices. |
| Progressive Disclosure | Clean interface for reading translations alongside the original Arabic text. |
| Playback Control | Play, pause, seek, and auto-advance functionalities integrated directly into the reading flow. |
| Feature | Description |
|---|---|
| Interactive Cards | LetterCard.tsx provides an interactive, visually distinct flip/click card for each Arabic letter. |
| Authentic Pronunciation | Instant audio playback for every alphabet letter to master the correct Makharij (origin of sound). |
| Logical Progression | Structured step-by-step introduction to foundational Arabic reading components. |
| Feature | Description |
|---|---|
| Browser-Based Drawing | A highly responsive DrawingCanvas.tsx allowing users to draw and practice Arabic letters directly on their screen. |
| Touch Optimized | Engineered to work perfectly with mouse, stylus, or touch events on mobile and tablets. |
| Instant Reset | Instant canvas manipulation with "Clear" and "Reset" commands for repetitive practice and muscle memory building. |
| Feature | Description |
|---|---|
| Step-by-Step Instructions | A comprehensive visual guide detailing the postures, recitations, and correct order of Islamic prayer. |
| Focused Modules | Minimalist UI presenting each step without visual clutter, enhancing retention and readability. |
| Feature | Description |
|---|---|
| Premium Aesthetic | Frosted-glass components, soft gradients, and a culturally resonant color palette. |
| Mobile-First Navigation | Bottom tab navigation (BottomNav.tsx) ensuring the app feels and behaves identically to an installed native mobile app. |
| React Context Driven | State management utilizing React Context enables fluid transitions and guarantees retained audio player states across navigations. |
|
Next.js 16 |
React 19 |
Tailwind v4 |
TypeScript 5 |
Vercel |
| Icon | Category | Technology | Purpose |
|---|---|---|---|
| Framework | Next.js 16 (App Router) | High-performance React framework with server-side rendering and edge routing. | |
| UI Library | React 19 | Modular component architecture, concurrent rendering, and advanced hooks. | |
| Styling | Tailwind CSS v4 | Utility-first CSS powering the custom design tokens and dark mode semantics. | |
| Language | TypeScript 5 | Strict static typing for robust scaling and fail-safe data handling. |
noorlearn/
├── app/ # Next.js App Router root
│ ├── layout.tsx # Root layout (fonts, metadata, contexts)
│ ├── page.tsx # Landing platform dashboard
│ ├── globals.css # Main styling design tokens
│ ├── robots.ts # Search engine crawler instructions
│ ├── sitemap.ts # Automated SEO sitemap generation
│ │
│ ├── learn/ # Arabic alphabet learning center
│ ├── practice/ # Interactive writing playground
│ ├── surah/ # Quranic surahs and audio playback
│ └── namaz/ # Comprehensive step-by-step prayer guides
│
├── components/ # Global UI Building Blocks
│ ├── TopNav.tsx # Desktop-optimized global header
│ ├── BottomNav.tsx # Native app-like mobile tab bar
│ ├── AudioPlayer.tsx # Universal persistent audio controller
│ ├── DrawingCanvas.tsx # Touch-enabled writing and drawing canvas
│ ├── LetterCard.tsx # Interactive alphabet flashcards with auto-audio
│ └── SurahText.tsx # Specialized formatted verse display component
│
├── hooks/ # Custom Technical Logic
│ └── useAudioSync.ts # Synchronizes audio timing with UI highlighting
│
├── context/ # Architecture State Management
│
├── data/ # Local structured datasets (surahs, alphabets)
│
├── public/ # Static payloads, imagery, and external audio
└── package.json
- Node.js ≥ 18.0.0
- npm or yarn
git clone https://github.com/imurtuja/noorlearn.git
cd noorlearnnpm installnpm run devOpen http://localhost:3000 to see NoorLearn running locally.
npm run build
npm start
NoorLearn is deployed globally and live at noorlearn.murtuja.in
This architecture is optimized for edge-network distribution. The recommended deployment platform is Vercel:
- Push your code repository to GitHub.
- Import the project into Vercel.
- Deploy — Vercel will automatically detect the Next.js target and configure the build settings gracefully.
Contributions, issues, and feature requests are welcome! If you want to expand the educational modules or improve translations:
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-surahs - Commit your changes:
git commit -m "feat: add new surah translations" - Push to the branch:
git push origin feature/new-surahs - Open a Pull Request
Murtuja - Full-Stack Developer
Distributed under the MIT License.
Made with 🤍 by Murtuja