The official source code repository for Quran.com
Join the Slack Channel »

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.

Unlike the previous Quran.com build, we want this repo to focus on consistency and scale. We will document the process of setting this up on your local dev, making changes, picking up issues and finally getting work to deploy!

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.

We use styled-components as our styling library. When adding a new library (for example, for tooltips), please ensure it uses styled-components as the styling library. We want to avoid sending large JS files to our users, so having a mix of styling solutions will not be good. styled-components also allows us to code-split and send JS + CSS for what is needed.

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.

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.