🏘️ Layanan Digital Desa

Platform digital terintegrasi untuk mempermudah warga dalam mengajukan dokumen administrasi dan menyampaikan pengaduan kepada perangkat desa.

📋 Daftar Isi

• Tentang Project
• Fitur Utama
• Teknologi yang Digunakan
• Struktur Project
• Instalasi & Setup
• Cara Menjalankan
• API Endpoints
• Database Schema
• Deployment
• Kontribusi
• Lisensi

🎯 Tentang Project

Layanan Digital Desa adalah aplikasi web modern yang dirancang untuk mempermudah komunikasi antara warga desa dengan perangkat desa. Aplikasi ini menyediakan platform digital yang aman, cepat, dan mudah digunakan untuk:

• Pengajuan Dokumen: Warga dapat mengajukan berbagai jenis surat administrasi secara online
• Sistem Pengaduan: Platform untuk menyampaikan keluhan dan saran terkait pelayanan desa
• Dashboard Admin: Interface untuk perangkat desa mengelola pengajuan dan pengaduan
• Sistem Autentikasi: Keamanan data dengan enkripsi end-to-end

✨ Fitur Utama

👥 Untuk Warga

• 📄 Pengajuan Dokumen Online

  • Surat Keterangan Domisili
  • Surat Pengantar KTP/KK
  • Surat Keterangan Usaha
  • Surat Keterangan Tidak Mampu
  • Surat Keterangan Kelahiran
  • Tracking status pengajuan real-time

• 📢 Sistem Pengaduan

  • Kategori pengaduan terstruktur
  • Upload bukti pendukung
  • Status tracking pengaduan
  • Jaminan kerahasiaan identitas

• 📊 Dashboard Personal

  • Riwayat pengajuan dokumen
  • Status pengaduan
  • Notifikasi real-time
  • Profil pribadi

🏛️ Untuk Admin/Perangkat Desa

• 📈 Dashboard Analytics

  • Statistik pengajuan dan pengaduan
  • Grafik trend bulanan
  • Data warga terdaftar

• 📋 Manajemen Data

  • Kelola pengajuan dokumen
  • Proses pengaduan masyarakat
  • Verifikasi data warga
  • Generate laporan

• 🔐 Sistem Keamanan

  • Role-based access control
  • Enkripsi data sensitif
  • Audit trail aktivitas

🛠️ Teknologi yang Digunakan

Frontend

• React 19.1.0 - Library UI modern dengan hooks
• TailwindCSS 4.1.11 - Utility-first CSS framework
• Framer Motion - Animasi dan transisi smooth
• React Router DOM - Client-side routing
• React Icons & Lucide React - Icon library
• React Toastify - Notifikasi user-friendly
• AOS (Animate On Scroll) - Scroll animations

Backend

• Node.js - Runtime JavaScript
• Express.js 5.1.0 - Web framework
• MongoDB 8.3.4 - NoSQL database
• Mongoose - ODM untuk MongoDB
• bcryptjs - Password hashing
• express-session - Session management
• cors - Cross-origin resource sharing
• crypto-js - Enkripsi data

Tools & Deployment

• Vite - Build tool modern
• ESLint - Code linting
• Vercel - Frontend deployment
• Railway - Backend deployment
• MongoDB Atlas - Cloud database

📁 Struktur Project

layanan-desa-digital/
├── client/                 # Frontend React App
│   ├── src/
│   │   ├── components/     # Komponen React
│   │   │   ├── Admin/     # Komponen admin
│   │   │   ├── HomePage/  # Halaman utama
│   │   │   ├── HalamanUtama/ # Dashboard user
│   │   │   └── Login/     # Autentikasi
│   │   ├── contexts/      # React Context
│   │   ├── layouts/      # Layout components
│   │   └── pages/        # Halaman admin
│   ├── public/           # Static assets
│   └── package.json
├── server/                # Backend Node.js
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   │   ├── api/          # API endpoints
│   │   └── auth/         # Autentikasi routes
│   ├── middleware/       # Custom middleware
│   ├── utils/            # Utility functions
│   └── config/           # Konfigurasi database
└── README.md

🚀 Instalasi & Setup

Prerequisites

