Dua & Ruqyah

🔹 Project Overview

Dua & Ruqyah is a content-driven Islamic web application built with Next.js that provides users access to 190 commonly used daily duas. Each dua includes Arabic text, English translation, and audio pronunciation, allowing users to read, understand, and listen to authentic supplications in a clean and accessible interface.

The project was developed as part of a job task, emphasizing clean UI, performance, and deployment readiness.

---

🔹 Problem Statement

Many Islamic dua resources are either cluttered with ads, lack translations, or do not provide proper audio pronunciation. Additionally, content-heavy applications must be optimized for fast loading and smooth deployment, especially when hosted on serverless platforms.

This project aims to:

• Provide a distraction-free dua reading experience

• Offer multilingual accessibility through translations

• Support audio pronunciation for better understanding

• Ensure smooth deployment on modern serverless infrastructure

---

🔹 Role & Responsibility

Role: Full-Stack / Next.js Developer
Ownership: End-to-end implementation

• Designed the UI and page structure

• Implemented content rendering and audio playback

• Handled data modeling and data source selection

• Solved deployment-related database issues

• Deployed and optimized the application for Vercel

---

🔹 Core Features

• Browse 190 daily-use duas

• Arabic text with English translation

• Audio playback for correct Arabic pronunciation

• Clean, responsive, and minimal UI

• SEO-friendly page structure

• Fast-loading static content

• Production-ready Vercel deployment

---

🔹 Technology Stack

Frontend

• Next.js for server-side rendering and static optimization

• Tailwind CSS & DaisyUI for responsive UI components

• CSS3 for custom styling

• SweetAlert for user-friendly notifications

Backend / Data Handling

• Node.js & Express.js (initial backend setup)

• JSON-based data source for deployment compatibility

---

🔹 Architecture & Design Decisions

Initial Approach

• Started with SQLite database to structure dua data relationally.

• Worked perfectly in local development.

Deployment Challenge

• Encountered deployment limitations when hosting on Vercel, where persistent SQLite storage is not suitable for serverless environments.

Final Solution

• Migrated the data layer from SQLite to static JSON files.

• Leveraged Next.js static capabilities for faster builds and zero-runtime database dependency.

• Improved deployment reliability and reduced infrastructure complexity.

This decision demonstrates pragmatic engineering trade-offs rather than rigid attachment to a specific technology.

---

🔹 Challenges & Solutions

Challenge: SQLite database incompatibility with Vercel’s serverless environment.
Solution: Replaced SQLite with structured JSON data, enabling seamless deployment and faster content delivery.

Challenge: Maintaining performance for content-heavy pages.
Solution: Utilized Next.js rendering optimizations and static data handling to ensure fast page loads.

---

🔹 Performance, SEO & Accessibility

• Lightweight static data for fast initial load

• Clean semantic structure for better SEO

• Responsive layout for mobile and desktop users

• Audio support improves accessibility and learning experience

---

🔹 Business & Practical Impact

• Delivered a fully functional job-task project within constraints

• Demonstrated ability to adapt architecture based on hosting limitations

• Provided a meaningful, real-world content platform

• Showcased strong Next.js fundamentals and deployment awareness