🛒 Fresqo Supermarket — Microservices E-Commerce Platform

Fresqo adalah platform e-commerce supermarket modern dengan arsitektur microservices production-grade, dibangun menggunakan Node.js + Next.js dengan design bold & vibrant yang memukau.

Live Demo: https://fresqo-supermarket.vercel.app/

📸 Preview

🎨 Design: Neubrutalism modern dengan warna-warna vibrant (hot pink, sunshine yellow, mint green)
⚡ Performance: Inter-service communication yang efisien via API Gateway
🔒 Security: JWT authentication, rate limiting, Helmet.js
📱 Responsive: Mobile-first design, mulus di semua device

🏗️ Arsitektur

┌─────────────────────────────────────────────────────────────────────┐
│                          CLIENT (Next.js 14)                         │
│                     http://localhost:3000                            │
└──────────────────────────────┬──────────────────────────────────────┘
                               │ HTTPS
                               ▼
┌─────────────────────────────────────────────────────────────────────┐
│                      API GATEWAY (Port 4000)                         │
│   • Request routing  • Rate limiting  • Security (Helmet, CORS)     │
└─┬────────────┬────────────┬────────────┬────────────┬──────────────┘
  │            │            │            │            │
  ▼            ▼            ▼            ▼            ▼
┌──────┐   ┌───────┐   ┌──────┐   ┌───────┐   ┌─────────┐
│ AUTH │   │PRODUCT│   │ CART │◄──┤ ORDER │──►│ PAYMENT │
│ 4001 │   │ 4002  │◄──┤ 4003 │   │ 4004  │   │  4005   │
└──────┘   └───────┘   └──────┘   └───────┘   └─────────┘
 JWT       28 products  Carts      Orders      9 methods
 Users     8 categories per user   Timeline    Simulated

Service Responsibilities

Service	Port	Responsibility
🚪 API Gateway	4000	Single entry point, routing, rate limiting, security headers
🔐 Auth Service	4001	Register, login, JWT issuance, profile management
📦 Product Service	4002	Product catalog, search, filters, categories, stock
🛒 Cart Service	4003	Shopping cart management per user (calls Product Service)
📋 Order Service	4004	Checkout orchestration (calls Cart → Payment → Product)
💳 Payment Service	4005	Payment simulation (9 methods: BCA, GoPay, OVO, COD, dll)

Inter-Service Communication Flow (Checkout)

User clicks "Checkout"
    │
    ▼
[Frontend] ──POST──► [API Gateway] ──► [Order Service]
                                             │
                                             ├──GET──► [Cart Service] ──GET──► [Product Service]
                                             │
                                             ├──POST──► [Payment Service]
                                             │
                                             ├──DELETE──► [Cart Service] (clear cart)
                                             │
                                             └──PATCH──► [Product Service] (update stock)

✨ Fitur Utama

🛍️ Customer Features

✅ Katalog Produk — 28+ produk realistis dalam 8 kategori (buah, sayur, daging, dairy, dll)
✅ Search & Filter — Cari by name/tag, filter by kategori & harga, sort by rating/harga/diskon
✅ Shopping Cart — Add/update/remove items dengan real-time subtotal calculation
✅ Checkout Flow — Form alamat, pilih payment method, review order, submit
✅ Payment Simulation — 9 metode: BCA/Mandiri/BNI VA, GoPay, OVO, DANA, ShopeePay, Credit Card, COD
✅ Order Tracking — Real-time timeline dengan auto-refresh setiap 5 detik
✅ Authentication — JWT-based, register/login/profile

👨‍💼 Admin Features

📊 Dashboard — Revenue, total orders, status breakdown, recent orders
📦 Product Management — View all products dengan stock monitoring
📋 Order Management — Update order status (pending → confirmed → processing → shipped → delivered)
👥 User Management — View all registered users

🔧 Technical Features

🔐 JWT authentication dengan middleware di semua protected services
🛡️ Rate limiting (500 req / 15 min) dan Helmet security headers
🌐 Centralized CORS configuration di API Gateway
📝 Standardized response format di seluruh microservices
🎯 In-memory databases (easy setup, mudah di-swap ke PostgreSQL/MongoDB)
📦 Service discovery via environment variables
🧪 Health check endpoints di setiap service (/health)

🚀 Quick Start

Prasyarat

Node.js ≥ 18.x (download)
npm ≥ 9.x (sudah termasuk di Node.js)
Git (untuk clone)

Instalasi (5 menit)

1. Clone atau extract project:

cd fresqo-supermarket

2. Setup environment variables:

cp .env.example .env

3. Install semua dependencies sekaligus:

npm run install:all

Script ini akan install dependencies untuk:

Root project (concurrently)
6 microservices
Frontend Next.js

Waktu instalasi: ~2-3 menit tergantung koneksi.

