eShop MERN - Multi-Vendor E-commerce Platform

Gambaran Umum

eShop MERN adalah platform e-commerce multi-vendor berbasis MERN yang menghubungkan customer, seller, dan admin dalam satu ekosistem. Aplikasi ini menangani alur belanja end-to-end sekaligus operasional seller (produk, event, pesanan, refund, pencairan dana) dan kontrol platform oleh admin, lengkap dengan chat real-time via Socket.IO.

Masalah Yang Diselesaikan

Platform marketplace sering terfragmentasi: customer butuh pengalaman belanja yang cepat, seller butuh dashboard operasional yang praktis, dan admin butuh visibilitas menyeluruh. Proyek ini menyatukan kebutuhan tersebut ke dalam satu sistem terpadu, dari discovery produk hingga pembayaran, pelacakan pesanan, komunikasi, dan manajemen finansial seller.

Peran Saya

Sebagai fullstack developer utama, saya berkontribusi pada:

• Desain dan implementasi arsitektur 3 service (client, server, socket)
• Pengembangan API backend (autentikasi JWT, order, payment, withdraw, conversation/message)
• Pengembangan frontend React + Redux untuk role customer, seller, dan admin
• Integrasi Stripe untuk pembayaran dan Socket.IO untuk inbox/chat real-time
• Implementasi kontrol akses berbasis role (ProtectedRoute, seller/admin guards)
• Integrasi email notifikasi (aktivasi akun, konfirmasi withdraw)
• Setup deployment config dan environment management lintas service

Solusi & Fitur Utama

• Customer flow lengkap: signup/login/aktivasi, browse produk & event, cart, checkout, pembayaran, tracking order, inbox chat
• Seller dashboard: kelola toko, produk, event, kupon, order, refund, dan penarikan dana
• Admin dashboard: monitoring user/seller, produk, event, order, dan approval withdraw
• Multi-order per checkout: cart dipisah per shopId untuk mendukung transaksi multi-vendor
• Realtime messaging: user-seller chat, status user online, update last message
• Keamanan akses: auth berbasis cookie + JWT untuk user, seller, dan admin
• Notifikasi email otomatis untuk proses penting (aktivasi/withdraw)

Tech Stack & Arsitektur

• Frontend: React 18, React Router v6, Redux Toolkit + thunk, Axios, Tailwind CSS, Material UI
• Backend: Node.js, Express.js, MongoDB + Mongoose, JWT, bcrypt/bcryptjs, Nodemailer
• Payment: Stripe (Payment Intents, publishable key endpoint)
• Realtime: Socket.IO (service terpisah)
• Media/File: Multer + Cloudinary

Arsitektur:

• client sebagai SPA untuk multi-role UI
• server sebagai REST API utama + business logic
• socket sebagai realtime gateway untuk fitur chat/inbox

Tantangan & Solusi Teknis

• Multi-vendor checkout: satu cart bisa berisi banyak seller
  Solusi: item cart di-group berdasarkan shopId, lalu dibuatkan order terpisah per toko.
• Otorisasi multi-role yang konsisten
  Solusi: middleware auth terpisah (isAuthenticated, isSeller, isAdmin) + protected routes di frontend.
• Sinkronisasi status order, stok, dan saldo seller
  Solusi: update stok saat status tertentu, update balance seller saat order delivered, plus alur refund terstruktur.
• Integrasi pembayaran aman di frontend-backend
  Solusi: backend expose endpoint stripeapikey + payment/process, frontend load Stripe Elements secara dinamis.
• Komunikasi real-time user-seller
  Solusi: socket server standalone untuk manajemen koneksi user, event chat, dan broadcast pembaruan pesan.

Hasil / Value Project (Metrik sukses atau dampak positifnya)

• Marketplace siap pakai dengan alur bisnis inti e-commerce multi-vendor dari A sampai Z
• Operasional seller lebih efisien karena semua fungsi utama ada dalam satu dashboard
• Admin memiliki kontrol end-to-end untuk menjaga kualitas dan tata kelola platform
• Pengalaman user meningkat melalui checkout terintegrasi, pelacakan order, dan chat real-time
• Fondasi teknis modular (client/server/socket) memudahkan scaling fitur ke depan (logistik, analitik, promo engine, dan lainnya)