Case Study
Wiradoor Sumbar
A full-stack company profile and e-catalog website for a solid wood door distributor in West Sumatra, combining public marketing, guest checkout, an internal admin dashboard, and order management in a single system.
Wiradoor Sumbar is the company profile and digital showroom for MR Konstruksi, the official Wiradoor distributor in West Sumatra. The project exists to help a traditional manufacturing and distribution business build a more modern, professional online presence that is ready to receive real inquiries and orders from prospective customers.
It goes beyond a marketing site. The application combines a public e-catalog, guest checkout, and an internal admin dashboard in a single system. The result is a more efficient business flow: customers can browse the catalog, send an inquiry, or place an order without creating an account, while the internal team manages products, orders, articles, and reports from one place.
Key Features
- Digital Showroom and E-Catalog: Browse the product collection with filters, search, pagination, full specifications, and an image gallery.
- Guest Checkout with WhatsApp Confirmation: Customers can place an order without registering, then get redirected to WhatsApp to confirm payment manually.
- Full Admin Dashboard: Internal panel for managing products, categories, articles, inquiries, portfolio, users, and order data.
- Order Management Pipeline: Orders move through a clear status flow from Pending to Completed.
- CMS and SEO Support: Articles are managed through a rich text editor to support SEO strategy and customer education.
- Reporting and Notifications: Export reports to PDF and Excel, plus email notifications for operational needs.
Technical Challenge
The hardest part of this project was combining the needs of a marketing website with the needs of internal operations in a single application that still feels comfortable for both admins and public visitors. The system had to look premium on the public side, while remaining stable for business workflows like product management, media uploads, order tracking, and inquiry handling.
The fix was a modular full-stack architecture built on Next.js App Router. Public pages and the admin area are cleanly separated through route grouping, while business data is handled by PostgreSQL and Drizzle ORM to keep the schema type-safe and easy to extend. For UX, cart state is managed globally with Zustand, and form validation runs through Zod and React Hook Form for safer, more consistent input flows.
Tech Stack
- Framework: Next.js 16 (App Router + Turbopack)
- Language: TypeScript (strict mode)
- Database: PostgreSQL
- ORM: Drizzle ORM
- Authentication: NextAuth.js
- Styling: Tailwind CSS v4 + shadcn/ui
- State and Data: Zustand + TanStack Query
- Media Upload: Cloudinary
- Email and Reporting: Nodemailer, React Email, jsPDF, xlsx