Back to projects
Jul 2025
3 min read

Workind - Modular React SPA

Unified Frontend Refactor – Modular React SPA
  • React.js
  • TypeScript
  • Shadcn
  • Vite
Workind homepage

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 introduced a modular architecture, where each feature or domain is self-contained. This makes the codebase intuitive for new developers, reduces coupling, and enables easier refactoring and scaling. The structure prioritizes clarity and maintainability.

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 more approachable and future-proof for a small team.