♿ DifabelZone — Seni Melampaui Batas

Empowering Artisan Abilities through Modern Technology

---

🌟 Visi & Misi

DifabelZone adalah platform social enterprise yang dirancang untuk mendigitalisasi karya para pengrajin disabilitas di Indonesia. Kami bertransformasi dari sekadar katalog produk menjadi ekosistem inklusif yang memprioritaskan kemandirian ekonomi melalui teknologi mutakhir.

Kami percaya bahwa keterbatasan fisik bukanlah penghalang bagi kreativitas dan kemandirian finansial. DifabelZone hadir sebagai jembatan yang menghubungkan karya tulus dengan apresiasi tulus.

---

🔄 Evolusi Teknis: Migrasi Laravel ke Next.js 15

Proyek ini telah melalui transformasi arsitektur yang signifikan untuk mencapai performa enterprise-grade dan pengalaman pengguna yang lebih responsif.

Dimensi	Legacy System (Laravel)	Modern System (Next.js 15)	Dampak Performa
Rendering	Server-Side (Blade)	Hybrid (SSR & ISR)	Akses halaman 60% lebih cepat
State	Session-based	TanStack Query & Context	UI lebih fluid tanpa refresh
Keamanan	Manual Auth	Supabase Auth (JWT)	Enkripsi data standar industri
Typing	Dynamic (PHP)	Static (TypeScript)	Mengurangi bug saat runtime

---

✨ Fitur Utama & Inklusivitas

🎨 Katalog "Karya Hati"

Etalase produk yang dikurasi secara estetik, menampilkan detail tekstur, bahan, dan narasi di balik setiap kerajinan tangan menggunakan optimasi gambar next/image.

♿ Aksesibilitas Web (WCAG Compliance)

Kami membangun dengan prinsip inklusi digital:

• Semantic HTML: Struktur yang ramah bagi Screen Readers.
• High Contrast Support: Navigasi yang jelas bagi pengguna dengan gangguan penglihatan.
• Keyboard Friendly: Seluruh fitur dapat diakses tanpa menggunakan mouse.

🛡️ Transaksi Aman & Personal

• Seamless Checkout: Integrasi dengan Midtrans untuk pembayaran otomatis.
• Hybrid Support: Pilihan checkout via WhatsApp Admin untuk membantu pengguna yang lebih nyaman dengan komunikasi personal.

---

🛠️ Arsitektur Teknologi

Aplikasi ini dibangun menggunakan Tech Stack kelas dunia untuk menjamin skalabilitas:

• Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS.
• UI Library: Shadcn UI & Framer Motion (untuk animasi yang halus).
• Backend as a Service: Supabase (PostgreSQL, Auth, Storage).
• Payment Gateway: Midtrans Integration.
• Monitoring: Vercel Analytics.

---

📂 Struktur Folder Proyek

src/
├── app/              # Routing & Server Components
├── components/
│   ├── ui/           # Komponen dasar (Atom)
│   ├── shared/       # Layout, Navbar, Footer
│   └── modules/      # Logika fitur (Cart, Product, Auth)
├── hooks/            # Custom React Hooks
├── lib/              # Konfigurasi SDK (Supabase, Midtrans)
├── types/            # Definisi Interface TypeScript
└── store/            # State Management

---

🚀 Memulai Pengembangan Lokal

1. Clone Repositori

git clone [https://github.com/hendwunga/difabelzona.git](https://github.com/hendwunga/difabelzona.git)
cd difabelzone

2. Instalasi Dependensi

npm install

3. Konfigurasi Environment Variable Buat file .env.local dan lengkapi data berikut:

NEXT_PUBLIC_SUPABASE_URL=your_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key
MIDTRANS_SERVER_KEY=your_server_key
NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=your_client_key

4. Jalankan Mode Pengembangan

npm run dev

---

🗺️ Roadmap Masa Depan

• Multi-language Support: Dukungan Bahasa Inggris untuk pasar internasional.
• Artisan Story Video: Integrasi video pendek untuk setiap profil pengrajin.
• AI Recommendation: Rekomendasi produk berdasarkan minat pengguna.
• PWA (Progressive Web App): Akses lebih ringan di perangkat mobile dengan koneksi rendah.

---

DifabelZone — Seni Melampaui Batas, Karya Menembus Keterbatasan.