• Node.js (v18 atau lebih baru)
• MongoDB (local atau Atlas)
• Git

1. Clone Repository

git clone https://github.com/IchwanArdi/layanan-desa-digital.git
cd layanan-desa-digital

2. Setup Backend

cd server
npm install

Buat file .env di folder server/:

MONGO_URI=mongodb://localhost:27017/layanan-desa
SESSION_SECRET=your-secret-key-here
NODE_ENV=development

3. Setup Frontend

cd ../client
npm install

Buat file .env di folder client/:

VITE_API_URL=http://localhost:5000

🏃‍♂️ Cara Menjalankan

Development Mode

Terminal 1 - Backend:

cd server
npm run dev

Server akan berjalan di http://localhost:5000

Terminal 2 - Frontend:

cd client
npm run dev

Aplikasi akan berjalan di http://localhost:5173

Production Mode

Build Frontend:

cd client
npm run build

Start Backend:

cd server
npm start

🔌 API Endpoints

Autentikasi

POST /api/login          # Login user
POST /api/register       # Registrasi user baru
POST /api/logout         # Logout user
GET  /api/check-auth     # Cek status autentikasi

Pengajuan Dokumen

GET    /api/pengajuan-dokumen     # Ambil data pengajuan
POST   /api/pengajuan-dokumen     # Buat pengajuan baru
PUT    /api/pengajuan-dokumen/:id # Update status pengajuan
DELETE /api/pengajuan-dokumen/:id # Hapus pengajuan

Pengaduan

GET    /api/pengaduan     # Ambil data pengaduan
POST   /api/pengaduan     # Buat pengaduan baru
PUT    /api/pengaduan/:id # Update status pengaduan
DELETE /api/pengaduan/:id # Hapus pengaduan

Dashboard & Analytics

GET /api/dashboard        # Data dashboard user
GET /api/total-pengaduan  # Total pengaduan
GET /api/total-ajukan     # Total pengajuan
GET /api/data-user        # Data user

🗄️ Database Schema

User Model

{
  nama: String,
  nik: String (unique),
  email: String (unique),
  password: String (hashed),
  telepon: String,
  alamat: {
    jalan: String,
    rt: String,
    rw: String
  },
  tanggalLahir: Date,
  jenisKelamin: Enum,
  pekerjaan: String,
  statusVerifikasi: Enum,
  role: Enum ['user', 'admin'],
  isActive: Boolean
}

PengajuanDokumen Model

{
  jenisDokumen: Enum,
  namaLengkap: String,
  nik: String,
  telepon: String,
  alamat: String,
  keperluan: String,
  berkasPendukung: String,
  status: Enum,
  catatan: String,
  nomorSurat: String (auto-generated),
  warga: ObjectId (ref: User),
  tanggalSelesai: Date
}

Pengaduan Model

{
  judul: String,
  kategori: Enum,
  lokasi: String,
  deskripsi: String,
  status: Enum,
  warga: ObjectId (ref: User),
  createdAt: Date,
  updatedAt: Date
}

🌐 Deployment

Frontend (Vercel)

1. Connect repository ke Vercel
2. Set build command: npm run build
3. Set output directory: dist
4. Add environment variable: VITE_API_URL

Backend (Railway)

1. Connect repository ke Railway
2. Set start command: npm start
3. Add environment variables:
   • MONGO_URI
   • SESSION_SECRET
   • NODE_ENV=production

Database (MongoDB Atlas)

1. Buat cluster di MongoDB Atlas
2. Whitelist IP addresses
3. Buat database user
4. Update MONGO_URI di environment variables

🤝 Kontribusi

Kontribusi sangat diterima! Silakan:

1. Fork repository ini
2. Buat feature branch (git checkout -b feature/AmazingFeature)
3. Commit perubahan (git commit -m 'Add some AmazingFeature')
4. Push ke branch (git push origin feature/AmazingFeature)
5. Buat Pull Request

📄 Lisensi

Distributed under the MIT License. See LICENSE for more information.

📞 Kontak

Developer: Asus
Email: your-email@example.com
Project Link: https://github.com/IchwanArdi/layanan-desa-digital

---

⭐ Jika project ini membantu Anda, jangan lupa berikan star! ⭐