QuranHealing is a web application designed to provide spiritual comfort through selected ayats (verses) from the Quran. The app displays random ayats for reflection and specific verses to provide solace for various emotional states, such as sadness, hopelessness, and heartbreak. It also includes audio recitation and translations in both English and Urdu, ensuring accessibility for a broader audience.
- On each load, the app displays a random ayat from the Quran, with its English and Urdu translations.
- The ayat is fetched from the Al-Quran API.
- Users can choose from three emotional states: Are you hurt?, Are you sad?, and Are you hopeless? to receive Quranic verses tailored to provide comfort.
- Each ayat is displayed with Arabic, English, and Urdu text along with references.
- The app features a floating notification banner on the right side that shows the current Islamic (Hijri) date, dynamically fetched from an Islamic calendar API.
- Users can search for specific ayats based on keywords in Arabic, English, or Urdu. This enables users to explore relevant Quranic verses based on their queries.
- The application has been designed to be fully responsive, ensuring a seamless experience across desktop, tablet, and mobile devices.
- The UI is soothing, with calming colors, smooth animations, and clear typography, offering a peaceful experience for users.
- Users can easily share any ayat via the built-in sharing functionality, allowing them to spread words of comfort with others.
- The app uses Framer Motion for animations, ensuring smooth transitions and interactions, enhancing the overall user experience.
- React.js: Frontend library for building the user interface.
- Framer Motion: For adding animations to elements.
- Styled-components: For dynamic styling and responsive design.
- Al-Quran API: For fetching random ayats.
- Islamic Calendar API: For displaying the current Islamic (Hijri) date.
- Vercel Analytics: To track the app's performance.
- Node.js and npm installed on your machine.
-
Clone the repository:
git clone https://github.com/yourusername/QuranHealing.git -
Navigate to the project directory:
cd QuranHealing -
Install dependencies:
npm install -
Start the development server:
npm start -
Open the app in your browser:
http://localhost:3000
- On load, a random ayat will appear on the homepage.
- Choose a comforting category (Hurt, Sad, Hopeless) to see related ayats.
- Search for ayats using keywords in Arabic, English, or Urdu.
- View the current Islamic date on the floating notification banner.
- Share any ayat directly using the share button.
- Bookmark Ayats: Allow users to bookmark their favorite ayats.
- Dark Mode: A night mode for improved readability in low-light environments.
- User Personalization: Custom ayat suggestions based on user preferences.
If you'd like to contribute to QuranHealing, feel free to submit a pull request. Ensure that your code follows best practices and is well-documented.
This project is licensed under the MIT License.