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
nodejsandnpminstalled. Prefer 10+ - Ensure you have
yarninstalled. Simplynpm i -g yarn - Clone this repo
- Run
yarnon the repo to installnode_modules - Run
yarn devto start the app. If you wish to run on a different port, runyarn dev -p 8000 - Open
localhost:3000in your browser
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.
- Deployment was made possible by the help of Vercel which is a deployment and collaboration platform for frontend developers which puts the frontend developer first, giving them comprehensive tools to build high-performance websites and applications.
