Platform Screenshots
Overview
Tanjung Duren Pet Shop is an established Jakarta-based pet supply retailer operating since 1989 with three physical branches and marketplace presence on Tokopedia and Shopee. It uses a live owned omnichannel e-commerce platform that unifies:
- A customer-facing online shop at shop.tjdurenpetshop.com (Next.js 16, PWA-ready)
- A REST API for all commerce operations (Laravel 13)
- An admin panel and in-store POS (Filament 5)
Customers browse pet food, accessories, and services online with regular shipping, instant courier delivery, or store pickup—while staff manage catalog, multi-outlet inventory, orders, returns, and walk-in sales from one backend.
Business Problem
Running three outlets plus marketplace channels without a unified platform created operational friction:
| Problem | Impact |
|---|---|
| Disconnected online and in-store inventory | Overselling, manual stock checks, and fulfillment delays |
| No owned e-commerce channel | Dependence on marketplaces without full brand control or customer data |
| Manual POS and catalog updates | Duplicate data entry across outlets and channels |
| Limited delivery options online | Lost sales from customers expecting instant or pickup fulfillment |
| Scattered post-sale handling | Returns, subscriptions, and order tracking handled ad hoc |
Solution
We built a three-tier omnichannel system scoped for Indonesian retail operations with bilingual catalog support (ID/EN).
Online storefront (Next.js):
- Mobile-first homepage with pet-type navigation, flash sale, featured products, bundles, and blog
- Product catalog with filters by category, brand, pet type, and price; ISR product pages with JSON-LD
- Meilisearch-powered search with autocomplete suggestions
- Server-side cart, voucher application, and authenticated checkout
- Three delivery modes: regular (RajaOngkir), instant (GoSend, Grab, Lalamove), and store pickup
- Midtrans Snap and Xendit payment with webhook confirmation and retry flows
- Customer account: orders, addresses, wishlist, reviews, pet profiles, subscriptions, returns, notifications
- Store locator for three branches, help pages, WhatsApp contact, and installable PWA
Admin & POS (Filament):
- Dashboard with sales widgets, recent orders, and low-stock alerts
- Full catalog CRUD with variant matrix, images, brands, categories, and pet types
- Multi-outlet inventory with stock movements, batch/expiry tracking, and reconciliation
- Order management with status lifecycle and goods return workflow
- POS terminal with barcode scanning, cash drawer sessions, held carts, and receipt printing
- Promotions, vouchers, bundles, blog, marketplace sync logs, and activity audit
Backend & integrations:
- Laravel REST API with Sanctum Bearer tokens and role-based access (`customer`, `staff`, `admin`)
- PostgreSQL with JSONB translatable fields, Redis queues via Horizon, and Laravel Reverb for real-time order updates
- Scheduled jobs for cart cleanup, subscription orders, stock audits, and marketplace catalog pull
- Webhook handlers for Midtrans, Xendit, and instant courier providers
Implemented Commerce Capabilities
- Unified omnichannel operations — Online shop, three outlets, and POS share one catalog and inventory model.
- Flexible fulfillment — Regular shipping, instant delivery with auto-booked couriers, and store pickup from selected branches.
- Reliable checkout — Dual payment gateways, shipping quote TTL, and transactional email at every order stage.
- Operational visibility — Admin dashboard, low-stock alerts, stock movement audit trail, and activity logs.
- Customer retention features — Pet profiles with recommendations, recurring subscriptions, wishlists, and 14-day returns workflow.
- SEO-ready discovery — ISR product pages, dynamic sitemap, structured data, and filtered Meilisearch search.
Technical Implementation Logic
| Layer | Choice | Rationale |
|---|---|---|
| Storefront | Next.js 16 App Router with SSR/ISR | SEO-critical product pages need server rendering; cart and checkout stay client-side for interactivity |
| API | Laravel 13 with Actions/Services pattern | Mature commerce workflows, webhook handling, and Filament admin on one codebase |
| Database | PostgreSQL 16 with JSONB | Bilingual catalog fields and complex relational inventory without schema sprawl |
| Search | Meilisearch via Laravel Scout | Full-text search with filters for a large pet-product catalog |
| Admin/POS | Filament 5 | Rapid CRUD, role gates, and embedded POS terminal without building a separate admin UI |
| Real-time | Laravel Reverb WebSocket | Order status updates during checkout and fulfillment without polling |
| Payments | Midtrans + Xendit | Coverage for GoPay, QRIS, virtual accounts, and e-wallets common in Indonesia |
| Shipping | RajaOngkir + instant couriers | Regular nationwide rates plus same-day delivery within configured radius |
| Frontend state | TanStack Query + Zustand | Server cache for catalog; client stores for auth, cart, and UI without over-fetching |
| PWA | next-pwa plugin | Mobile-first shoppers can install the shop without native app development cost |
Frequently Asked Questions
Which channels are connected?
The live shop connects a branded storefront with documented inventory, POS, payments, fulfillment, customer, and administration workflows.
Are sales improvements measured?
No approved before/after sales data was available for this showcase.
Technology Used
Next.js 16 storefront (React 19, TypeScript, Tailwind CSS 4, shadcn/ui, TanStack Query, Zustand, Laravel Echo), Laravel 13 API (Sanctum, Horizon, Reverb, Scout/Meilisearch), Filament 5 admin and POS, PostgreSQL 16, Redis, Midtrans Snap, Xendit, RajaOngkir, GoSend, Grab, Lalamove, and scheduled marketplace catalog sync tooling.