Onsite 2 | Full-Stack Overhaul: Next.js & .NET Core
A complete architectural redesign of the main logistics application, from a legacy jQuery monolith to a modern React and .NET ecosystem.
Overview
Onsite is the company's main logistics platform, used by business clients to manage the entire lifecycle of their shipments. From quoting and scheduling pickups to tracking packages, downloading invoices, and accessing historical reports, users can handle their entire logistics operation from a single interface.
The previous version, built with jQuery and legacy backend services, had evolved without a defined architecture, resulting in a fragile, hard-to-maintain, and poorly scalable codebase. The goal was to completely replace it over a 10-month migration period with a modern, robust, and user-centered application. The result: a significantly smoother experience, a faster backend data layer, and a tech foundation ready to scale.
Goals & Challenges
Major Problems
- Inconsistent UI patterns across different parts of the app, leading to confusion and poor UX.
- Severe backend performance bottlenecks when fetching, rendering, or filtering large datasets.
- Broken or unusable mobile experience, making the app frustrating on phones.
- Unstructured legacy monolith codebase with no documentation and heavy technical debt.
Goals
- Modernize the user experience by replacing the outdated interface with a clean, responsive UI.
- Improve maintainability by adopting a modern tech stack (Next.js & .NET Core) with reusable components.
- Optimize end-to-end performance by restructuring database queries and reducing API payload sizes.
- Ensure full mobile compatibility for a seamless experience across all devices.
Key Challenges
- Rebuilding complex UI components and state management under tight business constraints.
- Decoupling and migrating legacy logic into scalable .NET Core APIs without disrupting ongoing operations.
- Balancing fast delivery with long-term reusability and maintainability of the full-stack codebase.
- Engineering resilient error handling to manage inconsistent data models during the transition phase.
Solutions & My Contributions
Technical Architecture
- Architected robust backend services in .NET Core, providing clean, structured endpoints to serve the new frontend client.
- Built a modular, component-based UI architecture with React and TypeScript to improve scalability and long-term maintainability.
- Rebuilt the client using Next.js App Router, leveraging server components and nested layouts for faster load times.
- Applied Tailwind CSS and Hero UI to deliver a fully responsive, accessible interface across all devices.
- Created reusable, business-specific UI components and backend validation logic used across key modules like quotations, shipments, and invoices.
Performance Optimizations
- Engineered paginated backend API services to efficiently query database logs, drastically reducing payload sizes for the client.
- Implemented virtual scrolling on the frontend to seamlessly consume paginated APIs, eliminating UI freezes on heavy shipment and tracking views.
- Used Next.js server components to cache key views and reduce redundant backend API calls, improving perceived speed.
- Optimized user interaction by implementing a debounce on searches and filters, preventing excessive server requests and database load.
Collaboration & Process
- Co-led the full-stack rewrite as one of two developers, taking ownership of complete modules from database queries to final UI deployment.
- Partnered closely with our project manager and coordinator to iterate on data flows and interfaces using client feedback.
- Replaced undocumented legacy endpoints with modernized .NET Core APIs, establishing clear data contracts for future development.
Impact & Results
My role in the complete rebuild of Onsite 2 was key. With significant autonomy over both the API layer and the frontend client, I was able to define and execute the technical vision of the project, driving substantial improvements in data processing and UI responsiveness. Not only did I modernize and optimize the platform in just 10 months, but this full-stack approach also generated 95% positive feedback from the internal team.
Before vs. After
Before (Legacy Monolith)
- Outdated interface that “felt like a 2004 government page”.
- Unpredictable loading times due to heavy, unoptimized monolithic responses.
- Fragile 'headless' jQuery implementation on top of a distributed monolith backend.
- Clunky user flows restricted by inflexible, tightly-coupled business logic.
After (Modern Headless)
- Clean design system with a modern React-based UI layer.
- Optimized load times via paginated .NET Core APIs and Next.js Server Components.
- Fully responsive across devices with a mobile-first approach.
- Clearer navigation and structured, predictable data handling through decoupled services.
Reflection
What I Learned
- Balance backend maintainability with business-driven frontend deadlines.
- Break down large, ambiguous legacy monoliths into achievable, modern API services.
- Communicate effectively with stakeholders to clarify requirements.
What I'd Do Differently
- Introducing automated CI/CD testing pipelines early in the development lifecycle.
- Establishing a balanced testing strategy for both API endpoints and React components.
- Educating the team on how testing improves confidence, speeds up iteration, and reduces support overhead.
What I'm Proudest Of
This project tested me in a real-world environment where I had to deliver production-ready software with minimal guidance, legacy constraints, and full responsibility over multiple layers of the stack.
Despite the pressure, I shipped high-quality features, learned to own my work end-to-end, and contributed to a product that truly matters to users. What makes me most proud is the personal growth: I transitioned from dealing with impostor syndrome to feeling absolute confidence in my ability to engineer complex database queries, scale APIs, and build reactive UIs. This experience solidified my identity as a highly capable, reliable developer, and I'm ready for what’s next.