Ramadan Tracker 🌙

A progressive web app that helps Muslims stay on track during Ramadan — monitor your prayers, duas, Quran recitation, and daily worship with insightful progress tracking throughout the blessed month.

✨ Features

🕌 Prayer Times

• Live prayer times fetched from the Aladhan API using the MWL (Muslim World League) calculation method
• Auto-detects user location via Geolocation API (falls back to Mecca)
• Highlights the next upcoming prayer

📖 Quran Tracker

• Track surahs and juz' you have read
• Visual progress bar for your Quran completion journey

🤲 Dua & Dhikr

• Log morning and evening adhkar completion
• Browse a curated dua collection
• Save and manage your personal duas

📊 Dashboard & Progress

• Daily tracking table for fasting, prayers, Quran, charity, and more
• Worship statistics with visual charts
• Daily motivation quotes to keep you inspired

📅 Islamic Calendar

• Integrated Hijri calendar with RTL support
• Ramadan day counter

🏆 Achievements

• Earn badges for consistent worship and milestones

📝 Ramadan Journey

• Set and track personal Ramadan goals
• Daily journal for reflections and memories

🌍 Multilingual

• Full support for Arabic (RTL), English, and French
• Language switcher built into the UI

📱 PWA Support

• Installable on mobile and desktop as a Progressive Web App
• Offline-capable with service worker caching

🚀 Getting Started

Prerequisites

• Bun v1.0+ runtime installed

Installation

1. Clone the repository:

   git clone https://github.com/Abdelkaderbzz/ramadan-tracker.git

2. Navigate to the project folder:

   cd ramadan-tracker

3. Install dependencies:

   bun install

4. Start the development server:

   bun run dev

5. Open http://localhost:3000 in your browser.

🛠 Tech Stack

Category	Technology
Framework	Next.js 14 (App Router)
Runtime	Bun
Language	TypeScript
Styling	Tailwind CSS
UI Components	Radix UI + shadcn/ui
State	Zustand
Animations	Framer Motion
i18n	next-intl
Forms	React Hook Form + Zod
Charts	Recharts
Theming	next-themes
PWA	@ducanh2912/next-pwa
Prayer Times	Aladhan API (MWL method)

📁 Project Structure

ramadan-tracker/
├── app/
│   └── [locale]/            # Locale-based routing (en, fr, ar)
│       ├── layout.tsx
│       └── page.tsx
├── components/
│   ├── features/
│   │   ├── achievements/    # Badge system
│   │   ├── calendar/        # Islamic/Hijri calendar
│   │   ├── dashboard/       # Stats, daily tracking table
│   │   ├── journey/         # Goals, journal, motivation
│   │   ├── prayer/          # Prayer times, duas, dhikr
│   │   └── quran/           # Quran surah/juz tracker
│   ├── layout/              # Header, main layout
│   └── ui/                  # shadcn/ui primitives
├── hooks/                   # Custom React hooks
├── i18n/                    # next-intl configuration
├── lib/
│   ├── constants/           # Duas, motivations
│   ├── store/               # Zustand store & types
│   ├── date-utils.ts        # Hijri date helpers
│   └── quran-data.ts        # Surah & Juz metadata
├── messages/                # Translation files (en, fr, ar)
├── public/                  # Static assets, PWA manifest
└── styles/                  # Global CSS

📝 Scripts

Command	Description
bun run dev	Start the development server
bun run build	Build for production
bun run start	Start the production server
bun run lint	Run ESLint
bun run type-check	Run TypeScript type checking

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on the development workflow and how to submit pull requests.

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

👤 Author

abdelkaderbzz

• GitHub: @Abdelkaderbzz

☕ Support

If you find this project useful and want to support its development, you can buy me a coffee!

⭐ Show Your Support

Give a ⭐ if this project helped you during Ramadan!