Inventory Management System
A Full-Stack React Application I Built From Scratch
A custom-built logistics solution demonstrating the economic and technical case for modern web development over enterprise low-code platforms. This isn't a hypothetical case study, it's a real system I designed, developed, and deployed.
When does custom development beat enterprise low-code?
In this inventory-management case, custom development was the better fit for more than 100 users because it removed per-user licensing and vendor lock-in while supporting offline workflows, real-time inventory, and database-level access control. The modeled three-year total cost was approximately R770,000 for the custom React and Supabase system versus approximately R4 million for the enterprise low-code option. Low-code can still be the better choice for smaller, short-lived, Microsoft-centered solutions.
- Scale
- 100+ users across warehouse operations
- Modeled 3-year TCO
- ~R770K custom vs ~R4M low-code
- Delivery
- 16 weeks, concept to production
- Decision boundary
- Custom for durable scale; low-code for smaller scope
The Project
When evaluating inventory management solutions for logistics operations, I analyzed the true cost of Power Platform licensing versus custom development. Rather than just theorize, I built a complete production-ready system to prove the concept.
This application demonstrates what a solo developer can deliver with modern tools, at a fraction of enterprise platform costs.
About the Developer
I'm Isaacson Shoko, a full-stack developer who built this entire application from concept to production. This demonstrates my ability to deliver complete business solutions independently.
What I Did:
- Gathered requirements directly from warehouse managers and field technicians
- Designed the database schema and API architecture
- Built the entire frontend in React with TypeScript
- Implemented secure authentication with role-based access control
- Created custom data visualization components
- Deployed and maintain the production system
Live Application Demo
Experience the system I built. Login as a guest to explore the full functionality.
Full-featured inventory management with unlimited scalability • Guest login available for demo
Features I Built
Drag-and-Drop Kanban
@dnd-kit integration, state management
Real-time Stock Levels
Supabase subscriptions, optimistic UI
Role-Based Permissions
Auth system design, security thinking
Interactive Dashboards
Data viz, Recharts customization
Offline-First PWA
Service workers, IndexedDB caching
PDF Export
Client-side document generation
Heat Map Visualization
Custom component, color algorithms
Approval Workflows
State machines, database triggers
Technical Deep Dive
Architecture Decisions I Made
Why Supabase over Firebase?
PostgreSQL's row-level security policies let me implement complex permission rules at the database level, not just the application layer. This means even if someone bypasses the UI, the data stays protected.
Why React + TypeScript over Next.js?
For this SPA with Supabase handling the backend, client-side React provided faster development velocity without the complexity of SSR. TypeScript caught bugs before they reached production.
Why Recharts with Custom Wrappers?
I built reusable chart components with built-in empty-state handling, export functionality, and consistent theming, reducing boilerplate across 15+ dashboard visualizations.
Code Highlights
export type UserRole = 'admin' | 'back_office' | 'user' | 'guest'; const hasRole = (roles: UserRole[]) => { if (!profile) return false; // Guests get read-only access for demos if (profile.role === 'guest' && roles.length > 0) return true; return roles.includes(profile.role);};What I Built
A full-featured inventory management system supporting:
The Economics Argument
I built this to demonstrate a real cost comparison between enterprise low-code platforms and custom development. Watch the gap open up.
- 01
Total cost of ownership
Over three years for 100 users, enterprise low code runs to roughly R4M. The custom build comes in at roughly R770K.
R4M against R770K
- 02
Per user licensing
Low code charges R200 to R400 per user every month. The custom build carries no per seat licensing at all.
R200 to R400 per user, against R0
- 03
Lock in and limits
Low code customization stays platform limited and the vendor lock in is complete. The custom build is unlimited with no lock in.
Platform limited, against unlimited
- 04
The payoff
Three extra weeks of development, 16 against 13 to MVP, saves R3.2M over three years. You own every line of code, understand every design decision, and can extend it without licensing constraints.
R3.2M saved over three years
"Three extra weeks of development saves R3.2M over three years."
| Metric | Enterprise Low-Code | My Custom Build |
|---|---|---|
| 3-Year TCO (100 users) | ~R4M | ~R770K |
| Per-user licensing | R200-400/month | R0 |
| Customization | Platform-limited | Unlimited |
| Vendor lock-in | Complete | None |
| Time to MVP | 13 weeks | 16 weeks |
The math: 3 extra weeks of development saves R3.2M over 3 years. I own every line of code, understand every design decision, and can extend it infinitely without licensing constraints.
Technical Stack
| Layer | Choice | Why |
|---|---|---|
| Frontend | React 18 + TypeScript | Type safety, component reusability |
| Styling | Tailwind CSS + Shadcn/ui | Rapid UI development, dark mode |
| Database | PostgreSQL (Supabase) | Row-level security, real-time subscriptions |
| Auth | Supabase Auth | JWT tokens, role-based permissions |
| Hosting | Netlify | CI/CD, edge functions, free tier |
| Charts | Recharts (custom wrappers) | Reusable, export-ready components |
Skills Demonstrated
Frontend Development
- • React hooks, context, custom hooks
- • TypeScript for type-safe development
- • Responsive design with Tailwind CSS
- • Drag-and-drop interfaces (@dnd-kit)
- • Data visualization (Recharts)
Backend & Database
- • PostgreSQL schema design
- • Row-level security policies
- • Database triggers and functions
- • RESTful API consumption
- • Real-time subscriptions
Architecture & DevOps
- • Authentication system design
- • Role-based access control
- • CI/CD with Netlify
- • Performance optimization
- • Caching strategies
When Each Approach Wins
- Multi-year strategic application (2+ years)
- 100+ users, large datasets, high transaction volumes
- Mobile-first with robust offline capability
- Vendor flexibility and cost predictability matter