The official source code repository for Quran.com
Join Quran.com community »

Visit Quran.com · Report Bug · Request Feature • Storybook

This project is the frontend for Quran.com. It is built on top of next.js, a popular framework that takes the trouble and setup of setting up an isomorphic react app. We deploy it on now.sh automatically with automatic generation of builds for PRs.

We trust that you will not copy this idea/project, this is at the end for the sake of Allah and we all have good intentions while working with this project. But we must stress that copying the code/project is unacceptable.

• Ensure you have the latest nodejs and npm installed. Prefer 10+.
• Ensure you have yarn installed. Simply npm i -g yarn
• Clone this repo
• Run yarn on the repo to install node_modules
• Run yarn dev to start the app. If you wish to run on a different port, run yarn dev -p 8000
• Open localhost:3000

The app runs on next.js and will automatically hot reload when you make changes.

If you have access to a Quran.com associated vercel account, run vercel env pull. Otherwise, rename the env.example file to env.local and you should be good to go.

One mistake we made previously is treated each component as unique. This made our work not scalable. Secondly, when looking at large companies, they often develop a design style language that can be used across the app without the need to create unique components and ensure better consistency across the product. We are trying to take a similar approach. If something can be used elsewhere, please put it inside the dls/ directory and create stories for it.

Our components are built within Storybook.js. See files with name .stories.tsx. This helps engineers view their work outside of the product, making it super easy to test different configurations of the component.

We also display all our components here.

Check .vscode/extensions.json for recommended VSCode Extensions

We chose typescript as the language of choice of it's ease of type-safety. Please create types where you see fit.

If you are interested to help out, please look at issues on the Github repo. This is a good place to start.

Thank you for taking time to file a bug! We'd appreciate your help on fixing it 🙏. Please open an issue.

Join Quran.com Discord community »

• Localization was made possible by the help of Lokalise which is a computer-aided translation system that focuses on productivity and quality assurance and provides a seamless localization workflow.