Skip to content

A beautiful, responsive Islamic prayer times application with real-time updates and countdowns, built with React and Material UI.

Notifications You must be signed in to change notification settings

abdallahsekrafi/PrayersTime

Repository files navigation

🕌 Prayer Times App

A beautiful, responsive Islamic prayer times application with real-time updates and countdowns, built with React and Material UI.


📷 Screenshots

🧩 Description

An elegant prayer times application that helps Muslims track daily prayer times for any location worldwide. Features include:

  • Real-time countdown to next prayer
  • Sunrise and sunset times
  • Arabic date display
  • Responsive design for all devices
  • Beautiful Material UI interface with golden accents

🔧 Tech Stack

Tech Usage
React + Vite Frontend framework
Material UI UI components and styling
Moment.js Date/time calculations
Axios API requests
Aladhan API Prayer times data

🌟 Features

  • 🕌 Accurate prayer times for any city worldwide
  • ⏳ Real-time countdown to next prayer
  • ☀️ Sunrise and sunset times with visual icons
  • 📅 Current Hijri/Islamic date in Arabic
  • 🔍 City search functionality
  • 📱 Fully responsive design (mobile/tablet/desktop)
  • 🎨 Beautiful golden-themed UI with subtle animations
  • 🌙 Automatic day/night mode detection

🚀 How to Run Locally

1. Clone the project

git clone https://github.com/abdallahsekrafi/PrayersTime.git
cd PrayersTime

2. Install dependencies

npm install

3. Start the development server

npm run dev
nmp run mob

🛠 API Usage

The app uses the free Aladhan Prayer Times API:

axios.get(`https://api.aladhan.com/v1/timingsByCity?city=${city}&country=`)

🎨 Design & UX

  • 🧭 Clean, minimalist interface focused on prayer times
  • 🖌️ Golden accents for important elements
  • 📱 Card-based layout that adapts to screen size
  • 🎯 Current prayer highlighted with special styling
  • ☪️ Islamic-themed design elements

📦 Main Dependencies

"dependencies": {
  "@mui/material": "^5.0.0",
  "axios": "^1.0.0",
  "moment": "^2.29.0",
  "react": "^18.0.0"
}

🧰 Available Scripts

npm run dev
npm run mob 

💼 Technologies Used

javascript logo react logo materialui logo css3 logo momentjs logo

🙏 Thanks for the two references


📬 Contact


© Sekrafi Abdallah @ 2025

This project is licensed under the MIT License.

About

A beautiful, responsive Islamic prayer times application with real-time updates and countdowns, built with React and Material UI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published