Information density for tablets
Airline employees need to parse dense logistical data—flight statuses, passenger counts, and gate assignments—quickly while moving around the airport.
Portfolio Case Study
An intuitive operations portal for airline employees on the go.
This project is a React and TypeScript frontend built to manage flight logistics, passenger directories, and reservations. Originally tethered to a private backend, this case study demonstrates how I revived the application, mocked its data layer, and overhauled its design for a premium user experience.
The emphasis is on building clear, readable data tables optimized for tablet devices, ensuring that gate agents and operations staff can find the information they need without fighting the interface.
Tablet UI Mockup Area
The Glassmorphism UI is optimized for readability.
Role
Frontend Architecture, UI/UX Redesign, API Mocking
Stack
React 18, TypeScript, Axios, C# / .NET Core, ASP.NET Core Web API, Entity Framework Core, MS SQL Server, Microsoft Power Platform, Tailwind-inspired Glassmorphism
Scope
Public demo uses mock data only; original .NET backend is private
Context
Why this demo exists
The original application was built alongside a private .NET API, meaning the frontend was unusable without local server access. To showcase this work on my portfolio, I needed a way to make the application entirely self-contained.
By implementing a robust mock-adapter layer and polishing the visual aesthetics, I transformed a fragmented internal tool into a fully functional, statically-hosted artifact that demonstrates both my architectural and design capabilities.
Problem
Internal tools shouldn't look or feel like afterthoughts.
Legacy aesthetics
The original application relied on basic, outdated styling that didn't inspire confidence or align with modern, premium airline branding.
Missing backend infrastructure
Because the original .NET backend is proprietary, demonstrating the application publicly required completely decoupling the UI from its server dependency.
Users
Built for airline staff on the move.
The application targets users who use tablets while navigating busy terminals. The interface has to be incredibly clear—prioritizing large typography, distinct status indicators, and clean tables.
Gate Agents
Quickly review passenger manifests and flight capacities to manage boarding.
Operations Staff
Monitor system-wide reservations and ensure logistical alignment across terminals.
Customer Support
Look up passenger details rapidly to resolve ticketing or assignment issues.
Interactive Workflow
Three core logistical views.
Flights
Monitor flight manifests, departure times, and passenger capacity at a glance.
Passengers
Access detailed passenger directories for quick identity verification and support.
Reservations
Review cross-referenced data linking passengers to flights across terminals.
Implementation
Reviving and modernizing the codebase.
Making this project portfolio-ready required more than just throwing it up on a server. It required structural cleanup, API emulation, and a complete design overhaul.
- Integrated axios-mock-adapter at the service layer to intercept HTTP requests, allowing the app to run smoothly as a static site without a real backend.
- Re-architected the layout using a 'Glassmorphism' design system—utilizing translucent panels and subtle gradients—to provide a premium, modern aesthetic.
- Optimized data tables for readability on tablet devices, focusing on typography (Inter font) and clear status badges (e.g., capacity warnings).
- Refactored legacy class components and messy domain models into clean, typed React Hooks to ensure long-term maintainability.
- Implemented the application into the Microsoft Power Platform, allowing for seamless employee access alongside other enterprise tools.
- Architected the original service layer to interface seamlessly with high-performance ASP.NET Core Web APIs for real-time logistics.
Demo Boundary
What the public version shows and what it protects.
Preserved
The complete UI workflow, including responsive data tables, routing, and state management, is fully intact and interactable.
Changed
All backend integration has been replaced with a comprehensive axios-mock-adapter layer serving realistic dummy data.
Omitted
The proprietary .NET backend, real airline data, authentication systems, and internal operational metrics remain strictly private.
Outcomes
What the project demonstrates.
For employees
A fast, responsive, and visually clear dashboard that reduces cognitive load when managing complex flight logistics on tablets.
For the business
A modernized frontend architecture that is easier to maintain, type-safe, and ready for future feature expansions.
For the portfolio
A fully functional, statically-deployable artifact demonstrating the ability to independently revive, mock, and polish a complex application.
What Taylor learned
Reviving the Airline Frontend reinforced the power of architectural decoupling. By isolating the data-fetching logic inside an Axios service layer, implementing the mock adapter took minutes instead of days. It was a great lesson in why separation of concerns matters not just for production, but for the long-term flexibility of your codebase.
Demo recreation using mock data. No internal airline data or production systems are connected.