KulinerKu adalah aplikasi web PWA untuk mencari restoran, memberi review, menyimpan
favorit, dan memudahkan admin mengelola data kuliner secara efisien.
1.1. Desain Arsitektur Sistem
1.1.1. Gambaran Umum Arsitektur
Sistem KulinerKu memakai arsitektur three-tier: Client Layer, Application Layer, dan Data
Layer. Pemisahan ini membuat sistem lebih terstruktur, scalable, dan mudah dikelola.
1.1.2. Komponen Utama Sistem
Client Layer menampilkan UI, mengirim request, menyimpan data lokal, dan mendukung
offline. Application Layer mengelola logika aplikasi, routing, autentikasi, dan API. Data
Layer menggunakan Supabase untuk database, autentikasi JWT, dan penyimpanan file.
1.1.3. Alur Komunikasi Sistem
Client mengirim request ke API, middleware memverifikasi JWT, backend menjalankan
query, lalu mengembalikan hasil ke client dalam format JSON.
1.2. Diagram Sistem
1.2.1. Entity Relationship Diagram (ERD)
ERD mencakup tabel users, restaurants, menu_items, reviews, dan favorites dengan relasi
one-to-many dan foreign key. Cascade delete digunakan untuk menjaga integritas data.
1.2.2. API Request Flow Diagram
Client mengirim request ke API, middleware memverifikasi JWT jika perlu, backend
mengakses database, dan semua respons dikembalikan dalam JSON.
1.2.3. Technology Stack
Frontend: React, TypeScript, Vite, Tailwind
Backend: [Link], Vercel, JWT
Database: Supabase
DevOps: Vercel & GitHub.
2. IMPLEMENTASI DUA SERVICE DAN KOMUNIKASI API
2.1. Implementasi Dua Service
2.1.1. Overview Dua Service
KulinerKu menggunakan dua service: Frontend (React + TypeScript + Vite) untuk UI dan
interaksi pengguna, serta Backend ([Link], Vercel Serverless) untuk logika, autentikasi, dan
akses database, sehingga sistem modular dan mudah diskalakan.
2.1.2. Detail Implementasi Service
Frontend Service: Mengelola UI, navigasi, form, state, token JWT, request ke backend, dan
mendukung offline dengan service worker dan IndexedDB.
Backend Service: Menangani endpoint API, validasi data, autentikasi JWT, CRUD ke
Supabase, rating, upload file, kontrol akses, dan manajemen sesi.
2.1.3. Komunikasi API Antara Dua Service
A. HTTP REST API Communication
HTTP REST API Communication: Frontend dan backend berkomunikasi lewat HTTP REST
API menggunakan JSON, sehingga sistem fleksibel, scalable, dan mudah diintegrasikan
dengan platform lain.
3. DEPLOYMENT CLOUD
3.1. Overview Deployment
KulinerKu dideploy di Vercel (frontend & backend) dan Supabase (database & storage)
dengan CDN, SSL, CI/CD, autentikasi, dan backup otomatis.
3.2. Deployment di Vercel
Frontend dan backend dideploy dalam monorepo, folder api/ jadi serverless API, build pakai
Vite, env dikelola di Vercel. Push ke GitHub memicu CI/CD, preview, dan deploy otomatis
dengan optimasi CDN, compression, image optimization, dan HTTP/3.
3.3. Deployment di Supabase
Supabase menyediakan PostgreSQL, storage, dan API dengan backup otomatis, SSL, dan
connection pooling. Backend terhubung via env Vercel, autentikasi pakai bcrypt + JWT, dan
file disimpan di Supabase Storage dengan CDN.
3.4. Deployment Workflow
Pengembangan dimulai di local, lalu push ke GitHub memicu build & deploy otomatis di
Vercel dengan preview deployment, update production saat merge, dan rollback instan jika
gagal.
3.5. Monitoring & Maintenance
Monitoring pakai Vercel Analytics dan Supabase Metrics, error ditangani lewat logs dan
Sentry, dengan sistem scalable otomatis melalui serverless dan peningkatan resource
Supabase.