https://github.com/andreepratama27/movie-app
Movie app build with Vite + React + Typescript with TMBD API
https://github.com/andreepratama27/movie-app
Last synced: 2 months ago
JSON representation
Movie app build with Vite + React + Typescript with TMBD API
- Host: GitHub
- URL: https://github.com/andreepratama27/movie-app
- Owner: andreepratama27
- Created: 2023-09-12T05:10:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-12T05:15:03.000Z (almost 2 years ago)
- Last Synced: 2023-09-12T12:50:58.347Z (almost 2 years ago)
- Language: HTML
- Homepage: https://movie-app-ruddy-gamma.vercel.app
- Size: 102 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to run this project
- Clone this project to your machine
- Make sure node / npm already installed in your machine.
- Run `npm install` or `yarn install` or `pnpm install` (for this project, I prefer to use pnpm).
- After installation, run `pnpm dev`
- Open the project in your browser with url localhost:5173
This project also can accessed within this url.
# How to test this project
From your terminal, run:
- `npm test` or `yarn test` or `pnpm test`
For running test with coverage, run:
- `npm test:coverage` or `yarn test:coverage` or `pnpm test:coverage`
# About this Project
I create this project based on Vite + React + Typescript project. The other lib that I use for this project:
- `react-router-dom`: for doing client side router
- `react-query`: for data-fetcher utility with cache management
- `Tailwind CSS`: for styling utilities
- `Vitest`: unit testing utilities. Since this project on top of Vite, I use Vitest for testing utilities.
- `React Testing Library`: for React component testing
# Features that Enhanced User Experience
- Infinite Scroll
- I implement Infinite Scroll feature with React Intersection Observer & React Query's `useInfiniteQuery` so user can easily load the other movie with scroll.
- Debouncing the search input
- I implement this to avoid multiple API call when user typing. Instead, API call will fired once the user stop typing.
- Skeleton UI
- I implement Skeleton UI following with how the component are shaped instead of loading spinner or `Loading` text to enhance User Experience.
- Similar Movie
- I adding component to show Similar Movie based on `Movie id`
# Things to Improve
Here also I take some note on feature that still not implemented but good to be implemented:
- mocking REST API with `msw`