Fredli4qoni Portfolio - Web Developer

Overview

LakuKan Web v2 is a modern web-based two-sided marketplace platform connecting Clients and Vendors across Indonesia for various professional service needs, both remote and on-site. The platform is designed with a high-performance mobile-first approach, providing a secure and transparent transaction ecosystem through an escrow system, interactive price negotiation, real-time communication (chat & WebRTC call), geolocation-based service discovery (interactive maps), and an AI-Powered Drafting Assistant to optimize service offerings and project missions.

Tech Stack

1. Frontend & Core Framework

Next.js 16 (App Router & Turbopack): Server-Side Rendering (SSR), Client-Side Routing, and Image Optimization.
React 19: Modern reactive components with latest hooks.
TypeScript 5: Enterprise-scale development with strict type safety and zero any declarations.

2. State & Form Architecture

Zustand 5: Lightweight global state management for authentication sessions, notifications, and profiles.
React Hook Form 7: High-performance form handling for multi-step wizards.
Zod 4: Declarative and strict schema validation for form inputs and API payloads.

3. Styling & Design System

Tailwind CSS v4: Utility-first CSS with responsive, modern design aligned with the LakuKan brand guide.
Radix UI Primitives & CVA: Standardized, accessible UI components.
Lucide Icons: Modern and consistent icon set across the platform.
Sonner: Lightweight and interactive toast notification system.

4. Maps & Geolocation

Google Maps API (@react-google-maps/api): High-precision coordinate selection and address geocoding.
Leaflet & React-Leaflet (react-leaflet-cluster): Interactive provider map visualization with marker clustering.

5. Networking & Real-Time

Custom apiClient Engine: Unified fetch abstraction with automated Authorization headers, base-URL resolution, and token refresh queuing.
OpenRouter AI Integration: LLM integration for AI-powered suggestion drafts.
Socket.io Client & WebRTC: Real-time two-way chat communication and interactive voice/video calls.
Firebase Cloud Messaging: Real-time push notification delivery.

6. Tooling, Quality & Testing

Storybook 10: Component documentation and isolated UI testing.
Vitest & Playwright: Unit testing and end-to-end web flow testing.
ESLint 9 & Prettier: Clean code standards, structured JSDoc, and enforced line length rules.

Objectives

End-to-End Dual Persona Experience: Provide a unified workflow for Clients (service exploration, mission creation, direct ordering, payment) and Vendors (multi-package service catalogs, custom offers, digital wallet, and revenue analytics).
AI-Powered Content Optimization: Integrate an AI assistant (OpenRouter LLM) to help vendors and clients draft persuasive titles, service descriptions, relevant tag recommendations, structured work steps, and service package names instantly.
Interactive Price Negotiation & Inspection: Facilitate flexible real-time price negotiation, custom offer creation, and initial inspections for physical services prior to order commitment.
Location-Based Service Discovery: Enable accurate search and filtering of nearby service providers using interactive maps (Google Maps API & Leaflet).
Real-time Communication & Call: Integrate live chat, media attachment exchange, and WebRTC-based audio and video calls for seamless consultations between clients and vendors.
Secure Escrow Payment & Digital Wallet: Build a secure escrow payment mechanism with multi-channel payment gateway support, automated invoicing, fund withdrawals, and transparent refund handling.
High-Reliability Authentication & Mobile UX: Implement a dual-persistence authentication architecture (HTTP cookies + Web Storage) with an automatic token refresh queue to ensure persistent sessions on mobile and desktop without unexpected logouts.
Enterprise-Grade Codebase Standards: Enforce 100% type safety with strict TypeScript (zero any), Atomic Design modular component architecture, and isolated component testing via Storybook.