KURO Coffee — Specialty Coffee Shop & POS System

Background

Sebagian besar situs web kedai kopi hanyalah halaman statis informatif atau situs berbasis template generik tanpa backend operasional. Saya ingin membangun sesuatu yang menjembatani kesenjangan tersebut — situs web premium yang berfokus pada merek dengan dasbor operasional internal yang berfungsi penuh, semuanya dalam satu aplikasi Next.js menggunakan arsitektur App Router.

Merek fiktif KURO Coffee — kedai kopi khusus yang berbasis di Shibuya, Tokyo — berfungsi sebagai wahana kreatif. Nama "KURO" (黒, yang berarti "hitam" dalam bahasa Jepang) mencerminkan estetika minimalis namun berani dari merek tersebut: warna espresso gelap, aksen tanah liat hangat, dan tekstur butiran film analog yang meresap ke setiap piksel.

Technical Solution

Proyek ini adalah aplikasi full-stack Next.js 16 monolitik yang dibagi menjadi dua kelompok rute yang berbeda.:

• (landing) — Pengalaman merek yang ditampilkan kepada publik dengan 11 bagian yang dibuat dengan tangan, pengguliran yang halus, efek paralaks, dan transisi halaman sinematik.

• (dashboard) — Area admin yang terlindungi dengan Point-of-Sale (POS), CRUD menu, manajemen pesanan, dan analitik pendapatan, semuanya di balik otentikasi berbasis JWT.

Keputusan arsitektur utama meliputi:

• Next.js Server Actions untuk semua perubahan data (CRUD menu, pembuatan pesanan, pembaruan status) — menghilangkan kebutuhan akan lapisan API terpisah.

• Prisma ORM with Neon PostgreSQL (serverless Postgres) menggunakan adaptor driver `@prisma/adapter-neon` untuk akses basis data yang kompatibel dengan edge.

• NextAuth.js v5 (Auth.js) dengan penyedia Kredensial dan hashing kata sandi bcrypt, menggunakan pola konfigurasi terpisah (`auth.config.ts` untuk middleware edge, `auth.ts` untuk runtime Node.js lengkap).

• Zustand untuk manajemen status keranjang POS sisi klien, memberikan umpan balik UI instan sementara tindakan server menangani persistensi.

Key Features

Landing Page (Public):

• Cinematic Hero dengan gradien latar belakang paralaks, gumpalan uap SVG animasi, dan tampilan teks bertahap menggunakan GSAP ScrollTrigger + Framer Motion.

• Continuous Marquee Banners dengan kecepatan, arah, dan jeda saat kursor diarahkan yang dapat dikonfigurasi.

• Philosophy Section dengan statistik hitung mundur animasi yang dipicu oleh Intersection Observer.

• Interactive Menu Cards dengan kemiringan perspektif pada pergerakan mouse dan penyaringan kategori

• Parallax Quote bagian dengan translasi vertikal yang digerakkan oleh gulir

• Horizontal Scroll Text menggunakan efek gulir horizontal untuk menerjemahkan dari GSAP.

• Origin Cards menampilkan sumber kopi dengan transformasi skala saat kursor diarahkan ke gambar

• Experience Section dengan ilustrasi cangkir kopi SVG dan daftar fitur interaktif.

• Testimonial and CTA bagian dengan animasi gulir-terbuka

• Custom Cursor (khusus desktop) dengan titik + cincin yang mengikuti kursor mouse dengan interpolasi lerp dan perluasan status hover.

• Page Loader dengan transisi munculnya nama merek secara bertahap dan transisi pengungkapan jalur klip.

• Smooth Scrolling Didukung oleh Lenis untuk perilaku pengguliran 60fps yang mulus.

• Grain Overlay menggunakan tekstur noise fraktal SVG untuk estetika film analog

Admin Dashboard (Protected):

• Overview Dashboard dengan kartu statistik waktu nyata (pendapatan hari ini, jumlah pesanan, nilai pesanan rata-rata, perubahan dari minggu ke minggu) dan tabel pesanan hari ini.

• Point-of-Sale (POS) Terminal dengan menu grid yang difilter berdasarkan kategori, manajemen keranjang belanja melalui Zustand, input nama pelanggan, dan pembuatan pesanan sekali klik.

• Menu Management dengan operasi CRUD lengkap (membuat, mengedit, menghapus item), penetapan kategori, pengaktifan/penonaktifan ketersediaan, pemfilteran pencarian, dan formulir berbasis dialog.

• Order Management dengan tab filter status, pembaruan status langsung melalui menu tarik-turun, detail pesanan yang dapat diperluas, dan pengurutan kronologis.

• Revenue Analytics dengan grafik batang Recharts (tampilan 7 hari / 30 hari / bulanan), peringkat item terlaris, rincian pendapatan berdasarkan kategori, dan peralihan periode dengan data yang diambil dari server.

Design System:

• Identitas merek yang terdokumentasi lengkap (`BRANDING.md`) dengan pilihan font yang terkurasi

• Tipografi tiga tingkat: Dela Gothic One (tampilan), Instrument Serif (judul), DM Sans (isi)

• Token desain terpusat di `config/branding.ts` dan dipetakan ke variabel semantik Tailwind CSS dan shadcn/ui

• Dukungan tema gelap/terang dengan komponen shadcn bertema KURO

• Desain responsif dengan breakpoint desktop, tablet, dan seluler