Case Study: Laboratory Portal

01. The Overview

This project originated from a commercial enquiry by a food testing laboratory requiring a secure system to manage test requests and result logging. Although the client withdrew after the requirements phase, I recognised the value in the “Lab-as-a-Service” model and decided to build the frontend as a high-performance, role-based template for future laboratory workflows.

• Role: Architect & Lead Frontend Developer.
• Tech Stack: React 19, TypeScript, Vite, Zustand, and Tailwind CSS.
• Key Achievement: Developed a sophisticated Role-Based Access Control (RBAC) system within a modern, component-driven architecture.

---

02. The Challenge

The primary challenge was designing a multi-tenant interface that could serve three distinct user types—Admins, Technicians, and Clients—without leaking sensitive cross-role data or cluttering the UI.

My Architectural Focus:

• Performance: Moving from Gatsby/Standard React to Vite significantly reduced HMR (Hot Module Replacement) times, enabling a faster development feedback loop.
• Scalability: Ensuring the project could act as a scaffold, meaning it must be easy for another developer to clone, swap mock data for a real API, and deploy.
• State Management: Implementing Zustand to handle complex global states (Auth, Lab data, and Client lists) without the “boilerplate” overhead of Redux.

---

03. Technical Implementation

Advanced RBAC (Role-Based Access Control)

Unlike simple apps, this system uses a domain-separated component architecture:

• The Guard: Upon login, the system identifies the user’s role and grants access to specific route pages (Admin dashboard vs. Technician result log).
• Separation of Concerns: Components are organised into domain folders (src/components/admin, src/components/lab, etc.), ensuring that code meant for lab technicians is isolated from the patient-facing UI.

Modern State & Testing

I prioritised developer experience (DX) and reliability:

• Zustand Stores: Lightweight stores in src/state manage the application’s lifecycle, from authentication tokens to test request statuses.
• Vitest Integration: Built-in unit testing ensures that core logic—such as result validation or date formatting—is robust before deployment.
• Mock Workflows: Includes comprehensive mock datasets in src/mocks to allow for full feature testing without the need for a live backend.

---

04. Engineering Beyond the Brief

This project served as my sandbox for React 19 and Vite, proving my ability to migrate and maintain modern codebases.

• Clean Architecture: The project structure uses path aliases and modular hooks, ensuring the codebase remains “pedantic” and easy to navigate even as more features are added.
• Dockerised Development: Included a Dockerfile.dev and docker-compose.yml to allow for immediate, environment-agnostic development.
• UX Features: Integrated modern UI utilities like sonner for toast notifications and lucide-react for consistent iconography.

---

05. Results & Lessons Learned

This scaffold is now in an advanced stage, serving as a ready to go template for any laboratory management system.

Key Outcomes:

• Commercial Maturity: Proved that a failed client bid can still result in a valuable intellectual property asset.
• Tech Stack Mastery: Successfully navigated the transition to the React 19 ecosystem, including handling new Vite deprecation warnings and adopting Vitest for unit testing.

Future Reflection: Building this as a template taught me the importance of configuration files that empower to build, integrate, or extend the code. By documenting maintenance notes and providing a clear project structure, I’ve created a system that is ready for senior supervision and enterprise-level expansion.

---