A beautiful, modern Islamic Quran reading website built with Next.js 16, providing a seamless and spiritual experience for reading the Holy Quran. Read surah by surah, browse the entire Quran with continuous scrolling, search for verses, and discover the wisdom of Islam.
- 📖 Surah-by-Surah Reading - Read each of the 114 surahs individually with beautiful Arabic typography and verse-by-verse display
- 📜 Continuous Scrolling - Browse the entire Holy Quran with seamless, infinite scrolling for an uninterrupted reading experience
- 🔍 Advanced Search - Search for specific verses, words, or phrases across all 6,236 verses of the Quran
- 🏷️ Smart Filtering - Filter content by surah name, juz number (1-30), page number, or topic for easy navigation
- 🌍 Multi-language Support - Complete interface available in English, Arabic (العربية), and Kurdish (کوردی) with full RTL support
- 🎨 Islamic Design - Carefully crafted Islamic-inspired color palette with emerald green and gold accents
- 📱 Fully Responsive - Perfect reading experience across desktop, tablet, and mobile devices
- 🌙 Eye-Friendly Themes - Beautiful light and dark modes optimized for comfortable reading sessions
- ⚡ Performance Optimized - Built with Next.js 16 for lightning-fast page loads and smooth interactions
- Bun (required package manager)
- Node.js 18+ (for compatibility)
# Clone the repository
git clone https://github.com/Ahmad-Softwaree/quran.git
cd quran
# Install dependencies with Bun
bun install
# Run the development server
bun devOpen http://localhost:3000 with your browser to start reading the Quran.
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS 4 with CSS Variables
- UI Components: shadcn/ui (New York style)
- Icons: Lucide React
- Internationalization: next-intl
- Theme Management: next-themes
- URL State: nuqs
- Animations: framer-motion
- Package Manager: Bun (ONLY)
- Language: TypeScript
quran/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Root page
│ ├── not-found.tsx # Root 404 page
│ └── [locale]/ # Internationalized routes
│ ├── layout.tsx # Locale layout
│ ├── page.tsx # Homepage
│ ├── error.tsx # Error boundary
│ ├── loading.tsx # Loading state
│ ├── not-found.tsx # Locale 404 page
│ ├── globals.css # Global styles
│ ├── providers.tsx # App providers
│ ├── (root)/ # Root pages group
│ └── [...rest]/ # Catch-all routes
│
├── components/ # React components
│ ├── ui/ # shadcn/ui components (60+ components)
│ ├── layouts/ # Layout components
│ │ ├── header.tsx # Site header
│ │ └── footer.tsx # Site footer
│ ├── sections/ # Page sections
│ │ ├── hero-section.tsx # Hero banner
│ │ ├── features-section.tsx # Features showcase
│ │ └── ayah-section.tsx # Verse display
│ ├── shared/ # Shared components
│ │ ├── animate.tsx # Animation wrapper
│ │ ├── Loading.tsx # Loading component
│ │ ├── NoData.tsx # Empty state
│ │ ├── Pagination.tsx # Pagination
│ │ ├── PaginationControls.tsx
│ │ ├── scroll-to-top.tsx # Scroll to top button
│ │ └── Search.tsx # Search component
│ ├── cards/ # Card components
│ ├── forms/ # Form components
│ ├── lang-toggle.tsx # Language switcher
│ ├── theme-toggle.tsx # Theme switcher
│ ├── QuranicSymbols.tsx # Quranic symbols
│ └── NotFound.tsx # 404 component
│
├── containers/ # Container components
│
├── docs/ # Project documentation
│ ├── component-organization.md
│ ├── cookie-management.md
│ ├── data-fetching-error-handling.md
│ ├── documentation-standards.md
│ ├── folder-file-conventions.md
│ ├── internationalization.md
│ ├── motion.md
│ ├── package-management.md
│ ├── theme-dark-light-mode.md
│ ├── ui-components.md
│ └── url-parameters.md
│
├── hooks/ # Custom React hooks
│ ├── use-mobile.ts # Mobile detection
│ ├── usePaginationQuery.ts # Pagination state
│ └── useSearchQuery.tsx # Search state
│
├── i18n/ # Internationalization
│ ├── navigation.ts # Navigation config
│ ├── request.ts # Request config
│ └── routing.ts # Routing config
│
├── lib/ # Utilities and libraries
│ ├── config/ # Configuration
│ ├── fetch/ # Fetch utilities
│ ├── enums.ts # Enumerations
│ ├── error-handler.ts # Error handling
│ ├── functions.ts # Utility functions
│ ├── urls.ts # API URLs
│ └── utils.ts # General utilities
│
├── messages/ # Translation files
│ ├── en.json # English
│ ├── ar.json # Arabic
│ └── ckb.json # Kurdish
│
├── public/ # Static assets
│ └── fonts/ # Custom fonts
│
├── types/ # TypeScript types
│ ├── global.ts # Global types
│ └── types.ts # App types
│
├── AGENTS.md # AI agent instructions
├── README.md # Project documentation
├── components.json # shadcn/ui config
├── eslint.config.mjs # ESLint config
├── next.config.ts # Next.js config
├── package.json # Dependencies
├── postcss.config.mjs # PostCSS config
├── proxy.ts # Proxy config
├── tsconfig.json # TypeScript config
├── next-env.d.ts # Next.js types
└── .env # Environment variables
The website features a meticulously crafted Islamic color palette that reflects the beauty and tranquility of Islamic tradition:
- Primary Color: Rich Emerald Green (#047857) - Symbolizing Islamic tradition, growth, and peace
- Accent Color: Warm Gold (#D4AF37) - Representing wisdom, nobility, and divine light
- Background: Soft Cream (#FAF8F3) - Gentle on eyes for extended reading sessions
- Text: Deep Charcoal with subtle green tint - High readability with spiritual touch
- Primary Color: Luminous Teal (#10B981) - Softer green that's gentle on eyes at night
- Accent Color: Soft Gold (#F3CC91) - Warm, comforting glow for peaceful reading
- Background: Deep Navy Blue (#0F172A) - Professional and serene atmosphere
- Text: Soft White with warm tint - Optimal contrast for comfortable night reading
- Typography: Custom Arabic fonts for authentic Quranic text presentation
- Animations: Subtle, respectful motion effects using framer-motion
- Islamic Patterns: Decorative geometric patterns inspired by Islamic art
- Responsive Layout: Fluid design that adapts beautifully to all screen sizes
- 🇬🇧 English - Full interface translation
- 🇸🇦 Arabic (العربية) - Native language support with RTL
- 🇮🇶 Kurdish (کوردی) - Complete Kurdish interface
- Access all 114 surahs of the Holy Quran
- Beautiful Arabic Quranic typography optimized for web reading
- Verse-by-verse display with clear numbering
- Smooth transitions between verses and surahs
- Responsive design for comfortable reading on any device
- Read the entire Quran in one seamless flow
- Infinite scroll functionality for uninterrupted reading
- Auto-load next sections as you scroll
- Visual indicators for surah and juz boundaries
- Bookmark and resume from where you left off
- Full-Text Search: Find any verse, word, or phrase instantly
- Filter by Surah: Quick access to specific chapters
- Filter by Juz: Navigate through the 30 sections of the Quran
- Filter by Page: Jump to specific Quran pages
- Topic-based Filtering: Discover verses by theme (coming soon)
- Multi-language Search: Search in Arabic, English, or Kurdish
- English Interface: Full translation of all UI elements
- Arabic (العربية): Native Arabic support with proper RTL layout
- Kurdish (کوردی): Complete Kurdish translation for Kurdish speakers
- Easy Language Switching: One-click toggle between languages
- Persistent Language Choice: Your preference is remembered across sessions
Contributions are welcome! Please read our contributing guidelines before submitting PRs.
This project is open source and available under the MIT License.
- Portfolio: ahmad-software.com
- GitHub: @Ahmad-Softwaree
- Live Demo: quran.ahmad-software.com
- Quran data provided by various Islamic sources
- Typography inspired by traditional Islamic calligraphy
- Built with love for the Muslim community worldwide
Made with ❤️ for the Ummah | Built by Ahmad Abdulkhaliq