Full Stack

Zikra
Platform

Zikra Dar ul Nashr publishes Urdu tarjuma lessons and children's Islamic books. We rebuilt their website into one bilingual platform where learners can watch the full Quran as short video lessons, read every surah with Urdu and English translations, and browse the Zikra book series. The whole site switches between English and Urdu (right-to-left) and supports light and dark themes.

Back To Projects View Live Project
Zikra home page with the Surah Al-An'am verse
Home page
Quran lessons list
Verse-by-verse reader
Mus'haf reading view
Book detail page
Urdu right-to-left mode
Tech Stack

Technologies Used

A fast single-page app with code-split routes, so each lesson or surah loads only what it needs

React React
Vite Vite
Tailwind CSS Tailwind CSS
React Router React Router
YouTube YouTube Embeds
Vercel Vercel
Inside The Platform

What Learners Get

Three ways into the Quran: watch, read, and learn with children's books

Quran Lessons page with Surah, Juz and Rub' tabs and search

Video lessons, ruku by ruku

558 tarjuma lessons covering all 114 surahs. Browse by Surah, Juz or Rub', search, and move through rukus with previous and next.

Surah Al-Fatihah in the verse reader with Urdu and English translations

Verse-by-verse reader

Arabic text with Urdu (Maulana Fateh Muhammad Jalandhari) and English (Mufti Taqi Usmani) translations, and a button to jump to the matching lesson.

Surah Ya-Sin in the Mus'haf view

Mus'haf, word and present modes

Switch from verses to a continuous Mus'haf page or word-by-word view, or open Present mode for full-screen teaching.

Nursery Al-Quran, Al-Hadith and Al-Fiqh book page

Zikra book series

9 children's books from Nursery to 5th Class, each with a page preview gallery, publisher details and a way to order.

Process

How It Works

How the content is organised behind the scenes

1

One Quran Index

Every surah, juz, rub' and ruku is mapped once, so lessons and the reader share the same structure and link to each other.

2

Lessons From YouTube

Zikra's existing YouTube lessons are matched to each ruku and played inside the site, so the client keeps uploading where they already do.

3

Bilingual By Default

Every label has an English and an Urdu version. Choosing Urdu flips the whole layout to right-to-left with Nastaliq type.

Scope

What We Delivered

The size of the content now available in one place

558 video lessons across all 114 surahs, one per ruku
All 6,236 ayahs readable with Urdu and English translations
9 children's books, Nursery to 5th Class, each with its own page
Full English and Urdu (right-to-left) interface with light and dark themes
Why It Matters

Business Impact

Zikra's lessons, translations and books used to be spread across YouTube, social media and print. Now a learner can open any surah, read the translation, and watch the lesson for that exact ruku in a couple of clicks, in the language they read best. Teachers get a Present mode for the classroom, and schools can browse the full book series before ordering. Because lessons still come from YouTube, the team keeps their existing workflow and every new upload can be linked into the site.

Next Project

Amazon Captcha
Bypass Scraper
Amazon Captcha Bypass Scraper

Interested in a similar project?

Let's discuss how we can build something great together.

Start Your Project