Overview
Daily Ramadhan is a spiritual companion app designed to help Muslims stay consistent with their worship during the holy month of Ramadhan. Users can track daily prayers and Ramadhan activities with a beautifully styled, responsive interface.
The Tech Stack
This application was built using:
- React for building the user interface
- TypeScript for static typing
- Tailwind CSS for rapid styling and responsiveness
- shadcn/ui for prebuilt accessible components
- i18next for multilingual support
- date-fns for efficient date handling
Features
- 🕌 Prayer Tracking (Shubuh, Dzuhr, Ashr, Maghrib, Isya, Tarawih)
- 📅 Daily Ramadhan Activity Logging
- 🎨 Light and Dark Mode Support
- 💾 Local Storage to persist data on the user's device
- 🌐 Multilingual UI with i18next
- 📱 Fully Responsive Design
Implementation Highlights
- Designed a minimal, clean interface with dark/light mode toggle.
- Used local storage to keep user data private and persistent.
- Leveraged i18next for future multi-language support.
- Used shadcn/ui for consistent design and accessibility.
- Efficiently managed date handling with date-fns.
Future Enhancements
- 🔔 Daily reminders and motivational messages
- 📊 Activity analytics (weekly/monthly)
- ☁️ Option to sync data via cloud storage
- 📆 Integration with Hijri calendar
Conclusion
Daily Ramadhan is a meaningful project that allowed me to combine design, development, and faith. It helped me practice good UI/UX design and learn to build a self-contained app with modern tools.
🔗 Try it here: Live App
🛠️ View the code on GitHub
Thank you for exploring this project!
