WorkAxle
Code samples and subjects on this page are from my work at Workind. They are part of a wider front-end refactoring project that I own and have executed since the beginning of the year. The goal is to modernize the front-end stack and unify the codebase, which is currently segmented into three distinct applications.
Code Samples
I've included two code samples that illustrate my skills in React and TypeScript. They're nothing particularly impressive, but they are good examples of the code I create.
This is a custom hook for getting refund requests. It uses Tanstack Query for state management. Notice the use of dates as the query cache key: ["claims-admin","2025-05-01","2025-05-31"]. This allows the user to request new date ranges without having to invalidate the cache, keeping back-end calls to a minimum. Another aspect is the use of search params from within the hook itself, allowing it to be used in multiple components without having to pass down props or context.
The following snippet is a Tanstack Router route component designed to enforce search params in a particular section of the app.
In the case of missing params, I chose to simply redirect users to the homepage. That's right—if some params are missing, there is no way to know what the user's intent is at that moment.
A Recent Front-end Architecture Decision
As the owner of this front-end refactoring project, I had to make some important decisions regarding the architecture of the codebase. The main goal was to unify the three distinct applications into a single, cohesive codebase that would be easy to maintain and scale for a small team.
After evaluating different options, I decided to use Vite as the build tool and React with TypeScript as the main framework. Then I had to decide how to structure the codebase. I opted for a modular approach, where each module is self-contained and low-level for easy refactoring if needed.
Until now, all choices have been quite easy to make. Where I had to make some more complex decisions was regarding the routing and state management. I chose to use Tanstack Router for routing and Tanstack Query for server state management. While testing Tanstack Router, I found it easy to use typed routes and URL params to manage state. Using the URL as state management provides some advantages.
- It allows for easy sharing of links with specific states.
- It makes it easier to understand the current state of the application just by looking at the URL.
- It provides a natural way to handle browser history and navigation.
- It allows for easy bookmarking of specific states.
- It minimizes prop drilling.
- It allows observability of states with analytics tools.
I was not sure if I would face a wall in terms of global state management, requiring me to later introduce a context library, but so far I haven't needed it.
Here is a simplified view of the current codebase structure. It is still evolving, but it gives you an idea of how I organized the code. My main focus was at making a simple and intuitive structure, allowing any level of developer to understand the codebase.
├──src/ │ ├── /components/ │ │ ├── /my-component/ │ │ │ ├── index.tsx │ │ │ ├── my-component.tsx │ │ │ └── my-component.type.ts │ │ └── ... │ ├── /hooks/ │ │ ├── use-claims.ts # first example from above │ │ └── ... │ ├── /contexts/ │ ├── /routes/ │ │ ├── /(_authenticated)/ │ │ │ ├── /shop/ │ │ │ │ ├── /$category/ │ │ │ │ │ ├── /$product/ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── route.tsx # second example from above │ │ │ └── ... │ │ ├── login.tsx │ │ ├── register.tsx │ │ └── ... │ ├── /types/ │ ├── index.css │ ├── main.tsx │ └── ... ├── package.json ├── vite.config.ts ├── tsconfig.json ├── index.html └── ...