TinyCab
This project is a simple widget that extracts data from a tinybird API endpoint.
Decisions
Product
After reviewing the data from the endpoint it came clear that this endpoint returns information about cab rides. My ideal widget would have been a map to place all rides but unfortunately origin and destination are not really available. So the next important thing is get some numbers about revenue and rides. After displaying this information I decided to be able to filter in a timespan manner but also being able to filter by vendor. In terms of displaying information I've decided to display some counters on "small" devices. But extend the information for big screens adding a detail table. This table is limited to 50 rows but with more time this should be paginated.
Tech
This project uses serve as development server to make things easier. I have also decided to not add any kind of 3rd party library for timepickers as I believe it's out of the scope.
Design
The widget looks like:
How to start the project.
Requirements
This project runs with:
- Node: v14
- yarn: v1.22
How To Start
Install dependencies
yarn install
Start the server
yarn start
Open your browser on http://localhost:3000/
Testing
Having that testing this app from a unit point of view can be tricky. I have decided to go to an End-2-End aproach using cypress. At the same time I've added a GH actions workflow to ease the automatic process when doing PR's.
If you want to run the tests on your local env there are 2 scripts available:
yarn test
Opens cypress suite
yarn test:ci
Runs cypress in command line.