Iqra - Gamified Quran reading and tajweed practice.

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Install Project Dependencies using bun install --legacy-peer-deps.
4. Run bun dev to start:

⚙️ Tech Stack

‼️ Folder Structure

Here is the folder structure of this app.

iqra/
  |- actions/
    |-- challenge-progress.ts
    |-- user-progress.ts
    |-- user-subscription.ts
  |- app/
    |-- (auth)/
    |-- (main)/
    |-- (marketing)/
    |-- admin/
    |-- api/
    |-- fonts/
    |-- lesson/
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- modals/
    |-- ui/
    |-- banner.tsx
    |-- feed-wrapper.tsx
    |-- mobile-header.tsx
    |-- mobile-sidebar.tsx
    |-- promo.tsx
    |-- quests.tsx
    |-- sidebar-item.tsx
    |-- sidebar.tsx
    |-- sticky-wrapper.tsx
    |-- user-progress.tsx
  |- config/
    |-- index.ts
  |- db/
    |-- drizzle.ts
    |-- queries.ts
    |-- schema.ts
  |- lib/
    |-- admin.ts
    |-- arabic-font.ts
    |-- arabic-letters.ts
    |-- normalize-arabic.ts
    |-- stripe.ts
    |-- utils.ts
  |- public/
  |- sample/
    |-- index.ts
    |-- types.ts
  |- scripts/
    |-- prod.ts
  |- store/
    |-- use-exit-modal.ts
    |-- use-hearts-modal.ts
    |-- use-practice-modal.ts
  |- .env.example
  |- .env/.env.local
  |- .gitignore
  |- .prettierrc.json
  |- bun.lock
  |- components.json
  |- constants.ts
  |- drizzle.config.ts
  |- environment.d.ts
  |- eslint.config.mjs
  |- next.config.ts
  |- package.json
  |- postcss.config.js
  |- proxy.ts
  |- tailwind.config.ts
  |- tsconfig.json

💎 Acknowledgements

Useful resources and dependencies that are used in Iqra.

• Special Thanks to Code with Antonio: https://codewithantonio.com/
• Kenney Assets: https://kenney.nl/
• Freesound: https://freesound.org/
• Elevenlabs AI: https://elevenlabs.io/
• Flagpack: https://flagpack.xyz/

• @clerk/nextjs: ^7.0.12
• @eslint/eslintrc: ^3
• @neondatabase/serverless: ^1.0.2
• @radix-ui/react-avatar: ^1.1.11
• @radix-ui/react-dialog: ^1.1.15
• @radix-ui/react-progress: ^1.1.8
• @radix-ui/react-separator: ^1.1.8
• @radix-ui/react-slot: ^1.2.4
• @types/node: ^25.5.2
• @types/react: ^19.2.14
• @types/react-dom: ^19.2.3
• @vercel/config: ^0.1.0
• autoprefixer: ^10.4.27
• class-variance-authority: ^0.7.1
• clsx: ^2.1.0
• dotenv: ^17.4.1
• drizzle-kit: ^0.31.10
• drizzle-orm: ^0.45.1
• eslint: ^10
• eslint-config-next: 16.2.3
• eslint-config-prettier: ^10.1.8
• lucide-react: ^1.7.0
• next: ^16.2.1
• pg: ^8.20.0
• postcss: ^8
• prettier: ^3.8.1
• prettier-plugin-tailwindcss: ^0.7.2
• ra-data-simple-rest: ^5.14.5
• react: ^19.2.4
• react-admin: ^4.16.20
• react-circular-progressbar: ^2.2.0
• react-confetti: ^6.4.0
• react-dom: ^19.2.4
• react-use: ^17.6.0
• sonner: ^2.0.7
• stripe: ^20.4.1
• tailwind-merge: ^3.5.0
• tailwindcss: ^3.4.19
• tailwindcss-animate: ^1.0.7
• tsx: ^4.21.0
• typescript: ^6
• zustand: ^5.0.12