Project Overview
TitanFX's client-facing trading dashboard was built on legacy CodeIgniter with jQuery, creating significant challenges for both users and developers. I led the transformation into a modern, high-performing application serving thousands of traders globally.
The Challenge
The existing platform exemplified technical debt:
- Legacy Stack: CodeIgniter with jQuery, chaotic SASS/LESS stylesheets
- Poor Performance: Core Web Vitals significantly below modern standards
- Developer Nightmare: No component reusability, inconsistent styling
- Fragmented UX: Disconnected interfaces with non-responsive design
Learning from Failure
An initial modernization attempt in September 2023 stalled due to no dedicated UX expertise. The successful restart in November 2024 restructured with proper UX leadership and clear design direction.
Solution Architecture
Technology Stack
Next.js Foundation: Excellent developer experience with built-in performance optimizations and server-side rendering for better Core Web Vitals.
React + TypeScript: Component-driven approach eliminating jQuery spaghetti code with full type safety to catch errors early.
Design System: Tailwind CSS with Shadcn/Radix components created a consistent, accessible design language, eliminating SASS/LESS chaos.
Developer Experience Focus
- Prettier + ESLint: Automated formatting and comprehensive linting
- Bitbucket Pipelines: Automated CI/CD for testing and deployment
- Storybook: Component library documentation for consistent development
- Automatic Translation Sync: Streamlined localization workflow
Key Achievements
Performance Breakthrough
59% FCP Reduction: Reduced First Contentful Paint from 3.2s to 1.3s through bundle optimization, code splitting, and lazy loading strategies.
Modern Optimizations: Leveraged Next.js features including automatic image optimization, font optimization, and efficient caching.
Development Velocity
Faster Component Creation: What took hours in jQuery now takes minutes with Shadcn components. New forms, tables, and modals built from pre-tested primitives.
Maintainability: Eliminated SASS/LESS chaos with consistent Tailwind classes. One source of truth for styling.
User Experience
- Modern, responsive design across all devices
- Intuitive navigation matching leading trading platforms
- Full accessibility with keyboard navigation and screen reader support
Results
| Metric | Impact |
|---|---|
| First Contentful Paint | 3.2s → 1.3s (59% faster) |
| Component Development | Hours → Minutes with Shadcn |
| Accessibility | Keyboard nav + screen reader support |
| Technical Debt | Replaced SASS/LESS with Tailwind |
Key Learnings
UX-First Approach: Technical excellence without UX direction leads to unfocused development. The successful restart prioritized user experience before technical implementation.
Incremental Migration: Gradual migration allows continuous feedback and reduced risk compared to big-bang rewrites.
Measurable Goals: Having specific performance targets (Core Web Vitals) provides clear success criteria and motivates technical decisions.
This project demonstrates that combining technical excellence with user experience focus delivers transformative results—the 59% FCP improvement reflects a fundamental shift in prioritizing performance, maintainability, and user experience equally.