quran

<img src="public/logo.png" alt="Logo" width="80" height="80">

The Noble Quran

The official source code repository for Quran.com
<br />
<a href="https://discord.gg/SpEeJ5bWEQ"><strong>Join Quran.com community »</strong></a>
<br />
<br />
<a href="https://quran.com">Visit Quran.com</a>
·
<a href="https://github.com/quran/quran.com-frontend-next/issues">Report Bug</a>
·
<a href="https://github.com/quran/quran.com-frontend-next/issues">Request Feature</a>
•
<a href="https://quran.github.io/quran.com-frontend-next/storybook/master">Storybook</a>

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.

How to Contribute

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.

Running the App Locally

• 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 in your browser

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

Environment Variables

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.

DLS (Design Language System)

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.

Storybook.js

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.

Recommended Extensions

Check .vscode/extensions.json for recommended VSCode Extensions

TypeScript

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

Helping Out and Issues

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

Filing Bugs

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

Community

Join Quran.com Discord community »

Credits

• 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.