LakuKan Web v2

Overview

LakuKan Web v2 adalah platform two-sided marketplace modern berbasis web yang menghubungkan Klien (Clients) dan Penyedia Jasa (Vendors) di seluruh Indonesia untuk berbagai kebutuhan layanan profesional, baik pengerjaan secara daring (remote) maupun langsung di lokasi (on-site). Platform ini dirancang dengan pendekatan mobile-first berkinerja tinggi, menghadirkan ekosistem transaksi yang aman dan transparan melalui sistem rekening bersama (escrow/rekber), negosiasi harga interaktif, komunikasi real-time (chat & WebRTC call), penemuan penyedia jasa berbasis peta interaktif (geolocation), serta asisten cerdas berbasis kecerdasan buatan (AI-Powered Drafting Assistant) untuk membantu optimasi konten penawaran jasa dan misi.

---

Tech Stack

1. Frontend & Core Framework

• Next.js 16 (App Router & Turbopack): Server-Side Rendering (SSR), Client-Side Routing, dan Image Optimization.
• React 19: Komponen reaktif terbaru dengan hooks modern.
• TypeScript 5: Penulisan kode berskala enterprise dengan strict type safety tanpa deklarasi any.

2. State & Form Architecture

• Zustand 5: Manajemen state global yang ringan untuk sesi autentikasi, notifikasi, dan profil.
• React Hook Form 7: Pengelolaan form berkinerja tinggi pada wizard multi-langkah (multi-step wizard).
• Zod 4: Validasi skema formulir dan payload data API yang ketat secara deklaratif.

3. Styling & Design System

• Tailwind CSS v4: Utility-first CSS dengan desain responsif, modern, dan konsisten terhadap brand guide LakuKan.
• Radix UI Primitives & CVA: Komponen UI yang aksesibel (accessible) dan terstandarisasi.
• Lucide Icons: Set ikon modern dan konsisten di seluruh aplikasi.
• Sonner: Sistem notifikasi toast interaktif dan ringan.

4. Maps & Geolocation

• Google Maps API (@react-google-maps/api): Pemilihan koordinat dan deteksi alamat presisi.
• Leaflet & React-Leaflet (react-leaflet-cluster): Visualisasi peta penyedia jasa dan marker clustering.

5. Networking & Real-Time

• Custom apiClient Engine: Abstraksi fetch terpadu dengan otomatisasi header Authorization, base-url resolver, dan token refresh queue.
• OpenRouter AI Integration: Integrasi LLM untuk pembuatan draf saran AI (AI Suggestions).
• Socket.io Client & WebRTC: Komunikasi chat instan dua arah dan panggilan suara/video interaktif.
• Firebase Cloud Messaging: Penanganan notifikasi push real-time.

6. Tooling, Quality & Testing

• Storybook 10: Dokumentasi dan pengujian UI komponen secara terisolasi.
• Vitest & Playwright: Unit testing dan pengujian alur web end-to-end.
• ESLint 9 & Prettier: Standar penulisan kode bersih, JSDoc terstruktur, dan penegakan aturan batas baris (max-lines).