I Built a Location-Based Ramadan Time Web App

The Idea

Every Ramadan, the same question repeats:

“How much time is left for Iftar?”

“What’s today’s Sehri time for my area?”

Apps exist. Websites exist. But most felt heavy, ad-filled, or not properly location-optimized.

So I asked myself:

What if I build a clean, fast, location-based Ramadan Time web app using Next.js — focused only on what matters?

That’s how this project started. Project live link.

The Vision

I wanted to build something that:

• Detects user location automatically
• Shows accurate Sehri & Iftar times
• Displays a live countdown timer
• Works fast on mobile
• Is minimal, distraction-free
• Can scale globally

And of course — built with modern frontend architecture.

⚙️ Tech Stack

• Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS
• Location Handling: Browser Geolocation API
• Prayer Time Data: External Islamic prayer time API
• Deployment: Netlify
• Version Control: GitHub

Repository available on GitHub.

🧠 Core Features

1️⃣ Automatic Location Detection

I implemented the Browser Geolocation API to detect the user’s latitude and longitude.

navigator.geolocation.getCurrentPosition()

But here’s the catch.

It doesn’t always work.

Users can:

• Deny permission
• Use VPN
• Use unsupported browsers
• Have location disabled

So I built a fallback system:

• If geolocation fails → user manually selects city
• Stored preference in localStorage
• Prevent unnecessary repeated permission prompts

That small UX decision changed everything.

2️⃣ Location-Based Ramadan Time Fetching

Once I had:

• Latitude
• Longitude

I dynamically fetched prayer times from a prayer time API using query parameters:

/timings?latitude=XX&longitude=YY&method=2

Challenges faced:

• Different calculation methods give slightly different times
• API rate limits
• Timezone mismatches
• Formatting 24h to 12h conversion

I implemented:

• Timezone correction using Intl API
• Caching response in localStorage for performance
• Refetch only when date changes

3️⃣ Live Countdown Logic

This was the most interesting part. I built a dynamic countdown that:

• Detects current time
• Compares with today’s Iftar time
• If Iftar passed → switches to next Sehri countdown

Core logic:

1. Convert prayer time string into Date object
2. Compare with new Date()
3. Calculate time difference in milliseconds
4. Update every second using setInterval

Edge cases I handled:

• Midnight crossover
• Date change after 12 AM
• Negative time differences
• Daylight Saving issues (for international users)

The logic wasn’t complex. But making it reliable was.

🚧 Challenges I Faced

🔹 Auto Location Accuracy

Some devices returned imprecise coordinates. Solution: Reverse geocoding to show city name and verify.

🔹 Hydration Issues in Next.js

Since location & time are client-side dependent, I faced hydration mismatch warnings.

Solution:

• Wrapped time-dependent components inside useEffect
• Conditional rendering after mount
• Used dynamic imports where necessary

This improved stability significantly.

🔹 API Reliability

Free prayer time APIs sometimes:

• Timeout
• Rate limit
• Return inconsistent format

So I:

• Implemented try/catch error handling
• Added loading skeleton UI
• Created fallback UI for failure state

🔹 Performance Optimization

To keep it fast:

• Used server-side rendering only where necessary
• Client-side rendering for dynamic time updates
• Minimized unnecessary re-renders
• Memoized components

Lighthouse score improved significantly after refactoring.

🎨 UI/UX Philosophy

I intentionally kept the design:

• Dark-themed (night-friendly)
• Large countdown digits
• Minimal distractions
• Mobile-first layout

Ramadan is about focus. The app reflects that.

📂 GitHub & Deployment

The project is publicly available on GitHub. What it demonstrates:

• Clean folder structure
• Component-based architecture
• Environment variable management
• Proper commit hygiene
• Scalable frontend setup

Deployed via Vercel with automatic CI/CD on push.

💡 What This Project Really Taught Me

Building a Ramadan timer isn’t hard. But building a reliable, real-world, location-aware application?

That’s engineering.

This project improved my understanding of:

• Time-based logic systems
• Edge case handling
• Location-based personalization
• Client vs Server rendering in Next.js
• API resilience

And most importantly, It reminded me that even simple tools can teach deep lessons if you build them properly.

🚀 What’s Next?

Planned upgrades:

• Multi-language support
• Hijri date integration
• Offline mode (PWA)
• Ramadan calendar view
• Notification system before Iftar

If you want to explore the codebase, feel free to check it on GitHub.

Because for me —

Projects are not just features. They are proof of thinking.