Back to Projects Menu

Mushaf App

The web application like other Muslim apps, provides Al-Quran include vocal audio, daily prayers, etc.

November 11, 2023 - 10 months ago

Website
|
Image cover blog Mushaf App

Backstory Why Me Made This Project?

Project Mushaf App is a Muslim application, Mushaf App provide a complete Al-Quran with translate (Bahasa), audio from professional Qory, included Quran interpretation, collection of daily prayers, 99 Asmaul-Alhusna, and collection of tahlil prayers.
Project Mushaf App was build with one of modern technology front-end web development namely ReactJS combined with TypeScript. Mushaf App is my first time project which build on React + TS. There are some additional package dependencies for supporting this project. These include Vite for front-end module bundler, ReactRouter for routing, ReactQuery for fetching data, and Material UI (MUI) for building UI, Mushaf App has implemented PWA (Progressive Web Apps) technology. so has implemented PWA on this project has the advantage of a website being like a native application. Mushaf App build with SPA (Single Page Appliacation) architecture.

Goals Build This Project

Main goals for building this project, including the following:
  • To exercise and implement React + TypeScript after i learn this technology.
  • To exercise and deeping Built in React Hook
  • Learning about how to build website UI Component Library with Material UI
  • Learning about how to fetching data with ReactQuery
I was learning a lot about front-end web development while build this project, after i finish this project, i think my programming skills are improved over time.

Feature on Mushaf App Project

The Mushaf App Project has several features, including the following:
  • Has implemented web responsive for multiple device
  • Has feature dark mode
  • Home Page
    • Home section
    • About project section
    • Feature card section
    • Ayat of the day and doa of the day section
    • Footer Section
  • Al-Quran Page
    • Displaying All data Al-Quran
  • Surah Page
    • Displaying data Surah Al-Quran which user pick
    • Feature translate by ayat
    • Feature Quran interpretation by ayat
    • Feature Audio Qory
  • Doa sehari-hari (collection of daily prayers) Page
  • Doa sehari-hari (collection of Tahlil prayers) Page
  • 99 collection of Asmaul-Alhusna Page

How to Start this project

1. Clone repository using git

git clone https://github.com/ZnovandaP/mushaf-app.git

2. Install all dependencies

pnpm install

3. Run development server

pnpm run dev
Open http://localhost:3000 with your browser to see the result.

Responsive Web Design on Multiple Devices

Ilustration responsive design Mushaf App Project

Last but not least

if you interested on this project, you can visit this project directly Mushaf App Project, also you can visit on Github Repository Mushaf App Project, last if you wanna give me suggesstion or advice you can go to contact page directly. Thankyou so much.

Tech Stack: