A quiet Quran reading and listening app built with Expo and React Native, featuring a vertical chapter carousel, Arabic calligraphy typography, audio recitation with a progress ring, and a restrained design system.
2025Personal Project
01
Overview
Role
Designer & Developer
Duration
Ongoing
Team
1
Qira is a Quran reading and listening app designed around a single principle: get out of the way of the content. The home screen is almost entirely empty, with a vertical snap carousel of all 114 chapters, each card showing the surah name in a custom Arabic calligraphy font, metadata pill badges, and an icon tray for favorites, notes, tafsir, and audio. Audio playback is accompanied by a canvas-drawn gradient progress ring. Cards flip with a 3D perspective animation to reveal the chapter introduction. The color system is deliberately restrained, with a single green accent and carefully stepped grays for both light and dark mode. Every icon comes from the Solar BoldDuotone set for visual consistency. Animations run on the UI thread via Reanimated, keeping gesture response immediate and physical.
02
Built with
React Native
Expo
Reanimated
TypeScript
Zustand
03
What was hard, and what I did
Challenges
Rendering Arabic calligraphy glyphs faithfully at any size
Building a snap carousel with physical spring physics
Designing a dark mode with its own palette rather than inverted light mode values
Keeping the interface calm while still surfacing all necessary actions
Solutions
Loaded custom surah glyph font for calligraphic names, plus Amiri for body Arabic text
Used Reanimated on the UI thread with interpolated scale, opacity, and spring snapping
Designed light and dark palettes in parallel with distinct accent tones and contrast steps
Restricted the accent color to a single green and grouped actions in a compact icon tray