July 2025 Workind Web App
As the lead developer on this front-end refactoring project, I was responsible for consolidating three disparate applications into a unified, scalable, and maintainable React single-page application (SPA). The primary objective was to deliver a cohesive user experience while setting a solid architectural foundation for a small development team.
🛠Tech Stack
React 19 + TypeScript – for a modern, type-safe, and performant front-end experience
TanStack Router – for fully typed client-side routing and stateful URLs
TanStack Query – to manage and cache server-side state efficiently
Shadcn UI – for accessible and customizable component primitives
Tailwind CSS – to ensure rapid and consistent styling
TanStack Table – for rendering powerful, extensible data tables
Vite – as a fast and modern build tool
🧩 Architecture & Design Decisions
I implemented a component composition strategy, where complex features are built by combining smaller, focused components. This approach reduces complexity by breaking down intricate UI patterns into manageable pieces, while favoring maintainability through reusable and testable component building blocks.
Routing and state management were more nuanced challenges. After careful evaluation, I chose TanStack Router to manage both navigation and application state through the URL. This decision came with several advantages:
- Enables easy sharing and bookmarking of specific app states
- Improves debuggability and observability (e.g., analytics tracking)
- Reduces the need for prop drilling
- Aligns naturally with browser history and navigation expectations
For server-side state, TanStack Query has proven extremely effective, providing robust caching, background updates, and request deduplication out of the box.
Despite initial concerns about needing a global state context (like Zustand or Redux), the combination of TanStack Router and Query has so far covered all requirements without introducing additional complexity.
✅ Outcome
The result is a single, performant SPA that consolidates previously siloed experiences. The project has improved both user experience and developer experience, and the codebase is now easier to maintain.