Building an Islamic Prayer Times App with Modern Web Technologies
#devchallenge#wlhchallenge#bolt#ai
Abu Taher Siddik

Abu Taher Siddik @imabutahersiddik

About: A passionate learner and tech enthusiast, exploring the intersection of design and technology, while continuously seeking new challenges and opportunities to grow.

Joined:
Aug 13, 2024

Building an Islamic Prayer Times App with Modern Web Technologies

Publish Date: Jul 3
5 0

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

Building an Islamic Prayer Times App 🕌

Project Overview

I've developed a modern web application that helps Muslims track their daily prayer times with an intuitive interface and real-time updates. The project combines several key technologies to create a seamless user experience.

Key Features

  • Real-time prayer time calculations based on location
  • Interactive modal system with smooth animations
  • Qibla direction compass
  • Dark mode support
  • Offline functionality
  • Location-based customization

Technical Implementation

1. Modern Modal System

One of the main challenges was creating a smooth, accessible modal system. Here's how we implemented it:

class PrayerTimesApp {
    showPrayerInfo(prayer, time) {
        const modal = document.getElementById('prayerModal');
        const info = this.prayerInfo[prayer];

        // Update modal content
        modal.querySelector('#modal-prayer-name').textContent = prayer;
        modal.querySelector('#modal-prayer-time').textContent = time;
        modal.querySelector('#modal-prayer-period')
             .textContent = info.time_description;

        // Show with animation
        modal.style.display = 'block';
        modal.offsetHeight; // Force reflow
        modal.classList.add('visible');

        // Trap focus for accessibility
        this.trapFocus(modal);
    }
}
Enter fullscreen mode Exit fullscreen mode

The modal features a blurred backdrop and smooth animations:

.prayer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.prayer-modal-overlay.visible {
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

2. Location-Based Features

Implementing accurate prayer times required precise location handling:

async updatePrayerTimes(coordinates) {
    try {
        const times = await this.fetchPrayerTimes(coordinates);
        this.renderPrayerTimes(times.data);
        this.updateQiblaDirection(coordinates);
        await this.updateLocationDisplay(coordinates);
    } catch (error) {
        this.handleError(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Qibla Direction Compass

The Qibla compass was implemented using Canvas:

drawQiblaCompass(angle) {
    const canvas = document.getElementById('qibla-compass');
    const ctx = canvas.getContext('2d');
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw compass circle and direction pointer
    this.drawCompassCircle(ctx, centerX, centerY);
    this.drawDirectionPointer(ctx, centerX, centerY, angle);
}
Enter fullscreen mode Exit fullscreen mode

Technical Challenges and Solutions

1. Modal Interaction Issues

Initially, the modal would close unexpectedly when users interacted with its content. We solved this by properly handling event propagation:

initializeModal() {
    const modal = document.getElementById('prayerModal');
    const modalContent = modal.querySelector('.modal-content');

    modalContent.addEventListener('click', (e) => {
        e.stopPropagation();
    });
}
Enter fullscreen mode Exit fullscreen mode

2. Accurate Prayer Time Calculations

We integrated with the Aladhan API while implementing fallback calculations:

function getPrayerTimes($latitude, $longitude) {
    $date = date('d-m-Y');
    $url = "http://api.aladhan.com/v1/timings/$date?" . 
           "latitude=$latitude&longitude=$longitude&method=3";

    try {
        $response = file_get_contents($url);
        return json_decode($response, true);
    } catch (Exception $e) {
        return getFallbackTimes($latitude, $longitude);
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Cross-Browser Compatibility

Ensuring consistent animations and backdrop filters across browsers required careful CSS:

@supports not (backdrop-filter: blur()) {
    .prayer-modal-overlay {
        background: rgba(15, 23, 42, 0.9);
    }
}
Enter fullscreen mode Exit fullscreen mode

Performance Optimizations

  1. Efficient DOM Updates 
renderPrayerTimes(data) {
    const container = document.getElementById('prayer-times');
    const fragment = document.createDocumentFragment();

    Object.entries(data.timings).forEach(([prayer, time]) => {
        fragment.appendChild(this.createPrayerCard(prayer, time));
    });

    container.innerHTML = '';
    container.appendChild(fragment);
}
Enter fullscreen mode Exit fullscreen mode
  1. Resource Loading 
<link rel="preconnect" href="https://api.aladhan.com">
<link rel="dns-prefetch" href="https://api.aladhan.com">
Enter fullscreen mode Exit fullscreen mode

Future Enhancements

  1. Prayer notifications system
  2. Multiple location profiles
  3. Monthly prayer calendar view
  4. Community prayer time sharing
  5. Integration with local mosques

Lessons Learned

  1. The importance of proper event handling in modal systems
  2. Balancing feature richness with performance
  3. Implementing graceful degradation for older browsers
  4. Managing state in a growing application

Code Repository

The complete source code is available on GitHub: Prayer Times App

Team Members

Conclusion

Building this prayer times application was a journey in combining modern web technologies with practical utility. The project demonstrates how we can create meaningful applications while pushing the boundaries of web capabilities.

Acknowledgments

Special thanks to the Bolt team for providing the platform and inspiration for this project. The challenge helped shape this application into a more robust and user-friendly tool.

Project Status: Live Demo available at Prayer Times App

wlh #bolt #javascript #webdev

Comments 0 total

    Add comment