A movie and TV show catalog web-app
Demo (Preview - Develop branch) |
Demo (Production - Main branch)
All links in the README redirect the current tab, it does not create a new tab.
This is a web app built for my portfolio. It is a web app that allows you to explore and search through catalogs of movies and TV shows. It is powered by a third-party API: TMDB, which makes all this possible.
The design principle that this project followed was The Atomic Design Principle. Components were broken down into atoms, molecules, organisms, and pages to make components cleaner and re-usable.
As for API calls, I have decided that the best route is to make pages do the API calls and pass the data down through props or via context. This makes testing atoms, molecules and organisms easier as I do not need to mock API calls. Faking data for tests also becomes easier, this way I could control exactly how I want the data to look like and therefore see how the components would react.
To run the web app locally you must create an .env.local file at the root of the project. It must contain the following variables:
MOVIE_DB_WEB_URL = https://api.themoviedb.org/3
MOVIE_DB_API_KEY = {You need your own API key}
MOVIE_DB_API_KEY has not been provided. You can request an API key for free via TMDB's online form. You must create an account to request an API key from TMDB.
Make sure you run yarn to install the necessary dependencies for the project.
To run the local development server use yarn dev. To run Storybook use yarn storybook. To run all the Jest React Testing Library tests run yarn jest.
Alternatively, you can click on one of the demos above without needing to setup anything. The webapp is deployed on Vercel.
Framework: NextJS (React Framework)
Language: Typescript, Javascript, HTML, CSS
Notable Libraries: Storybook, Framer Motion, Styled-Components, Jest, React Testing Library, Axios
The only testing that was done for this project was unit and intergration testing via React Testing Library. Components that were too trivial, or not too dissimilar from a previously tested component or a component which mainly used third-party libraries where not tested.
Very soon, I will be adding Cypress testing.
Distributed under the MIT License. See LICENSE for more information.