Live at: hajj.ummah.build
A comprehensive, interactive web application to help Muslims prepare for the sacred pilgrimage to Makkah. Built with React, TypeScript, and Tailwind CSS.
- Full-Screen Journey Page - Step-by-step immersive walkthrough with swipe/keyboard navigation
- Interactive Home Dashboard - All tools and information in one place
- Country Requirements - Specific visa and document requirements by nationality (12+ countries)
- Travel Guide - Complete packing lists, health advice, distances, common mistakes
- Quran Explorer - Browse all Hajj-related verses with filters, sorting, and audio
- Blog/Learning Center - SEO-optimized educational articles with search and related posts
- FAQ Section - Comprehensive FAQs with cited sources
- Downloadable Documents - PDF guides with preview and toggle view modes
- Hajj Date Calculator - Projects upcoming Hajj dates (2024-2030) based on the Islamic lunar calendar
- Hijri Calendar Explanation - Detailed explanation of CE vs AH calendar systems with sources
- Cost Calculator - Estimates expenses by country, package type with currency conversion
- Expense Tracker - Budget tracking with category breakdown, cost-saving tips, and estimated costs
- Interactive Map - Clickable map with all Hajj locations, Google/Apple Maps integration
- Animated Timeline - Day-by-day journey visualization with scroll animations
- Quran Audio Player - Verse-by-verse recitation with favorites and autoplay
- Mini Player - Persistent audio player that stays visible while browsing
- Video Embeds - YouTube videos with live availability checking via oEmbed API
- Weather Forecasts - Hajj season temperatures for Makkah, Madinah, Mina, Arafat, Muzdalifah
- Document Checklist - Interactive checklist with localStorage persistence
- Printable PDF - Download checklist with saved notes for offline use
- Practical Tips - Health advice, expectations, and common mistakes per ritual
- Profile & Settings - Global language, currency, favorites, and progress tracking
- Types of Hajj - Clear comparison of Ifrad, Qiran, and Tamattu
- Ritual Prayers - Key prayers with Arabic, transliteration, and sources
- Arabic Tooltips - Hover translations for all Arabic terms with etymology and pronunciation
- Hadith Tooltips - Contextual hadith references with grading and source links
- Quran Ref Tooltips - Hoverable Quran references with Arabic text and translation
- Sunnah Acts - Detailed Sunnah for Tawaf and Sa'i with green lights area
- Location History - Historical context for each sacred site
- Multi-currency Support - 13 currencies with conversion
- Multi-language Ready - 8 language selections with RTL support
- Responsive Design - Mobile-first, works on all devices with touch/swipe navigation
- SEO Optimized - Meta tags, JSON-LD structured data, OG images
- AI Engine Optimized - Semantic HTML, structured data for AI crawlers
- GPS Integration - Direct links to Google Maps and Apple Maps
- PWA Ready - Service worker for offline access
- Accessibility - ARIA labels, keyboard navigation, semantic HTML
- Multi-language content translations (Arabic, Urdu, Bahasa, Turkish)
- Weather forecasts for Hajj season ✅ (Historical averages with heat safety tips)
- YouTube video availability checking ✅ (oEmbed API integration)
- Currency live rates API integration ✅ (Frankfurter API with fallback)
- Push notifications for Hajj dates
- Complete Quran mini player integration with favorites
- Community forum/tips section
- Travel agency directory with ratings
- Group coordination features
- AI chatbot for Hajj questions
- Offline PWA with full content caching
- Prayer time integration for Makkah/Madinah
- Hotel comparison feature
- Packing list with weight calculator
- AR navigation for Masjid Al-Haram
- Live crowd density indicators
- Hajj simulation/training mode
- Integration with official Nusuk app
- Carbon footprint calculator for travel
- Virtual Tawaf experience
- Audio du'a library with playback
- Social sharing for journey progress
- Scroll progress indicator ✅
- Back to top button ✅
- Skeleton loading states for all sections
- Progressive image loading
- Breadcrumb navigation on sub-pages
- Print styles for all pages
- Dark mode refinements
- Implement sitemap.xml ✅
- Enhanced robots.txt ✅
- 15 SEO blog posts with fact-checking ✅
- Add robots.txt improvements
- Lazy load below-fold sections
- Image optimization pipeline
- Core Web Vitals optimization
- Add more blog content for long-tail keywords
All religious information is verified from:
| Source | URL | Content Type |
|---|---|---|
| Quran.com | https://quran.com | Quranic text, translations & audio |
| Sunnah.com | https://sunnah.com | Hadith database with grading |
| Saudi Ministry of Hajj | https://www.haj.gov.sa/en | Official requirements |
| Nusuk Portal | https://hajj.nusuk.sa | Official Hajj journey guide |
| IslamQA | https://islamqa.info/en | Scholarly rulings |
| Islamic Relief | https://www.islamic-relief.org.uk/hajj-guide/ | Educational |
| Wikipedia - Hajj | https://en.wikipedia.org/wiki/Hajj | Historical context |
src/
├── components/
│ ├── ui/ # UI components (shadcn)
│ ├── InteractiveMap.tsx # Hajj locations map with GPS
│ ├── QuranExplorer.tsx # Verse browser with filters
│ ├── QuranAudioPlayer.tsx # Audio recitation player
│ ├── QuranMiniPlayer.tsx # Persistent mini player
│ ├── BlogSection.tsx # SEO blog section with search
│ ├── QuranRefTooltip.tsx # Hoverable Quran references
│ ├── HadithTooltip.tsx # Hadith context tooltips
│ ├── ArabicTermTooltip.tsx # Arabic translations
│ ├── ExpenseTracker.tsx # Budget tracking with tips
│ ├── DocsSection.tsx # Downloadable documents
│ ├── RitualPrayers.tsx # Prayer guide
│ ├── PrintableChecklist.tsx # PDF export
│ ├── ProfileSheet.tsx # User settings & favorites
│ └── SEOHead.tsx # Dynamic SEO meta tags
├── data/
│ ├── blogPosts.ts # SEO blog content
│ ├── hajjLocations.ts # Location data with GPS
│ ├── hajjJourneyData.ts # Steps, Sunnah acts, du'as
│ ├── hajjData.json # Rituals, prayers, glossary
│ ├── hajjStatistics.json # Country data, Quran refs
│ └── travelGuide.ts # Packing, health, distances
├── contexts/
│ └── SettingsContext.tsx # Currency, language, favorites
├── lib/
│ ├── arabicGlossary.ts # Arabic terms database
│ ├── hadithGlossary.ts # Hadith database with grading
│ ├── hijriCalendar.ts # Date calculations
│ └── translations.ts # i18n strings
└── pages/
├── Index.tsx # Main dashboard
├── BlogPage.tsx # Individual blog posts
├── JourneyPage.tsx # Full-screen step-by-step
├── CountryRequirements.tsx # Country-specific visa
├── TravelGuidePage.tsx # Complete travel guide
├── StepsPage.tsx # Full steps guide
├── QuranPage.tsx # Quran explorer page
├── ChecklistPage.tsx # Document checklist
├── ExpensesPage.tsx # Expense tracker
├── LotteryPage.tsx # Hajj lottery info
└── FAQPage.tsx # FAQ page
- Framework: React 18 + TypeScript
- Styling: Tailwind CSS + shadcn/ui
- Build: Vite
- Routing: React Router v6
- State: React Context + localStorage
- Audio: Quran.com Audio API
- Maps: Google Maps & Apple Maps deep links
- Testing: Vitest + Testing Library
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run tests (includes fact-checking)
npm testThe project includes automated tests for both functionality and religious content accuracy.
# Run all tests
npm test
# Run specific test file
npx vitest run src/test/factCheck.test.ts
# Run tests in watch mode
npx vitest| Test File | Purpose |
|---|---|
hijriCalendar.test.ts |
Validates Hajj date calculations and accuracy |
videoSection.test.ts |
Verifies YouTube video IDs and sources |
factCheck.test.ts |
Validates religious content accuracy |
example.test.ts |
Basic setup verification |
When adding new content:
- Quran Verses: Verify translation via Quran.com
- Hadith: Check grading via Sunnah.com
- Hajj Rules: Cross-reference with Saudi Ministry of Hajj
- Dates: Validate against IslamicFinder lunar calendar
- Videos: Manually verify YouTube links are active and content is appropriate
// src/test/myFeature.test.ts
import { describe, it, expect } from 'vitest';
describe('Feature Name - Fact Check', () => {
it('validates specific religious content', () => {
// Add fact-checking assertions
});
});All verses are from Sahih International translation via Quran.com API.
Authentic hadith from Bukhari, Muslim, Tirmidhi, Abu Dawud, Ibn Majah via Sunnah.com. All hadith include grading (Sahih/Hasan) and grading authority.
Hijri dates are calculated using lunar month approximations. Actual Hajj dates may shift ±1 day based on moon sighting.
All coordinates verified via official Saudi Tourism Authority and Google Maps.
- Semantic HTML5 structure (
<main>,<article>,<section>) - JSON-LD structured data for FAQs, articles, and HowTo
- Meta descriptions under 160 characters
- Open Graph and Twitter Card meta tags
- Alt text for all images
- Proper heading hierarchy (single H1 per page)
- Mobile-responsive viewport meta
- Canonical URLs for all pages
- ARIA labels for interactive elements
- Keyboard navigation support
- Color contrast compliance
- Blog section for long-tail SEO keywords
This guide is for educational purposes only. Always consult qualified Islamic scholars for specific religious rulings. Verify all requirements with the Saudi Ministry of Hajj and your local embassy before traveling.
Made with ❤️ for the Muslim Ummah
رَبَّنَا تَقَبَّلْ مِنَّا ۖ إِنَّكَ أَنتَ السَّمِيعُ الْعَلِيمُ
"Our Lord, accept [this] from us. Indeed, You are the All-Hearing, the All-Knowing." — Quran 2:127