An open API service indexing awesome lists of open source software.

https://github.com/Usman-T/nafs

An Islamic habit tracker
https://github.com/Usman-T/nafs

gamification islamic javascript mobile-first nextjs prisma progressive-web-app typescript

Last synced: 3 months ago
JSON representation

An Islamic habit tracker

Awesome Lists containing this project

README

          

Nafs

Spiritual Self-Discipline, Engineered for the Muslim Soul.



---

## What is Nafs?

**Nafs** helps Muslim youth build Islamic discipline through:

- Task-based challenges with streaks
- Daily Qur’an reflections with audio & tafsir
- Spiritual growth tracking via animated radar charts
- Reflection journals
- Offline-first mobile experience (TWA/PWA)

Built around the Qur'anic idea of _nafs_, and engineered for modern Muslims.

---

## Full UI Showcase

Onboarding Flow








Challenge & Task Engine






Streaks & Radar Progress






Qur’an Viewer



Auth Flow




---

## Tech Stack

| Layer | Tools |
| ---------- | ----------------------------------------------------- |
| Frontend | Next.js App Router, Tailwind CSS, shadcn/ui |
| Backend | Next.js Server Actions, all logic in `lib/actions.ts` |
| Database | PostgreSQL via Prisma Accelerate |
| Auth | NextAuth (JWT), middleware-protected routes |
| Caching | Redis (auth/session), LocalStorage (day/task state) |
| Deployment | Vercel |
| PWA/TWA | Bubblewrap + Servist (custom service worker) |
| Audio | Qur’an CDN + `` fallback |

|Language files blank comment code
|--------------------------------------------------------------------------------|
|TypeScript 212 2056 127 23447 |
|Markdown 2 82 0 332 |
|CSS 2 53 2 200 |
|JSON 6 0 0 188 |
|JavaScript 6 6 0 58 |
|HTML 1 0 0 11 |
|--------------------------------------------------------------------------------|
|SUM: 229 2197 129 24236 |

---

## Get Started

```bash
git clone https://github.com/Usman-T/nafs.git
cd nafs
docker-compose up --build
```

Then create your `.env`:

```env
DATABASE_URL=postgresql://postgres:12345678@postgres:5432/nafs?schema=public
AUTH_SECRET=your_secret
KV_URL=...
KV_REST_API_TOKEN=...
QURAN_API_CLIENT_ID=...
QURAN_API_CLIENT_SECRET=...
```

Install and generate :

```bash
bun install
bunx prisma generate
bunx prisma migrate dev
```

---

## Architecture

- 🧠 All business logic inside `lib/actions.ts` — composable and clean.
- 🔐 Secure auth and route-level access via middleware.
- ⚙️ SSR-first architecture with client islands for animations.
- 💾 LocalStorage for streak/task memory + Redis for session caching.
- 📦 TWA-ready with custom service worker and offline fallback.

---

## License

MIT — free to use, remix, and build with barakah.

---


“He has succeeded who purifies [his soul], and he has failed who corrupts it.” — Qur’an 91:9–10