This is a simple movie app that allows users to search for movies and view details about them. It uses the TMDB API to fetch movie data.
- ESLint
- Prettier
- Husky
- lint-staged
- Commitlint
- Conventional Commits
- Commitizen
- cz-conventional-changelog
- Clone the repo
git clone
- Install packages
yarn
- Install Husky
yarn husky install
- Setup Husky
chmod ug+x .husky/* - Start the app
yarn dev
Use yarn commit or yarn cz to use commitizen locally
or you can install it globally and
Use git cz or just cz to commit using commitizen
Commitizen (commitizen-tools.github.io)
Use yarn test to run tests
Use yarn coverage to run tests coverage
- I started by creating a simple React app using Vite and TypeScript.
- I then added ESLint, Prettier, Husky, lint-staged, Commitlint, Conventional Commits, and Commitizen for code quality.
- I then added Tailwind CSS for styling and React Router for routing.
- I then added Axios and React Query for fetching data from the TMDB API.
- I then added Zustand for state management.
- I then added Vitest and React Testing Library for testing.
- I started by creating the routes.
- I created the home page, search page, movie details page, and other page.
- I used React Router v6 createBrowserRouter to create the routes.
- I started with mobile first approach.
- In the middle of development I refactored the UI to make it more responsive to desktop and tablet.
- Design ideas were taken from dribbble and spontaneous ideas.
- I then created the services.
- I created a movie service to group all the movie related endpoints into one service file to make it easier to use and distribute.
- I then created the store.
- I created a store using Zustand to store the search data and the search query params.
- I persisted the store using local storage so that the search data is persisted and not lost when the page is refreshed.
- I started by creating the home page.
- I created a list of Card components to display the movies.
- I used React Query to fetch the movies from the TMDB API.
- I used React Router to navigate to the movie details page when a movie is clicked.
- I then created the search page.
- I created a search bar and a list of Card components to display the search results.
- I used React Query to fetch the search results from the TMDB API.
- The searched movies are stored in the query params and zustand store so that the search results are persisted and not lost when the page is refreshed. It also works the same with the pagination.
- I used React Router to navigate to the movie details page when a movie is clicked.
- I then created the movie details page.
- I used React Query to fetch the movie details from the TMDB API.
- That's all folks gif :)
- I then added tests for the components and pages in the middle of development. But I started to change the component and so I had to change the tests.
- I used Vitest and React Testing Library for testing. Vitest is testing runner similar to Jest but enchanced for Vite.
- I used test coverage to make sure that all the code is tested.
- I would like to add more tests.
- I would like to tweek the UI a bit more.
- I would like to implement skeleton loading.