Islamic Foundations

October 2025

2 Months

50+ Users

Description

Islamic Foundations is a real world website made for Muslims to deepen their faith. It is a platform that allows muslims to complete prayer streaks, read the Quran (Holy Book), among other daily essentials for all muslims.

This is my most impressive project yet because it caters to an actual target market of people who will benefit from what I have made.

Tech Stack

React JS: Core library used to build the structure and logic of the website
React Router: Handles navigation and page routing without refreshing
Tailwind CSS: Utility-first styling framework for fast and responsive UI design
Motion One: Lightweight animation library used for smooth transitions & interactions
External APIs: Used to fetch and display dynamic content throughout the site

Features

Filtering — Create filtering by name or category for both surahs (chapters) and duas (prayers).
Responsiveness — Fully responsive in all screen sizes
Routing — React router for smooth app navigation and transitions
APIs — Many external apis were used to fetch all the necesscary data for the site.
Dark Mode — Because why not? Definitely not worth it though.

Challenges & Solutions

Challenges	Solutions
Render thousands of lines of Arabic	Used APIs to fetch all the data needed for the Quran,Prayers, and Duas dynamically
Geolocation-Based Prayer Times	Calculating accurate Salah times across different time zones and locations using geolocation API and a function to determine time difference
Responsive Design	Optimize the UI and UX expirience across multiple screen sizes.
Audio Player for each verse	Synchronizing Quran recitation audio with highlighted Arabic text and using audio methods

Performance

100

Performance

Split code into multiple components, use lazy loading and react hooks.

Accessibility

Include semantic HTML elements properly and give aria labels to important elements

100

Best Practices

Use the correct HTML tags for each element, optimize images, and made website responsive

SEO

Use proper HTML elements and include alt labels for images

What I Learned

By creating this site, I learned the proper workflow of developing a useable app, and in the process learnt about React Hooks, API handling in ReactJS, performance and accesbility optimizations, and core problem solving to debug issues.

←Back to Projects