Tables hide space
The problem
A flat inventory table tells you what exists, not where it sits or how full a row is.
What I did
Modelled the storage hierarchy explicitly so the same data could be projected into an interactive 3D view.
Case study
Web-Warehouse 3D
Full-stack inventory and PO management with a 3D warehouse model rendered in Three.js.
- Next.js
- Three.js
- MongoDB
- Tailwind CSS
The core problem
What needed solving
Warehouse operators needed more than a flat table to understand where inventory lived, how pallets moved, and whether storage slots were efficiently utilized — especially when seeding or reviewing large purchase orders.
The solution
What I built
By modeling the physical warehouse hierarchy in MongoDB and projecting it into a Three.js 3D scene, operators can navigate the real layout, inspect individual items, and understand spatial utilization without leaving the browser.
Next.js 15 App Router warehouse system backed by MongoDB Atlas. Manages items, vendors, suppliers, purchase orders with embedded pallets, and renders the structured warehouse layout (unit → row → column) as an interactive 3D preview using Three.js. Dashboard analytics powered by ApexCharts.
Integration
How it fits together
The physical warehouse is modelled in MongoDB Atlas as a Unit → Row → Column hierarchy, alongside items, vendors/suppliers, and purchase orders with embedded pallets. Next.js 15 App Router API routes serve that structure to the client, which renders it as a Three.js 3D scene and an ApexCharts dashboard. A dbScript seeder generates a realistic dataset so the whole flow can be demonstrated end to end.
Loading diagram…
The flow, step by step
- Seed the database using the dbScript.ts runner to generate parties, warehouse layout, 50 items, and 10 purchase orders with embedded pallets.
- Browse the warehouse hierarchy (Unit → Row → Column) and open the 3D preview to inspect item placement in the scene.
- Create purchase orders assigned to vendors or suppliers, with embedded pallet records tracking storage locations.
- Review the analytics dashboard for stock levels, PO status, and vendor/supplier activity.
Problems along the way
What got hard, and what I did about it
Demoing without real data
The problem
A warehouse UI with an empty database shows nothing useful.
What I did
Wrote a seed runner that generates parties, the layout, 50 items, and 10 purchase orders with pallets.
Takeaways
What I learned
- The data model decides what visualizations are even possible; get the hierarchy right first.
- A good seed script is part of the product: it makes features testable and demoable.
- Scoping matters: role tiers are scaffolded, and enforcing them everywhere is tracked as its own milestone.
Outcome
Where it stands today
Structured MongoDB schemas for Warehouse, Item, Party, and Purchase Order with embedded pallet support.
Interactive Three.js 3D item viewer inside the browser — no external tooling required.
ApexCharts dashboard showing inventory metrics and purchase order analytics.
Role-ready architecture scaffolded for Admin, Manager, and Employee access tiers.
Milestones
- Shipped
Warehouse schema & CRUD
Items, parties (vendor/supplier), POs with pallets, and warehouse hierarchy fully implemented.
- Shipped
3D item preview (Three.js)
3D spatial viewer for individual items embedded in the warehouse browse flow.
- Shipped
Analytics dashboard
ApexCharts panels for inventory and purchase order analytics.
- Planned
Role-based access control
Scaffolded for Admin/Manager/Employee tiers, not yet fully enforced in UI.
Next up
- Fully enforce RBAC tiers across all CRUD surfaces.
- Add heatmap overlays for slot utilization and congestion.
- Introduce path-optimized picking simulations for large warehouses.