adriantoine/tube-line-status

Tube Line Status checker (from Adrien Antoine)

Here is my take on Tuza technical challenge. I'll use this README file to explain the different ways you can access this application as well as the list of features implemented and technical tradeoffs I made while developing this solution.

How to run

To run this application you first need to install all the dependencies:

npm install

After that you can run the application in development mode:

npm run dev

and access the app on http://localhost:3000

The app itself is pretty straightforward to use, have fun!

You can find this code on GitHub: GitHub repo where this README is easier to read and if you want to try the application, it's also deployed to Vercel at this URL: https://tube-status.vercel.app/ (easier if you want to try on your phone)

Features implemented

• List of tube lines with the current status for each line as well as a description for the disruption

• When selecting a line, you can see the list of stops for each possible branch as well as a rough summary of the list of main connections you can make at those stops

• Each stop can then be expanded to display additionnal information about the station (all buses, and opening times)

• The whole interface has been developed to work on mobile while providing an enhanced experience for desktop users

• The application has been developed with accessibility in mind so it's entirely usable with a keyboard

Technologies used and tradeoffs

In this project, I aimed to utilize a modern, real-world tech stack while keeping the project simple and easy to navigate.

• NextJS: I chose to develop this project on Node using a modern stack. The React team has been recommending using it in a web server for several years, and NextJS is the most widely used and mature React-based framework available. Since version 13, they have been implementing the latest React features, such as Server Components, which I have incorporated into this project.

• swagger-typescript-api: As I'm using TypeScript, I wanted my application to be fully typed from end to end. I discovered that TFL was publishing Swagger types, so I decided to use a library called swagger-typescript-api to generate TypeScript types from those Swagger files. This approach eliminated the need to write types based solely on the JSON I observed in Postman, and it's much safer to use the types provided by TFL as they cover most use cases. The types can be generated by running npx generate-api-types, and they will be available in the lib/generated-types folder. If TFL releases a new version of their API with updated Swagger types, we can easily regenerate the types, and TypeScript will highlight the parts of our application that need to be updated.

• swagger-typescript-api, since I'm using TypeScript, I wanted my application to be fully typed end to end. I noticed that the TFL was publishing Swagger types so I've decided to use this library called swagger-typescript-api that would generate TypeScript types from those swagger files. That way I didn't have to write types only based on the JSON I see in Postman, and it's much safer to use those types provided by the TFL as they implement most use cases. You can generate the types by running npx generate-api-types and the types will be available in the lib/generated-types folder. Note that if the TFL publishes a new version of their API with new Swagger types, we can regenerate those types and TypeScript will show which part of our application needs to be updated.

• TailwindCSS, Tailwind offers simple class names that allow for quick and easy styling of a project. I find it extremely user-friendly for prototypes and small projects like this one, as it eliminates the need to name every single component. It greatly simplifies the process of creating layouts. However, this comes with the tradeoff of lengthy class names that can sometimes be difficult to read, but I believe they remain manageable in this project.

These are the primary tradeoffs and technologies I have employed in this project. I opted not to include any UI libraries such as shadcn or Radix, as I found that native HTML components and Tailwind provided everything I needed for the styling of this project.