A beautiful, responsive Islamic prayer times application with real-time updates and countdowns, built with React and Material UI.
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 | Usage |
---|---|
React + Vite | Frontend framework |
Material UI | UI components and styling |
Moment.js | Date/time calculations |
Axios | API requests |
Aladhan API | Prayer times data |
- 🕌 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
git clone https://github.com/abdallahsekrafi/PrayersTime.git
cd PrayersTime
npm install
npm run dev
nmp run mob
The app uses the free Aladhan Prayer Times API:
axios.get(`https://api.aladhan.com/v1/timingsByCity?city=${city}&country=`)
- 🧭 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
"dependencies": {
"@mui/material": "^5.0.0",
"axios": "^1.0.0",
"moment": "^2.29.0",
"react": "^18.0.0"
}
npm run dev
npm run mob
- MAWAQIT: mawaqit.net
- TARMEEZ: tarmeez
- LinkedIn: Abdallah Sekrafi
- Facebook: fb.com/abdallah.sek
- GitHub: github.com/abdallahsekrafi
This project is licensed under the MIT License.