At a Glance
| Metric | Detail |
|---|---|
| Type | Internal ERP (web application) |
| Industry | B2B Garment Manufacturing |
| Codebase | ~113,000 lines of TypeScript |
| Database | 36 tables, 50+ SQL migrations |
| Commits | 1,000+ over 5 months of active development |
| Pages | 65+ frontend views |
| API Modules | 16 routers, 20 controllers, 27+ services, 18 repositories |
| Users | Multi-department (Sales, SCM, Finance, Management) with 14 RBAC roles |
| Integrations | Jurnal.id (accounting), WhatsApp (notifications), Cloudflare R2 (file storage) |
Business Problem
Boogie Apparel is a B2B garment manufacturer handling custom apparel orders for corporate clients. Before this system, the company relied on spreadsheets and manual coordination across departments, leading to:
- Lost quotations: no centralized tracking of customer requests and purchase orders
- Production delays: manual handoffs between sales, sample development, and mass production teams
- No visibility: management lacked real-time insight into pipeline status, deadlines, and team performance
- Communication gaps: customer approval cycles for samples were slow and error-prone
The goal was to build a unified platform that connects every stage of the garment manufacturing lifecycle under one roof.
Business Impact
| Before | After |
|---|---|
| Quotations tracked in scattered spreadsheets with no audit trail | Centralized sales pipeline with full revision history and approval tracking |
| Production status gathered through manual meetings and phone calls | Real-time monitoring dashboard accessible to all departments |
| No accountability for approval/rejection decisions | Complete audit trail with every action logged (who, when, and why) |
| Sample tracking done verbally across departments | Digital sample gallery with lending/borrowing system and stage tracking |
| Accounting data manually re-entered into Jurnal.id | Automated sync between ERP and accounting system, eliminating double-entry |
| Stakeholders chased updates via phone/chat | Automated WhatsApp notifications for critical workflow events |
The system is used daily by multiple departments (Sales, Supply Chain Management, Finance, and Management), replacing what previously required cross-department meetings, manual spreadsheets, and ad-hoc phone coordination.
Solution
A full-stack ERP system with role-based access for every department in the company. The system covers:
Core Modules
1. Project Management Hub Central entity linking all operations. Each project tracks its lifecycle from initial customer contact through quotation, purchase order, sample development, mass production, QC, shipping, and payment, with a visual progress stepper and activity feed.
2. Sales Pipeline
- Internal quotations (SPH Internal, or Surat Penawaran Harga, i.e., price quotation letters from the Managing Director) and customer-facing quotations with revision history
- Purchase order management with payment milestone tracking (down payment, settlement)
- Buyer Request workflow for SKP (Surat Konfirmasi Produksi, production confirmation letters) and SPH with approval/rejection flows and audit history
3. Sample Development
- Sample dealing workflow with internal and external production tracking via mitra (manufacturing partners/subcontractors)
- Sample room management with multi-stage workflow tracking
- Sample gallery with lending/borrowing system for physical samples
4. Production Management
- Mass production sessions with PPM (Pre-Production Meeting) scheduling, mitra assignments, and deadline tracking
- Production monitoring dashboard with real-time status
- Multi-stage QC (Inline, Embellishment, Final) with photo evidence uploads
- Production workflow engine with configurable steps and substage comments
5. Analytics & Reporting
- Sales performance dashboards with AE (Account Executive) targets and achievement tracking
- Production metrics and monitoring views
- Customer Review / NPS (Net Promoter Score) module
- Excel export functionality across modules
6. Integrations
- Jurnal.id: accounting SaaS integration for syncing customers, products, and sales orders
- WhatsApp (WAHA): automated notifications for production confirmation and quotation events via WhatsApp HTTP API
- Cloudflare R2: file/image storage for QC photos, production attachments, and documents
Development Timeline
Development followed a weekly sprint cadence over 5 months, with a planning and review meeting each week. During planning, business stakeholders prioritized the most pressing problems and workflows to tackle next. During review, new ERP features were demoed live and feedback was incorporated immediately into the next cycle.
This iterative approach meant the system was shaped continuously by real user needs rather than a fixed upfront spec. Every week, the team aligned on what mattered most, built it, and validated it together.
| Phase | Period | Focus |
|---|---|---|
| Discovery & Foundation | Month 1 | Domain modeling with business stakeholders, database schema design, authentication system, and core project entity |
| Core Modules | Month 2-3 | Sales pipeline (quotations & purchase orders), sample development workflows, and RBAC implementation across 6 departments |
| Production & Integrations | Month 3-4 | Production management with configurable workflow engine, QC modules, Jurnal.id accounting sync, and WhatsApp notifications |
| Analytics & Polish | Month 4-5 | Dashboards, reporting, Excel exports, NPS module, and progressive migration of legacy monolithic routes to clean 4-layer architecture |
Technical Architecture
Stack
| Layer | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite 5 |
| Routing | Wouter (lightweight client-side routing) |
| State | TanStack Query v5 (server state), React Hook Form + Zod (forms/validation) |
| UI | Radix UI primitives (20+ components), Tailwind CSS, Framer Motion, Recharts |
| Backend | Express.js 4, TypeScript |
| Database | PostgreSQL, Drizzle ORM |
| Auth | Passport.js (local strategy), bcrypt, DB-backed sessions |
| Storage | Cloudflare R2 (via AWS S3 SDK) |
| Testing | Vitest, fast-check (property-based testing) |
The stack was chosen to maximize development speed for a solo developer while keeping the system maintainable long-term. TypeScript end-to-end catches errors at compile time across both frontend and backend, reducing bugs in a complex domain. React + Vite provides a fast dev loop for building 65+ views. TanStack Query eliminates manual server state management, which is critical for an ERP where stale data causes real business problems. Drizzle ORM gives type-safe database access with lightweight migrations, avoiding the overhead of heavier ORMs. Radix UI provides accessible, unstyled primitives that could be composed into custom UI quickly without fighting a component library’s opinions. Wouter was picked over React Router for its minimal footprint since the app needed simple routing, not a framework. Cloudflare R2 offered S3-compatible storage without egress fees, important for an app handling frequent QC photo uploads.
Backend Architecture
The server follows a 4-layer modular architecture for clean separation of concerns:
Router → Controller → Service → Repository
│ │ │ │
│ │ │ └── Data access (Drizzle ORM queries)
│ │ └── Business logic + validation (Zod schemas)
│ └── Request/response handling, HTTP concerns
└── Route definitions, middleware bindingEach business domain (production, buyer requests, analytics, etc.) has its own dedicated set of files across all 4 layers, making the codebase modular and maintainable.
Database Design
36 tables organized across 9 domains (Auth, CRM, Sales, Requests, Production, Samples, Gallery, Customer Experience, and System), each with dedicated tables, history tracking, and relational integrity managed through 50+ versioned migrations.
Deployment & Infrastructure
| Component | Technology |
|---|---|
| Hosting | PaaS deployment |
| Database | PostgreSQL |
| File Storage | Cloudflare R2, S3-compatible object storage for QC photos, attachments, and documents |
| Schema Management | Drizzle Kit migrations, 50+ versioned migrations tracking the full schema evolution |
The serverless stack eliminates infrastructure management overhead, letting the team focus on product development while maintaining production reliability for daily multi-department use.
Engineering Highlights
1. Role-Based Access Control (RBAC)
Implemented a granular permission system with 14 roles across 6 departments. Each role has specific access to modules and actions. For example, only Finance can approve purchase orders, only SCM can manage production schedules, and Directors get strategic oversight across all modules.
2. Workflow Engine
Built a configurable workflow system used across production and sample modules. Supports multi-stage processes with:
- Configurable workflow steps per production/sample type
- Substage comments and file attachments
- Status transitions with validation rules
- Timeline tracking with deadline management
3. Audit Trail & History Tracking
Critical business actions (production confirmation approvals, quotation rejections, deadline changes) are recorded with full history: who did what, when, and why. This provides accountability and traceability required in manufacturing operations.
4. Real-Time Production Monitoring
A dedicated monitoring dashboard gives management visibility into all active production sessions, their stages, deadlines, and blockers. This replaced the previous reliance on manual status update meetings.
5. Third-Party Integrations
- Jurnal.id sync: Built a bidirectional sync layer with an Indonesian accounting SaaS, including a manual sync interface and data backfill tooling (with dedicated documentation for the migration process)
- WhatsApp notifications: Integrated WAHA (WhatsApp HTTP API) for sending automated notifications to relevant stakeholders, with templated messages
6. Progressive Architecture Migration
Inherited and documented significant technical debt (a 5,900-line monolithic routes file). Designed and partially executed a migration to the clean 4-layer architecture, demonstrating the ability to improve systems incrementally while delivering new features.
Development Approach
- Rapid iteration: 1,000+ commits over ~5 months, reflecting tight feedback loops with business stakeholders
- Schema evolution: 50+ SQL migrations managing a continuously evolving data model as business requirements were refined
- Documentation-driven: Comprehensive engineering docs, feature specs, and guides maintained alongside code
- AI-augmented velocity: Used AI coding tools to accelerate boilerplate generation, data layer scaffolding, and test writing, while personally owning all architecture decisions, domain modeling, and system design
- Conventional commits: Consistent use of
feat:,fix:,refactor:prefixes for clear change history
Key Challenges Solved
| Challenge | Solution |
|---|---|
| Complex multi-department workflows with different access needs | Granular RBAC with 14 roles and per-module permission checks |
| Garment production has many stages with different actors | Configurable workflow engine with substage tracking |
| Need for accountability in approval/rejection decisions | Full audit trail with history tables and rejection reason tracking |
| Business users need data exports for external reporting | Excel export (ExcelJS) with filtering across multiple modules |
| Physical sample tracking across departments | Sample gallery with lending/borrowing system and comment threads |
| Accounting data needs to stay in sync with production | Jurnal.id integration with sync dashboard and backfill tooling |
| Stakeholders need instant notifications | WhatsApp integration via WAHA for critical workflow events |
What This Project Demonstrates
- Solo full-stack delivery at scale: single-handedly designed, built, and shipped a 113K-line ERP with 65+ views and 36 database tables in under 6 months
- Complex domain modeling: translated Indonesian garment manufacturing workflows (quotation cycles, sample approval chains, multi-stage QC) into a structured, maintainable data model
- Production-grade system design: built a configurable workflow engine reused across production and sample modules, a 14-role RBAC system spanning 6 departments, and bidirectional third-party integrations
- Legacy system modernization: inherited a 5,900-line monolithic routes file and incrementally migrated it to a clean 4-layer architecture without disrupting active development
- Direct stakeholder collaboration: worked with department heads across Sales, SCM, Finance, and Management to gather requirements, iterate on workflows, and ship features used in daily operations
Screenshots
Preview
Preview
Preview
Preview
Links
| Resource | Detail |
|---|---|
| Source Code | Private repository, available for code review on request |
| Live System | Internal production system, live demo walkthrough available on request |