An interface for visualizing a season of a TV show with all its episodes.
-
Create a
.env
file with the following content:OMDB_API_KEY=<API_KEY> THEMOVIEDB_API_KEY=<API_KEY> THEMOVIEDB_API_READ_ACCESS_TOKEN=<API_TOKEN>
I will send the actual keys by email ;)
-
Run the development server:
npm run dev # or yarn dev # or pnpm dev
Open http://localhost:3000 in your browser to see the application running.
The application has two pages:
/
: The main page with a very simple form to search for a TV show./[id]/[episode]
: The page with the carousel of episodes for a given TV show and season.
We are using storybook for component development. To run it, use the following command:
npm run storybook
# or
yarn storybook
# or
pnpm storybook
Storybook should open in your browser.
We could also publish the storybook to chromatic or our own server for sharing with the team.
We are using jest and react-testing-library for testing. To run the tests, use the following command:
npm run test
# or
yarn test
# or
pnpm test
or to run the tests in watch mode:
npm run test:watch
# or
yarn test:watch
# or
pnpm test:watch
We use tailwindcss for styling.
We are using next 13 with the app router and server components (where it makes sense).
We are calling the API in the server component to avoid exposing the API key in the client, and for a more efficient rendering of the page. However if there would be a need for calling the apis in the client, we could create proxy server api routes to protect the API keys.
Even with a public API, we should protect our keys to prevent abuse.
I identified two main problems with the API:
-
It only includes plot and poster information for the episodes when requesting a single episode, which requires sending individual requests for every episode to show in the carousel.
Solution: Fetch the episodes with limited concurrency (5 by default). I chose p-limit library by its broad popularity. Other options included a simple implementation with iterators, but I decided to go with a well-tested library. We have tree shaking in Next.js, so the bundle size should not be significantly affected by this choice.
-
The API is missing some episodes, for example, episodes 4 and 6 in the Figma design.
Solution: There are two options here, either show the episodes that are available or show a placeholder for the missing episodes. I chose the latter, but in a real environment should be discussed with the team for the best approach.
-
The API does not include images in landscape mode (backdrop) for the episodes.
Solution: We are using themoviedb for backdrops. The posters provided by OMDB in portrait mode is used as a fallback.
- Add more tests, especially for the components.
- Add more documentation.
- Add a CI/CD pipeline.
- Add pre-commit hooks for eslint and prettier.
- (optional) Deploy to Vercel.