Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yusrmuttaqien/findmovie-site
A search and view app feeding from TheMovieDB API
https://github.com/yusrmuttaqien/findmovie-site
reactjs responsive-web-design styled-components tanstack-react-query themoviedb-api vitejs vitest
Last synced: 11 days ago
JSON representation
A search and view app feeding from TheMovieDB API
- Host: GitHub
- URL: https://github.com/yusrmuttaqien/findmovie-site
- Owner: yusrmuttaqien
- License: gpl-3.0
- Created: 2023-07-11T18:20:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-28T06:34:07.000Z (11 months ago)
- Last Synced: 2024-11-27T12:34:54.813Z (2 months ago)
- Topics: reactjs, responsive-web-design, styled-components, tanstack-react-query, themoviedb-api, vitejs, vitest
- Language: TypeScript
- Homepage: https://findmovie-yusr.vercel.app
- Size: 6.79 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FindMovie
Search and view app utilizing TheMovieDB API
### Framework, library, language or API is used in this app
- [Vite.js - Framework / Bootstrap](https://vitejs.dev/)
- [React.js - Renderer library](https://reactjs.org/)
- [TheMovieDB - API](https://developer.themoviedb.org/)
- [React Query - State & data management](https://tanstack.com/query/)
- [Styled components - Styling library](https://styled-components.com/)
## Features
- Featured & Discovery list of movies & tv series.
- Search for either movie, tv series, or people.
- Show more detail for movie and tv series.
## Access the live demo following this link
## Starting points
- Spin up development server start here
- Initiate test cases here
- Notes regarding testing library (Jest) here
## Spin up development server
In this section, we're going to spin our development server locally. Following this step
- The first thing we need to do is, clone the repository
```sh
git clone https://github.com/yusrmuttaqien/virtualspirit-findmovie-app.git
```
- Go into our newly created directory by git
```sh
cd virtualspirit-findmovie-app
```
- Install all required packages listed on `packages.json`
```sh
npm i
```
- After all of those texts are done spitting, as long there is no red-colored text, we're good to go, spin the development server
```sh
npm run dev
```
- Access the app in the browser at `http://localhost:5173/`
## Initiate test cases
In this section, we're going to execute avaliable test cases. Following this step
- The first thing we need to do is, to have clone of the repository locally, and open the directory inside terminal
```sh
cd virtualspirit-findmovie-app
```
- Install all required packages listed on `packages.json`
```sh
npm i
```
- After all of those texts are done spitting, as long there is no red-colored text, we're good to go, initiate all test cases
```sh
npm run test
```
- Let it run for sometimes. At the end there will be a report regarding how many test cases is passed.
- For coverage, following commands will do the tricks.
```sh
npm run test:cover
```
- After the commands is complete, checkout `coverage/index.html` to view the report visually.
## Notes regarding testing libarary (Jest)
Due to numerous incompatibilities between [Jest](https://jestjs.io/) and the [Vite.js](https://vitejs.dev/) framework, I have switched to using [Vitest](https://vitest.dev/) as my testing library. Vitest offers a one-to-one function mapping with Jest, ensuring a smooth transition between the two libraries. Nonetheless, I still rely on the [React Testing Library](https://testing-library.com/) for component rendering.
## Credits
### Yusril Muttaqien - 2023