Sirat is a meticulously crafted, bilingual Islamic web application that seamlessly blends spiritual devotion with modern technology. Built with React and featuring a stunning aurora-glass UI, it provides Muslims worldwide with instant access to the Qur'an, prayer tools, Islamic knowledge, and community resourcesβall wrapped in an experience that feels both reverent and delightfully modern.
- 114 Surahs at your fingertips with beautiful Arabic typography
- Bilingual display with seamless Arabic/English switching
- Smart progress tracking - pick up right where you left off
- Personalized experience with "Surah of the Day" and bookmarks
- Diacritic-safe rendering using optimized Arabic fonts
- Makkah - Explore the Kaaba's significance, history, and live views
- Madinah - Journey through the Prophet's city with guided content
- Jerusalem - Discover Al-Aqsa's importance, Isra & Mi'raj, and landmarks
- Live streaming integration for spiritual connection
- Interactive maps with key landmarks
- Beautiful dhikr counter with common remembrances
- Arabic diacritics perfectly preserved
- Preset selections including SubαΈ₯ΔnAllΔh, AlαΈ₯amdulillΔh, and more
- Progress tracking with increment/decrement controls
- Auto-reset options for seamless practice
- Zero-friction mosque discovery using OpenStreetMap
- Dynamic clustering for clean map visualization
- One-tap navigation to Google Maps, Apple Maps, or Waze
- Responsive design optimized for mobile use
- Hadith collection with authentic narrations
- Du'as for daily life and special occasions
- Prophet stories and companions' narratives
- 99 Names of Allah with meanings
- Educational content for all ages
- Zakat calculator with comprehensive guidance
- Prayer & Wudu guide with step-by-step instructions
- Personal bookmarks synced across devices
- User accounts with Supabase authentication
- Theme customization with light/dark modes
Sirat features a sense of spiritual elevation:
- π± iOS-inspired icons for intuitive navigation
- π― Large touch targets for accessibility
- π Dark mode for comfortable night reading
- React 18.3 - Modern component architecture
- React Router - Seamless SPA navigation
- Tailwind CSS - Utility-first styling
- shadcn/ui - Premium component library
- Lucide React - Beautiful, consistent icons
- Supabase - Authentication & real-time database
- PostgreSQL - Robust data persistence
- AlQuran.cloud API - Comprehensive Qur'an metadata
- OpenStreetMap - Open-source mapping
- Full RTL support for authentic Arabic experience
- Bilingual architecture (Arabic/English)
- Context-based state management
- Responsive design from mobile to desktop
- Performance optimized for all devices
- Node.js 18+ and npm/yarn
- Supabase account (free tier works)
- Modern browser with ES6 support
# Clone the repository
git clone https://github.com/MAtiyaaa/sirat.git
cd sirat
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your Supabase credentials
# Start development server
npm run devVITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key# Create optimized build
npm run build
# Preview production build
npm run previewsirat/
βββ src/
β βββ components/ # Reusable UI components
β β βββ ui/ # shadcn/ui components
β β βββ QuranReader/ # Qur'an specific components
β β βββ Tasbih/ # Digital counter components
β β βββ Maps/ # Mosque locator components
β βββ contexts/ # Global state management
β β βββ SettingsContext.jsx
β β βββ AuthContext.jsx
β β βββ AudioContext.jsx
β βββ pages/ # Route components
β β βββ Home/
β β βββ Quran/
β β βββ HolyCities/
β β βββ Utilities/
β βββ lib/ # Utilities & helpers
β βββ hooks/ # Custom React hooks
β βββ styles/ # Global styles & themes
βββ public/ # Static assets
βββ supabase/ # Database migrations
βββ package.json
| Route | Description |
|---|---|
/ |
Home with hero, daily cards, and app grid |
/quran |
Surah index with search and filters |
/quran/:surahNumber |
Individual surah reader |
/tasbih |
Digital dhikr counter |
/duas |
Collection of supplications |
/hadith |
Curated hadith collections |
/mosquelocator |
Interactive mosque finder |
/makkah |
Makkah city guide and resources |
/madinah |
Madinah city guide |
/jerusalem |
Jerusalem and Al-Aqsa content |
/account |
User profile and settings |
-- User's last viewed surah
CREATE TABLE last_viewed_surah (
user_id UUID PRIMARY KEY REFERENCES auth.users(id),
surah_number INT NOT NULL,
updated_at TIMESTAMP DEFAULT NOW()
);
-- Reading progress tracking
CREATE TABLE reading_progress (
user_id UUID REFERENCES auth.users(id),
surah_number INT NOT NULL,
ayah_number INT NOT NULL,
updated_at TIMESTAMP DEFAULT NOW(),
PRIMARY KEY (user_id, surah_number)
);
-- User bookmarks
CREATE TABLE bookmarks (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
user_id UUID REFERENCES auth.users(id),
surah_number INT NOT NULL,
ayah_number INT,
created_at TIMESTAMP DEFAULT NOW()
);We welcome contributions that align with Sirat's mission of providing accessible Islamic knowledge with excellence.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please ensure:
- Code follows the existing style patterns
- Arabic content is properly reviewed for accuracy
- UI changes maintain the aurora-glass aesthetic
- All features are mobile-responsive
- RTL support is maintained
This project is licensed under the MIT License - see the LICENSE file for details.
- AlQuran.cloud for comprehensive Qur'an API
- shadcn/ui for beautiful component primitives
- Muslim community for feedback and support
- All contributors who help make Sirat better
If you find Sirat beneficial, please consider:
- β Starring the repository
- π Reporting bugs or suggesting features
- π Contributing translations or content
Website β’ Issues β’ Discussions
May this project be a means of guidance and benefit. Ameen.