4. Jalankan semua services sekaligus:

npm run dev

Selesai! 🎉 Buka browser:

🌐 Frontend: http://localhost:3000
🚪 API Gateway: http://localhost:4000/api

Demo Accounts

Untuk testing cepat, gunakan akun demo berikut:

Role	Email	Password
🔑 Admin	`admin@fresqo.com`	`admin123`
👤 Customer	`user@fresqo.com`	`user123`

🗂️ Struktur Project

fresqo-supermarket/
├── 📄 package.json              # Root workspace
├── 📄 .env.example              # Environment template
├── 📄 README.md                 # Dokumentasi ini
│
├── 📁 shared/                   # Shared utilities
│   ├── logger.js                # Colored logger
│   └── response.js              # Standardized response format
│
├── 📁 services/                 # All microservices
│   ├── 📁 api-gateway/          # Port 4000
│   │   ├── package.json
│   │   └── src/server.js        # Gateway + proxy routing
│   │
│   ├── 📁 auth-service/         # Port 4001
│   │   ├── package.json
│   │   └── src/
│   │       ├── server.js        # Auth endpoints
│   │       └── db.js            # In-memory user DB
│   │
│   ├── 📁 product-service/      # Port 4002
│   │   ├── package.json
│   │   └── src/
│   │       ├── server.js        # Product CRUD + search
│   │       └── data.js          # 28 seeded products
│   │
│   ├── 📁 cart-service/         # Port 4003
│   │   ├── package.json
│   │   └── src/server.js        # Cart + inter-service call
│   │
│   ├── 📁 order-service/        # Port 4004
│   │   ├── package.json
│   │   └── src/server.js        # Order orchestration
│   │
│   └── 📁 payment-service/      # Port 4005
│       ├── package.json
│       └── src/server.js        # Payment simulation
│
└── 📁 frontend/                 # Next.js 14 (App Router)
    ├── package.json
    ├── next.config.js
    ├── tailwind.config.js       # Custom Fresqo theme
    └── src/
        ├── app/                 # Next.js app router
        │   ├── layout.jsx
        │   ├── page.jsx         # Homepage (landing)
        │   ├── globals.css      # Global styles + animations
        │   ├── products/        # Catalog + [id]
        │   ├── cart/            # Shopping cart
        │   ├── checkout/        # Checkout flow
        │   ├── orders/          # Orders list + [id]
        │   ├── login/
        │   ├── register/
        │   ├── admin/           # Admin dashboard
        │   └── about/
        ├── components/          # Reusable components
        │   ├── Navbar.jsx
        │   ├── Footer.jsx
        │   └── ProductCard.jsx
        ├── lib/
        │   ├── api.js           # Axios API client
        │   └── utils.js         # Helpers (formatCurrency, dll)
        └── store/               # Zustand stores
            ├── authStore.js
            └── cartStore.js

🔧 Usage & Testing

Running Individual Services

Kalau mau run 1 service saja untuk debugging:

# Individual service
npm run dev:gateway    # Port 4000
npm run dev:auth       # Port 4001
npm run dev:product    # Port 4002
npm run dev:cart       # Port 4003
npm run dev:order      # Port 4004
npm run dev:payment    # Port 4005
npm run dev:frontend   # Port 3000

Testing API Endpoints

Health check:

curl http://localhost:4000/health

Get products:

curl http://localhost:4000/api/products?limit=5

Login:

curl -X POST http://localhost:4000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"user@fresqo.com","password":"user123"}'

Add to cart (replace TOKEN):

curl -X POST http://localhost:4000/api/cart/add \
  -H "Authorization: Bearer TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"productId":"prod-001","quantity":2}'

End-to-End Demo Flow

Coba flow lengkap ini untuk merasakan pengalaman microservices in action:

🏠 Buka homepage → browse produk featured
📦 Klik kategori "Buah-buahan" → explore products dengan filter
🔐 Klik login → pakai user@fresqo.com / user123
🛒 Tambahkan 3-4 produk ke keranjang
💳 Klik "Checkout" → isi alamat → pilih GoPay → bayar
📋 Otomatis redirect ke order detail → lihat timeline tracking
⏱️ Tunggu 5 detik → status berubah ke "processing"
⏱️ Tunggu 15 detik → status berubah ke "shipped"
🔑 Logout, login sebagai admin → lihat dashboard dengan revenue stats
📦 Admin tab "Orders" → ubah status pesanan ke "delivered"

🎨 Design System

Warna (Vibrant Palette):

🔴 Primary: #FF3366 (Hot Pink)
🟡 Secondary: #FFB627 (Sunshine Yellow)
🟢 Accent: #00D9A3 (Mint Green)
🟣 Purple: #9775FA
🔵 Blue: #4DABF7
⚫ Dark: #1A1A2E
🤍 Cream: #FFF8F0

Typography:

