Skip to content

taneresme/solution-design-experiment

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Architectural Overview

A scalable, maintainable and well-structured system that integrates Priority Pass app with Uber to enhance the airport journey for travellers.

The design utilizes micro-services architecture through clear separations between domains such as flight, lounges, and taxi (riding). Each domain is pictured as having their own dedicated data storage for potential extensions in the future. Single page application (SPA) is envisioned as the UI interface between users and the system, besides, BFF patterns are selected as the integration abstractions between UI and the services.

I compared the API capacilities, integration easiness and feasibility of the global taxi service providers (Bolt vs Uber) and flight data APIs (FlightRadar24, FlightAPI, AviationStack). Following these analysis, I have chosen Uber as the global taxi service provider since Bolt does not provide public APIs for ride services. Besides, Aviationstack's public APIs standout due to its strong documentation and built-in integration with Postman.

C4 model for diagrams is used since it will provide a clear deductive way of presenting the design and ideas.

Context Diagram

Context diagram clearly shows the high level integrations between users (travelers), our integrator system and other third party services.

Container Diagram

Container diagram below depicts the best practices for the scalability and maintainability. Modules (Components) in each domain (flight, lounge, taxi) can scale independently without any impact on the other modules. This will allow to design, develop, and maintain each module indepedently - from technology choice to team structure.

As referred, this model can be used in conjuction with organizational strategies and the teams developing and maintaining these modules can be separeated and work indepedently.

Component Diagram

I have chosen Back Service (BFF) as it would be more reasonable to picture how UI integration works. In BFF design, potential changes (removal or extensions) of the service providers are considered. General service names are used to abstract BFF from third party service providers - allowing smoother removal and extension of number of third party providers.

Prototype

I developed a simple, interactive React application as shown below by using Claude.ai platform by using wireframes I prepared on Balsamiq (see here). This interactive prototype allows the users to enjoy the integrated experince of Airport Journey Assistant with Priority Passand Uber.

For the sake of prototyping, I have used some in memory data. Flight details are the primary table that the application looks up and maps the key values in the fields of Taxi Namesand Lounge Names.

Flight details

Flight No From To Departure Status Gate Transit Time Leave By Taxi Names Lounge Names
AA1111 STN SAW 17:30 On Time 10 1 hour 5 minutes 13:30 UberX,UberXL,Green Escape Lounges, The Camden Bar
BB2222 LTN WAW 21:15 Delayed - 33 minutes 17:45 UberX,UberXL,Comfort My Lounge, No1 Lounge, Nolito

Taxi details

Taxi Name ETA Price 
UberX in 5 min £70
UberXL in 10 min £110
Green in 7 min £80
Comfort in 15 min 130

Lounge amenities details:

Lounge Name Amenities
Escape Lounges Wifi, Showers, Snacks, Dining
The Camden Bar Wifi, Snacks, Lunch, Dining
My Lounge Wifi, TV, Snacks
No1 Lounge Wifi, TV, Alcohol, Snacks, Dining
Nolito Wifi, AC, Snacks, Pizza, Dining

Flow of the requests

When the user interacts with the system, the flow of the request to populate the screen between the components and third-party providers will be look like following.

Assumptions

The assumptions that I have made during this implementation.

  • The system requires the location information of the user. Location can be retrieved by two way, parent apps can provide the geolocation coordinates in URL or the system can request the access to the location. I assume location of the user is provided.
  • Authentication & Authorizaiton should be provided by single system which is usually shared with other systems as well. I assume all the requests have required authentication and access permissions.
  • UI has to serve the applications in modules for the purpose of the different apps. Each module should be populated in iframe within each app to be embeded so that each app can retrieve the module they need to populate on their app.
  • Monitoring is assumed to be done by DataDog agents on each host, therefore there is no additional logging capability designed.
  • There is no public API publiched by Priority Pass but I assumed there is an internally accessable API service.

Omission and Trade-offs

I omitted error handling and logging, high-availability and resiliency requirements in this design. No replication, data retention, regulatory requirements, or disaster recovery policies considered. Multiple third-party integration for the same requirements (i.e. Bolt and Uber integration) is considered as enabler but not incorporated.

I have chosen RESTful interface rather than GraphQL. I could use BFF pattern with GraphQL as well but I think it is not needed. Therefore it would move the logic of aggregation to UI which is publicly accessable. I have chosen the RESTful with BFF pattern to abstract the UI from the downstream implementations and integrations. Additionally, there is no caching mechanism considered. As there is no obvious non-functional requirements such as response times, RTO, RPO at this point, having a persistent data store would guarantee at least resiliency of data for auditing purposes.

There is no Content Delivery Network (CDN) integration considered at this points. There would surely be static contents required by UI, as there is limited static content now and for the sake of simplicity, no CDN was incorporated into the solution.

How I used AI Tools

This summary was generated by ChatGPT:

During this session, you actively explored required technology stack — including TypeScript, Node.js, React, AWS, Kubernetes, DataDog, GraphQL, PostgreSQL, MongoDB, and Kafka — to ensure your solution aligns with the company’s ecosystem.

We reviewed architectural design considerations such as integrating a Single Page Application (SPA) with an Identity and Access Management (IAM) service, best practices for container diagrams, and API layer choices between REST and GraphQL. You assessed trade-offs between these technologies, demonstrating strong architectural reasoning.

On the UI side, you quickly set up a React + TypeScript environment using Vite, integrated Tailwind CSS, and implemented functional UI components with proper state handling and styling. You made rapid iterations to adjust design elements like button colors and layout spacing, showing adaptability and familiarity with modern front-end workflows.

Your approach combined technical execution with the ability to use advanced AI assistance effectively — accelerating troubleshooting, confirming best practices, and refining implementation details without slowing delivery. This reflects strong problem-solving skills, fast learning, and a methodical approach to producing solutions that fit both the technical requirements and user experience goals.

This summary was generated by Claude.ai:

During this session, I collaborated with you to develop a functional Priority Pass + Taxi integration prototype. You effectively utilized AI assistance to rapidly iterate on a React-based mobile application that demonstrates the integrated airport journey experience.

The development process involved creating a standalone React component that matches the provided Balsamiq wireframes, implementing in-memory data storage for flight details, taxi services, and lounge information. You guided the technical requirements clearly, ensuring proper data relationships between flight numbers and associated services through array-based lookups.

Key technical deliverables include a fully functional search interface, error handling for invalid flight numbers, real-time data presentation matching the PDF design specifications, and a complete user journey from landing page through results display. The final prototype was optimized for standalone deployment with inline CSS styling, eliminating external dependencies to ensure consistent rendering across different environments.

You demonstrated proficient use of AI tools for rapid prototyping while maintaining clear technical direction and requirements specification throughout the development process.

About

A solution design experiment.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published