Toko online game fisik original untuk gamer Indonesia.
PlayStation · Xbox · Nintendo · PC — terkurasi, original, bergaransi.
GameShelf adalah platform e-commerce yang fokus menjual game fisik original ke gamer dan kolektor di seluruh Indonesia. Marketplace umum penuh barang KW dan toko fisik makin sedikit — GameShelf hadir sebagai satu tempat yang dirancang khusus untuk segmen ini: katalog terkurasi, pembayaran aman, dan tracking pesanan transparan.
Project ini dibangun sebagai studi kasus end-to-end e-commerce modern: dari katalog produk dengan filter, checkout multi-tahap, integrasi pembayaran Midtrans, sampai admin panel untuk mengelola stok dan status pesanan secara realtime.
- Katalog terkurasi dengan filter kategori (PS5, Xbox, Switch, PC) & sorting
- Halaman detail produk lengkap dengan stok realtime
- Keranjang belanja dengan state global (Zustand) yang persistent
- Checkout multi-step dengan validasi alamat (React Hook Form + Zod)
- Pembayaran Midtrans: Virtual Account, QRIS, GoPay, kartu kredit
- Email konfirmasi otomatis via Resend setelah order & setelah pembayaran sukses
- Tracking pesanan 5 tahap: Dibuat → Dibayar → Dikemas → Dikirim → Selesai
- Update status realtime via Supabase WebSocket (tanpa refresh)
- Dashboard performa: pendapatan, produk terjual, peringatan stok menipis
- CRUD produk dengan upload gambar ke Supabase Storage
- Manajemen pesanan dengan filter berdasarkan status pembayaran/pengiriman
- Update status pesanan yang langsung tersinkron ke akun customer
- Auth terpisah dari customer dengan role guard di middleware
Landing page |
 Katalog dengan filter |
 Halaman detail produk |
 Form checkout |
 Pembayaran via Midtrans |
 Tracking 5 tahap |
Email konfirmasi otomatis via Resend
 Dashboard performa |
 Kelola pesanan & status |
CRUD produk
| Tech | Kegunaan |
|---|---|
| Next.js 14 (App Router) | Framework React dengan Server Components & API Routes |
| TypeScript | Type safety end-to-end |
| Tailwind CSS | Styling utility-first |
| shadcn/ui | Komponen UI yang konsisten & accessible |
| Zustand | State management untuk cart |
| React Hook Form + Zod | Form handling & validasi schema |
| Tech | Kegunaan |
|---|---|
| Supabase PostgreSQL | Database utama |
| Supabase Auth | Autentikasi customer & admin (role-based) |
| Supabase Realtime | WebSocket untuk update status pesanan live |
| Supabase Storage | Penyimpanan gambar produk |
| Tech | Kegunaan |
|---|---|
| Midtrans | Payment gateway (sandbox gratis untuk development) |
| Resend | Email transaksional (konfirmasi order & pembayaran) |
┌─────────────────────────┐ ┌─────────────────────────┐
│ Customer Web App │ │ Admin Panel │
│ (landing, katalog, │ │ (dashboard, produk, │
│ checkout, tracking) │ │ pesanan, status) │
└───────────┬─────────────┘ └───────────┬─────────────┘
│ │
└─────────────┬─────────────────────┘
│ HTTPS · Realtime WebSocket
▼
┌─────────────────────────────────────────────────────────────┐
│ Next.js (App Router) │
│ Server Components · API Routes · Middleware │
└─────────────────────────────┬───────────────────────────────┘
│ Supabase Client SDK
▼
┌─────────────────────────────────────────────────────────────┐
│ Supabase │
│ Postgres · Auth · Realtime (WS) · Storage │
└─────────────────────────────────────────────────────────────┘
│
┌───────────────┴───────────────┐
▼ ▼
┌──────────────┐ ┌──────────────┐
│ Midtrans │ │ Resend │
│ (payment) │ │ (email) │
└──────────────┘ └──────────────┘
- Node.js 18+
- pnpm / npm / yarn
- Akun Supabase (free tier cukup)
- Akun Midtrans (sandbox gratis)
- Akun Resend (free tier)
# 1. Clone repo
git clone https://github.com/<your-username>/gameshelf.git
cd gameshelf
# 2. Install dependencies
pnpm install
# 3. Setup environment variables
cp .env.example .env.localIsi .env.local dengan kredensial kamu:
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxx
SUPABASE_SERVICE_ROLE_KEY=xxxx
# Midtrans (Sandbox)
NEXT_PUBLIC_MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxx
MIDTRANS_SERVER_KEY=SB-Mid-server-xxxx
MIDTRANS_IS_PRODUCTION=false
# Resend
RESEND_API_KEY=re_xxxx
RESEND_FROM_EMAIL=noreply@yourdomain.com
# App
NEXT_PUBLIC_APP_URL=http://localhost:3000# Jalankan migration di Supabase
pnpm supabase db push
# (Opsional) seed data dummy
pnpm db:seed# Development
pnpm dev
# Build production
pnpm build && pnpm startBuka http://localhost:3000 di browser.
gameshelf/
├── app/
│ ├── (shop)/ # Route group: customer-facing
│ │ ├── page.tsx # Landing
│ │ ├── products/ # Katalog & detail
│ │ ├── cart/ # Keranjang
│ │ ├── checkout/ # Checkout flow
│ │ └── orders/ # Tracking pesanan
│ ├── (admin)/ # Route group: admin
│ │ ├── dashboard/
│ │ ├── products/ # CRUD produk
│ │ └── orders/ # Kelola pesanan
│ ├── api/
│ │ ├── midtrans/ # Webhook & create transaction
│ │ └── email/ # Resend trigger
│ └── layout.tsx
├── components/
│ ├── ui/ # shadcn/ui components
│ └── shop/ # Custom shop components
├── lib/
│ ├── supabase/ # Client & server helpers
│ ├── midtrans/ # Midtrans SDK wrapper
│ └── validators/ # Zod schemas
├── stores/ # Zustand stores (cart)
├── public/
└── docs/ # Screenshots untuk README
- MVP: katalog, checkout, payment, admin panel
- Realtime status update via WebSocket
- Email notifikasi otomatis
- Pre-order untuk rilis baru
- Sistem trade-in game bekas
- Wishlist & notifikasi stok
- Integrasi multi-kurir (JNE, J&T, SiCepat)
- Program membership & loyalty points
- Mobile app native (React Native)
Girindra Sulistiyo Wardoyo Founder & Developer · GameShelf
MIT © 2026 Girindra Sulistiyo Wardoyo
Built with ❤️ for the Indonesian gaming community.