- Clone this repository
- Run
$ pnpm i - Run
$ pnpm run devand navigate tohttp://localhost:5173/to view the application
- Run
$ pnpm run testto run the Vitest tests based in/tests - Update
REJECT_FETCHtotrueon line3inflightsApiService.tsto trigger theErrorBoundary
- Initiated the project using Vite, for its lightweight bundle and strong performance
- Initiated testing using Vitest (because we're already using Vite)
- Did not initiate a framework like NextJS or Remix due to the small size of this project
- Initiated
prettierfor consistent formatting throughout the codebase - Developed all changes on the
developbranch, not using a feature branch due to the size of this project - Using plain css and plain classes to keep it simple, using prefixes to ensure scope safety
- Created a dummy
flightsApiServiceincluding a fake loading time, returning the providedflights.json - Slightly updated the flights data to have a few items with different originalTime from expectedTime
- With a more sophisticated API-service (using e.g. Tanstack Query to wrap the fetch) we would not need the
useEffectinSearchFlights.tsx(see why that's relevant here) - There are many ways to catch errors, in this example I've used the Error Boundary method from the React docs.