(01 / 08) — Full Case Study

ElQuran — Quran Reading Platform

Built a full React web app with all 114 Surahs, elegant Arabic typography, multiple audio recitations, verse-by-verse translations in multiple languages, advanced search, and a responsive emerald-themed design.

ReactTailwind CSSFramer Motion
Cover — WebShot 01
ElQuran — Quran Reading Platform
Fact Sheet
Role
Frontend Developer
Year
2023
Client
Personal / Community
Platform
Web
Stack
React · Tailwind CSS · Framer Motion
The Showcase

A visual journey through the screens.

5 frames, capture by capture — how ElQuran actually flows, from first launch to final booking.

The home, wide open
Frame 01 / 05Web · browser
Frame 01Web View

The home, wide open

Bismillah opens every session in flowing Arabic typography. The reader and the rest of the platform sit behind a clean, searchable home — the interface steps out of the way of the text.

114 surahs, one list
Frame 02 / 05Web · browser
Frame 02Web View

114 surahs, one list

A fast, searchable grid of every surah with revelation type, ayah count and a one-line summary. Jumping between chapters takes a single click.

The reader
Frame 03 / 05Web · browser
Frame 03Web View

The reader

Verses are numbered, clickable and spaced for comfortable reading. Each surah flows in crisp Arabic typography, with the toolbar and controls tucked quietly around the text.

Translations beside the text
Frame 04 / 05Web · browser
Frame 04Web View

Translations beside the text

Verse-by-verse translations sit beside the Arabic in a layout you can toggle in a tap. Multiple languages, no page reload, and the verse stays perfectly aligned.

Beautiful on the road
Frame 05 / 05Mobile · phone
Frame 05Mobile View

Beautiful on the road

The responsive layout keeps the whole experience intact on a phone — the same surahs, the same clean reading, re-flowed for any screen.

Overview

Users needed a modern, complete Quran reading experience with multiple recitations, translations, and a clean interface.

ReactTailwind CSSFramer Motion