Proyek Masih Dalam Pengembangan

Do-Dzikir sedang dalam tahap pengembangan aktif. Beberapa fitur mungkin belum stabil. Silakan report bugs atau berikan feedback через GitHub Issues.

👨‍💻 Developer Documentation

Panduan lengkap untuk setup, development, dan kontribusi ke proyek Do-Dzikir

⚡ Quick Links

→ GitHub Repository → Next.js Documentation → TypeScript Docs → Tailwind CSS Docs

Tech Stack

Frontend

• Next.js 16 - React framework
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS v4 - Styling
• Lucide React - Icons

Backend & Database

• Next.js API Routes - Backend
• Prisma ORM - Database
• PostgreSQL - Database (via Prisma Adapter)
• NextAuth.js - Authentication
• Zod - Schema validation

Setup Development

1. Prerequisite

✓ Node.js >= 20.x
✓ npm, yarn, atau pnpm
✓ PostgreSQL (untuk database)
✓ Git

2. Clone Repository

git clone https://github.com/DimzsArdiminda/tasbih-counter
cd do-dzikir

3. Install Dependencies

npm install
# atau: yarn install / pnpm install

4. Environment Variables

Buat file .env.local di root:

DATABASE_URL="postgresql://user:password@localhost:5432/do_dzikir"
NEXTAUTH_SECRET="your-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"

5. Setup Database

npx prisma migrate dev

6. Jalankan Development Server

npm run dev

Buka http://localhost:3000 di browser

Project Structure

do-dzikir/
├── app/                          # Next.js App Router
│   ├── (main)/
│   │   ├── dashboard/           # Dashboard pengguna
│   │   ├── tasbih/              # Halaman counter tasbih
│   │   ├── blog/                # Blog & artikel
│   │   └── jadwal-sholat/       # Jadwal waktu sholat
│   ├── (support)/
│   │   ├── tentang/             # Halaman About
│   │   └── developer/           # Developer docs (halaman ini)
│   ├── api/                      # API Routes
│   │   ├── cities/              # GET kota-kota
│   │   ├── prayer/              # GET jadwal sholat
│   │   └── province/            # GET provinsi
│   ├── auth/                     # Authentication pages
│   │   ├── login
│   │   ├── register
│   │   └── forgot-password
│   ├── layout.tsx               # Root layout
│   └── page.tsx                 # Homepage
├── components/                   # React Components
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── Hero.tsx
│   ├── FeatureCard.tsx
│   └── ...
├── prisma/
│   ├── schema.prisma            # Database schema
│   └── migrations/              # Database migrations
├── public/                       # Static assets
├── eslint.config.mjs
├── next.config.ts
├── tailwind.config.ts
└── tsconfig.json

Available Scripts

npm run dev

Jalankan development server dengan hot reload

npm run build

Build aplikasi untuk production

npm run start

Jalankan production build

npm run lint

Run ESLint untuk code quality check

API Documentation

GET /api/province

Mendapatkan daftar semua provinsi di Indonesia

Response: Array<{
  id: string
  name: string
  cities: Array<City>
}>

GET /api/cities

Mendapatkan daftar semua kota dengan koordinat

Response: Array<{
  id: string
  name: string
  latitude: number
  longitude: number
  provinceId: string
}>

GET /api/prayer

Mendapatkan jadwal sholat berdasarkan koordinat

Query Parameters:

• latitude (required): Latitude koordinat
• longitude (required): Longitude koordinat

Response: {
  subuh: string
  dzuhur: string
  ashar: string
  maghrib: string
  isya: string
  imsak: string
  terbit: string
  dhuha: string
}

📋 Development Guidelines

Code Style

• Use TypeScript untuk type safety
• Follow ESLint config yang sudah ada
• Gunakan Tailwind CSS untuk styling
• Buat component yang reusable dan modular
• Gunakan server components ketika memungkinkan

Naming Conventions

• Components: PascalCase (e.g., HeaderNav.tsx)
• Files: kebab-case untuk pages (e.g., jadwal-sholat)
• Variables: camelCase (e.g., prayerTimes)
• Database: snake_case (e.g., prayer_times)

Git Workflow

1. Fork repository
2. Buat branch fitur: git checkout -b feature/amazing-feature
3. Commit perubahan: git commit -m "Add amazing feature"
4. Push ke branch: git push origin feature/amazing-feature
5. Buat Pull Request dengan deskripsi yang jelas

🗓️ Project Roadmap

✅ Done

• Jadwal sholat dengan geolokasi
• Pencarian kota dan provinsi
• Homepage & landing page
• Dark mode support

🚀 In Progress

• Tasbih counter digital
• User authentication & dashboard
• Prayer time notifications

📅 Planned

• Al-Quran digital viewer
• Daily duas & prayers
• Qibla direction finder
• User activity statistics
• Mobile app (React Native)

🔧 Troubleshooting

Database Connection Error

Pastikan DATABASE_URL sudah benar di .env.local dan PostgreSQL service berjalan.

Port 3000 Already in Use

Gunakan port berbeda: npm run dev -- -p 3001

Module Not Found

Jalankan npm install ulang dan restart development server.

🤝 Contributing

Kontribusi sangat diterima dari developer Muslim maupun non-Muslim yang ingin membantu! Dengan berkontribusi, Anda membantu memperluas akses teknologi untuk keperluan ibadah.

Cara Berkontribusi

1. Report bugs atau suggest fitur melalui GitHub Issues
2. Fork repository & buat branch fitur
3. Buat commit dengan pesan yang jelas
4. Push dan buat Pull Request dengan deskripsi
5. Tunggu review dan approval dari maintainers

📞 Support & Contact

Ada pertanyaan atau masalah? Hubungi kami:

📧 Email: dimasardiminda@gmail.com
🐙 GitHub Issues: Report bugs & features
📚 Documentation: Baca README.md di repository

Made with ❤️ untuk komunitas Muslim Indonesia