Display: Fraunces (serif, untuk heading)
Body: Plus Jakarta Sans (sans-serif)
Mono: JetBrains Mono (kode & angka)

Design Style: Neubrutalism — bold borders (2px black), hard shadows (brutal 4-10px), playful micro-animations (wiggle, float, marquee).

🛠️ Tech Stack

Backend

Runtime: Node.js 18+
Framework: Express.js
Auth: jsonwebtoken + bcryptjs
Validation: express-validator
Proxy: http-proxy-middleware (API Gateway)
Security: Helmet, CORS, express-rate-limit
HTTP Client: Axios (inter-service)

Frontend

Framework: Next.js 14 (App Router)
Language: JavaScript + JSX
Styling: Tailwind CSS dengan custom theme
State: Zustand (lightweight, with persistence)
HTTP: Axios dengan JWT interceptor
UI: Lucide React icons, Framer Motion animations
Forms: React hooks + validation
Notifications: react-hot-toast

🚢 Production Considerations

Project ini adalah demo / portfolio project. Untuk production, pertimbangkan:

Database:

Ganti in-memory storage dengan PostgreSQL / MongoDB
Setiap service punya database sendiri (database per service pattern)

Infrastructure:

Containerize dengan Docker, orchestrate dengan Kubernetes atau Docker Compose
Service mesh (Istio/Linkerd) untuk observability yang better
API Gateway production-grade (Kong/Tyk) dengan caching

Security:

Refresh tokens + token rotation
Rate limiting per user/IP yang lebih granular
Secret management dengan Vault / AWS Secrets Manager
HTTPS everywhere

Observability:

Distributed tracing (Jaeger/Zipkin)
Centralized logging (ELK Stack / Loki)
Metrics (Prometheus + Grafana)

Resilience:

Circuit breakers (opossum) untuk inter-service calls
Message queues (RabbitMQ/Kafka) untuk async workflows
Retry logic dengan exponential backoff

Payment (real):

Integrate dengan Midtrans, Xendit, atau Stripe
Webhook handlers untuk payment confirmation

🐛 Troubleshooting

Port sudah dipakai?

# Cari process di port 4000
npx kill-port 4000 4001 4002 4003 4004 4005 3000

Dependencies gagal install?

# Bersihkan node_modules dan coba lagi
rm -rf node_modules services/*/node_modules frontend/node_modules
npm run install:all

Service tidak bisa diakses?

Pastikan semua 7 services (6 backend + 1 frontend) running
Check log masing-masing service di terminal untuk error
Test /health endpoint tiap service

CORS error di browser?

API Gateway sudah handle CORS untuk localhost:3000
Kalau pakai port berbeda di frontend, update cors config di api-gateway/src/server.js

📝 License

MIT License — feel free untuk pakai project ini sebagai belajar / portfolio / template proyek Anda sendiri.

🙏 Credits

Built with ❤️ by Rayhan — sebagai showcase arsitektur microservices modern.

Images: Unsplash Icons: Lucide Fonts: Google Fonts

📬 Feedback?

Punya saran, pertanyaan, atau menemukan bug? Project ini masih bisa di-improve terus!

Happy coding! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
docs		docs
frontend		frontend
scripts		scripts
services		services
shared		shared
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

🛒 Fresqo Supermarket — Microservices E-Commerce Platform

Live Demo: https://fresqo-supermarket.vercel.app/

📸 Preview

🏗️ Arsitektur

Service Responsibilities

Inter-Service Communication Flow (Checkout)

✨ Fitur Utama

🛍️ Customer Features

👨‍💼 Admin Features

🔧 Technical Features

🚀 Quick Start

Prasyarat

Instalasi (5 menit)

Demo Accounts

🗂️ Struktur Project

🔧 Usage & Testing

Running Individual Services

Testing API Endpoints

End-to-End Demo Flow

🎨 Design System

🛠️ Tech Stack

Backend

Frontend

🚢 Production Considerations

🐛 Troubleshooting

📝 License

🙏 Credits

📬 Feedback?

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

🛒 Fresqo Supermarket — Microservices E-Commerce Platform

Live Demo: https://fresqo-supermarket.vercel.app/

📸 Preview

🏗️ Arsitektur

Service Responsibilities

Inter-Service Communication Flow (Checkout)

✨ Fitur Utama

🛍️ Customer Features

👨‍💼 Admin Features

🔧 Technical Features

🚀 Quick Start

Prasyarat

Instalasi (5 menit)

Demo Accounts

🗂️ Struktur Project

🔧 Usage & Testing

Running Individual Services

Testing API Endpoints

End-to-End Demo Flow

🎨 Design System

🛠️ Tech Stack

Backend

Frontend

🚢 Production Considerations

🐛 Troubleshooting

📝 License

🙏 Credits

📬 Feedback?

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages