https://github.com/moinbukhari/Muddakir

An app designed to help non-arabic speakers understand the Quran
https://github.com/moinbukhari/Muddakir

clerk drag-and-drop nextjs planetscale prisma quran react shadcn-ui typescript vercel

Last synced: 3 months ago
JSON representation

An app designed to help non-arabic speakers understand the Quran

• Host: GitHub
• URL: https://github.com/moinbukhari/Muddakir
• Owner: moinbukhari
• Created: 2023-04-14T02:06:39.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-01T16:24:06.000Z (over 1 year ago)
• Last Synced: 2026-01-24T09:38:53.357Z (5 months ago)
• Topics: clerk, drag-and-drop, nextjs, planetscale, prisma, quran, react, shadcn-ui, typescript, vercel
• Language: TypeScript
• Homepage: https://muddakir.app
• Size: 2.93 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-islamic-open-source-apps - Muddakir

README

          
# Muddakir 📗

An app designed to help non-arabic speakers understand the Quran

## Process and Goal 💪

Muddakir was designed to help a huge population of non-Arabic speakers that can read the Quran in Arabic but are not able to understand its meaning. 

I started developing it in April 2023 during Season 2 of Buildspace's N&W program. The project was initialised using the [T3 Stack](https://create.t3.gg/). The mock designs for the project are done on [excalidraw](https://excalidraw.com/) and then implemented using NextJS and TypeScript. The project is deployed on [Vercel](https://vercel.com/).

I am actively developing this project and my favourite part so far has been the Apply mode where you are tasked with translating a passage of the Quran word by word. I implemented a drag-and-drop feature alongside highlights on the Arabic text, depending on whether the user has already translated, is translating, or has not translated the word. I believe this greatly improves the experience of the user.

## Tools ⚒️

- NextJS, TypeScript, TailwindCSS, tRPC, Shadcn UI

- ClerkAuth

- Prisma, PlanetScale

## Demos 🎥

### Apply Mode

![apply](https://github.com/moinbukhari/muddakir/assets/56733483/fc6f7436-15d6-4bc3-8c57-d451d8ac584f)

### Quiz Mode

![quiz](https://github.com/moinbukhari/muddakir/assets/56733483/c50bcf61-1baa-4d38-9c1c-fcbacc8cca3b)

### Vocab Mode

![vocab](https://github.com/moinbukhari/muddakir/assets/56733483/db8be191-7ff7-46e8-b12d-19cf06ada4bc)