Product Catalog with Admin CMS

https://demistore.my.id

Temukan koleksi terbaik kami

Pilih Kategori

Overview

DemiStore is a product catalog website built for an SME client. It features a custom admin CMS for managing categories, products (with variants), and images. Customers can browse products and contact the seller directly via WhatsApp.

The project was built from concept to live deployment — demonstrating full-stack development and VPS deployment capabilities.

Delivered to Client — 100% Complete

Problem

No Online CatalogProducts were only shared as WhatsApp images — scattered across chats, impossible to browse, and easily lost in conversation history.
Manual UpdatesEvery product update meant sending new images to customers one by one. No central place to manage stock, pricing, or availability.
No Admin ControlThe client couldn't manage products independently. Every change required a developer — slowing down operations and increasing costs.
No Lead GenerationNo structured way to capture customer interest. No tracking of which products were viewed, shared, or requested — leaving growth to chance.

Key Features

Admin CMS

Full CRUD untuk kategori, produk (dengan varian), gambar, dan settings

WhatsApp Integration

One-click 'Pesan via WA' dengan pesan otomatis berisi nama produk & varian

Image Optimization

Sharp → WebP conversion, multiple sizes (thumbnail 300x300, medium 800x800)

Variant Selection

Multi-level variant (warna, ukuran) dengan update harga real-time

Infinite Scroll

Lazy load produk per 12 item untuk performa optimal

Responsive Design

Mobile-first, 2-4 kolom adaptif, hamburger menu

My Role

As Technical Project Lead & AI Orchestrator, I:

Designed database schema and system architecture
Built entire application (Next.js + Supabase) from scratch
Implemented admin authentication and CMS
Designed public pages with responsive UI
Deployed to VPS with PM2, Nginx, and SSL
Documented entire process (blueprint + development logs)

Tech Stack

Next.js 14React 18TypeScriptTailwind CSSSupabaseSharpVPS

Outcome

✅ 100% complete — delivered to client
✅ Full admin CMS (categories, products, variants, images)
✅ WhatsApp integration for lead generation
✅ Image optimization (Sharp → WebP, multiple sizes)
✅ Full documentation (blueprint + development log)

Key Takeaways

Complete & Delivered — From concept to production. 100% finished.

Admin CMS — Client can manage everything independently.

WhatsApp Integration — Lead generation built-in.

Image Optimization — Sharp + WebP + multiple sizes.

Full Documentation — Blueprint + development log.

Back to Portfolio