Context and Project Overview
When I joined the team, the OMS (Order Management System) is my first ever project to contribute and the only web project we have and it was… let’s just say it had potential
It was functional, sure, but looking at it.. I could see SO much room for improvement.
So Farmbyte Order Management System (OMS) represents a significant leap forward in agricultural supply chain management technology. Where basically it’s built from the ground up with modern web technologies, this comprehensive platform streamlines the entire order lifecycle from procurement to delivery, serving as a critical backbone for Farmbyte’s operations.
The Challenge
Agricultural supply chains are inherently complex, involving multiple stakeholders, perishable goods, and time-sensitive operations. The challenge was to create a system that could handle:
- Real-time inventory management across multiple hubs and locations
- Complex pricing models for upstream suppliers with dynamic rates
- Multi-role user management with granular permissions across different business units
- Financial tracking and reporting for comprehensive business insights
- Logistics coordination from procurement to final delivery
- Quality grading workflows for agricultural products
Thus I believe they started this.
Looking at the side with my POV, there are tons of challenges of course. I looked at the existing codebase foundation, here are some needed addressing:
Next.js 14.2.4
but everything was written in plain JavaScript (not evenJSX
properly implemented)NextUI
components everywhere (nothing wrong withNextUI
, but we needed something more customizable for our design system)- Basic auth setup that did the job but wasn’t scalable for our growing user base
- Initially there is zero testing infrastructure
- No component documentation system
- Git commit’s that were… well, you know how its super vague and messy
Project Evolution & Leadership Impact
When I joined the team and took the challenge as a leadership role (I am scared but I just do it scared lol), the Farmbyte OMS was a basic Next.js
application with minimal tooling and infrastructure. Once I got comfortable and my tech lead started trusting my judgment, I knew we could do better.
Before: The Foundation (Before I Joined)
The initial codebase was built with essential technologies but lacked the sophistication needed for a production-grade system:
Basic Tech Stack:
- Next.js 14.2.4 with React 18
- NextUI for pre-built components
- Tailwind CSS 3.4.1 for styling
- Basic authentication with NextAuth
- Minimal development tooling (only basic linting)
- No testing infrastructure
- No component documentation system
- No automated code quality enforcement
JSX
wasn’t being implemented just pureJS
Limited Development Workflow:
|
|
After: The Transformation
Under my care, we implemented a comprehensive modernization strategy:
Modernized Core Technologies:
- Upgraded to Next.js 15: Okay, this one has a story. So I’m doom scrolling Twitter (idc still call birdie not X) during Raya holidays when I see a tweet about a critical security vulnerability in Next.js middleware. Realizing our production app with user auth might have a security hole. What do you do? You don’t wait until after holidays, that’s for sure, quick text to my tech lead and discussed how to tackle it
- Turbopack integration: I slided in the upgrade while fixed critical security AND got massive performance boost for 10x faster development builds haha
- Migrated from NextUI to Radix UI: This was probably the fastest architectural decision I pushed for. NextUI is great for rapid prototyping, but we needed something more flexible for a production system that would scale. The migration took months, but seeing our design system become actually consistent across the entire app? Worth it! Packages slightly lesser too
- Enhanced Tailwind CSS setup with utilities, v4 cuz why not?
Building A Proper Development Ecosystem
- Comprehensive Testing Suite: Introduced Vitest and React Testing Library because honestly, I had too and we had ample time and I think it’s good practice for me to learn write test personally too
- Storybook Implementation: This was my favorite addition tbh. Having isolated component development and living documentation? It completely changed how we approach UI development.
- Automated Code Quality: ESLint, Prettier, Husky, and lint-staged for consistent code standards.
Key Improvements Implemented
1. Testing Culture Establishment
|
|
2. Component Development Workflow
|
|
3. Automated Quality Assurance
|
|
4. Professional Git Workflow
- Pre-commit hooks preventing bad code from entering the repository
- Conventional commit messages for better project history
- Automated formatting and linting on every commit
What We Actually Built
The application is structured around business domains, each with it’s own:
- Components: Reusable UI elements specific to the domain
- Hooks: Custom hooks for state management and side effects
- Services: API client functions and business logic
- Utils: Domain-specific utility functions
Key modules include:
- Admin Management: User roles and permissions
- Finance: Financial tracking and reporting
- Logistics: Shipping and delivery coordination
- Inbound: Inventory receiving workflows
- Product Masterlist: Catalog management
- Supplier Management: Vendor relationship management
- Grading: Quality assessment workflows
- Quotation: Pricing and proposal management
Results & Impact
The Farmbyte OMS has successfully:
- Streamlined order processing workflows
- Reduced manual data entry through automated systems
- Improved inventory visibility across multiple locations
- Enhanced supplier relationship management
- Provided real-time financial insights
- Scaled to support growing business operations
Impact of the Technical Modern Transformation
The modernization resulted in:
- 10x faster development builds through Turbopack
- Zero runtime errors through comprehensive testing
- Consistent code quality across all team members
- Scalable component architecture supporting rapid feature development
- Professional deployment pipeline ensuring reliable releases
- Enhanced security through proper secrets management
This evolution demonstrates how strategic technical leadership can transform a functional application into a production-ready, enterprise-grade system that serves as a foundation for sustained growth.
The Real Takeaway
This project taught me that being “average” doesn’t mean you can’t drive significant change. You just need to:
- Think things through properly and COMMUNICATE especially if the team or yourself working remotely I cannot stress this enough haha
- Back up suggestions with data and proven results
- Find a team that trusts your process
- Be willing to learn as you go
From someone who started by just wanting cleaner git commit’s to ending up modernizing an entire production system, sometimes you don’t know where your path will lead, but if you care about building quality stuff, opportunities will find you.
Anyway, this is probably one of my biggest project achievement so far. Still have SO much to learn, but seeing a system you helped architect actually serving real business needs? That hit’s different.
Before I wrap this up, I really want to thank my tech lead who trusted me with these big decisions, trusted me this role despite my experience, my seniors (across various engineering teams) who guided me through the learning process, and of course my entire team who embraced all these changes.
Also shoutout to everyone along the way who answered my probably-annoying questions about architecture, best practices, and
“is this the right way to do this?”
these peeps made this journey way less scary and way more fun.
Building production systems is definitely a team sport, and I’m grateful to be surrounded by people who care about building quality stuff together :)