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 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
andnpm
installed. Prefer 10+ - Ensure you have
yarn
installed. Simplynpm i -g yarn
- Clone this repo
- Run
yarn
on the repo to installnode_modules
- Run
yarn dev
to start the app. If you wish to run on a different port, runyarn dev -p 8000
- Open
localhost:3000
in your browser
The app runs on Next.js and will automatically hot reload when you make changes.
Rename the env.example
file to env.local
.
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.