React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Quran Foundation API Proxy

Quran Foundation credentials must stay on the server. In Vercel, add these Environment Variables:

• QF_ENV=production
• QF_CLIENT_ID
• QF_CLIENT_SECRET

The Vercel serverless proxy supports:

• GET /api/quran/content/api/v4/chapters
• GET /api/quran/content/api/v4/verses/by_chapter/1?translations=77&fields=text_uthmani
• GET /api/quran/search/api/v1/search?mode=quick&query=fatiha

For local API testing, run the app with vercel dev so the api/ functions are available.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.