Building a Modern Prayer Time App with Alpine.js and Tailwind CSS

Prayer times are essential information for Muslims worldwide, helping them organize their daily worship schedule. Today, I want to share an interesting project that combines modern web technologies to create a sleek, user-friendly prayer time application. You can find the complete source code on GitHub.

The Vision

The goal was to create a simple yet effective tool that provides:

• Accurate prayer times based on user location
• Current weather information
• Real-time clock display
• Clean, responsive interface
• Easy setup with no build process required

Technical Stack

The application is built using a lightweight, modern tech stack:

• Alpine.js for reactive data handling
• Tailwind CSS for styling
• Axios for API calls
• Browser's Geolocation API
• Local Storage for data persistence

The choice of Alpine.js over heavier frameworks like Vue or React was deliberate. Alpine.js provides just enough reactivity while keeping the bundle size minimal and eliminating the need for a build process. Combined with Tailwind CSS, it creates a powerful yet lightweight foundation for the app.

Key Features

Location-Based Services

The app intelligently handles user location:

async initializeLocation() {
    if (this.settings.latitude && this.settings.longitude) {
        // Use stored coordinates
        if (this.settings.apiKey) this.fetchWeather();
        this.fetchPrayerTimes();
    } else {
        // Request new coordinates
        await this.getUserCoordinates();
    }
}

This approach minimizes permission requests by checking localStorage first, improving the user experience.

Weather Integration

Weather information is fetched from OpenWeather API, providing users with current conditions alongside prayer times. The integration is simple but effective:

async fetchWeather() {
    const { data } = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather`, {
        params: {
            lat: this.settings.latitude,
            lon: this.settings.longitude,
            units: 'metric',
            appid: this.settings.apiKey,
        },
    });
}

Prayer Times Display

Prayer times are obtained from the Aladhan API, which provides accurate calculations based on various methods. The app displays times for:

• Fajr (Dawn prayer)
• Sunrise
• Dhuhr (Noon prayer)
• Asr (Afternoon prayer)
• Maghrib (Sunset prayer)
• Isha (Night prayer)
• Imsak (Pre-dawn meal time for fasting)

User Interface Design

The UI follows modern design principles with:

• Responsive grid layout for prayer times
• Modal-based settings management
• Clear typography and spacing
• Smooth transitions and hover effects
• Accessible color contrast

This is achieved using Tailwind CSS's utility classes:

<div class="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
    <div class="bg-white shadow-lg rounded-lg p-4 transition-all duration-300 hover:shadow-xl">
        <!-- Prayer time content -->
    </div>
</div>

Progressive Enhancement

The app employs several progressive enhancement techniques:

1. Stores user preferences locally
2. Works offline after initial load
3. Provides fallbacks for unsupported features
4. Handles API failures gracefully

Getting Started

To use the app:

1. Clone the repository:

   git clone https://github.com/nasrulhazim/prayer-time

1. Open index.html in your browser
2. Allow location access
3. Add your OpenWeather API key in settings

No build tools or complex setup required!

Privacy and Performance

The app prioritizes user privacy and performance:

• No external dependencies beyond API calls
• All data stored locally
• Minimal network requests
• Small bundle size
• No tracking or analytics

Future Improvements

Potential enhancements could include:

• Prayer time notifications
• Multiple calculation methods
• Offline prayer time calculations
• Prayer direction (Qibla) indicator
• Multiple language support

Conclusion

This prayer time app demonstrates how modern web technologies can be used to create practical, user-friendly applications without unnecessary complexity. The combination of Alpine.js and Tailwind CSS proves particularly effective for this use case, providing a smooth user experience without the overhead of larger frameworks.

Feel free to try out the app, contribute to the project, or use it as inspiration for your own developments. The complete source code is available on GitHub.

Contributing

Contributions are welcome! Whether it's:

• Bug fixes
• Feature additions
• Documentation improvements
• UI enhancements

Just fork the repository and submit a pull request.

---

Photo by Fahrul Azmi on Unsplash