What you can do with this app

1. Translate verses of Quran.
2. Save it with your name. (working on authentication right now)
3. Explore others' translations.
4. Discussion thread on each verse. (In future)

Added features

1. All the chapters and verses form the Quran.
2. Search By Chapter Name, Chapter Number, Verse Key or Part of a Verse.
3. Hundreds of translations for each verses.
4. User can choose which translation(s) to show
5. Under each verse, an input field for the user to add his/her own translation
6. Pagination for the verses.
7. Responsive for all sized devices.

Working On

1. User Authentication, Authorization
2. Creating Database to store users' translations
3. Creating necessary APIs

Tech Stack

1. React
2. Tailwind css
3. Firebase Auth (coming soon)
4. JWT (coming soon)
5. MongoDB (coming soon)

Developer Explorations

1. Used dangerouslySetInnerHTML for rendering the HTML from search result's string.
2. Used DOMPurify for securing the risks of using dangerouslySetInnerHTML
3. Used react-helmet for Title and SEO.
4. Explored (and used) public APIs of Quran.com
5. Explored React's hooks like useReducer, useContext, useEffect, useState, etc.
6. Created a bunch of custom hooks.
7. Explored vite and folder structure.
8. Explored react router dom, tailwind css, etc.