https://github.com/bogdaaamn/movies-api-client-react
Search movies and watch their trailer. Built with React
https://github.com/bogdaaamn/movies-api-client-react
Last synced: 12 months ago
JSON representation
Search movies and watch their trailer. Built with React
- Host: GitHub
- URL: https://github.com/bogdaaamn/movies-api-client-react
- Owner: bogdaaamn
- Created: 2022-02-07T16:37:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-09T23:40:54.000Z (over 4 years ago)
- Last Synced: 2025-02-25T22:15:12.444Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://affectionate-noether-30c383.netlify.app
- Size: 652 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Movie Search App
Search movies and watch their trailer. Bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Written with [TypeScript](https://github.com/microsoft/TypeScript). Based on [Movies API Nestjs](https://github.com/BogDAAAMN/movies-api-nestjs).
## Structure
The project is divided in the following routes:
- `/movie/:id` renders ``
- `` renders the title, plot, duration and release date of the movie
- `` renders the YouTube/Vimeo embed for the specified `url`
- `/search` renders ``
- `` renders an `input` that servers as a search bar and navigates to the search results
- `` renders the grid of movie cards based on the `searchResult`
- `` renders a card containing the movie information
- `` renders a static list of five movies that mainly serves as a placeholder for ``
## Development
### Install
```bash
$ git clone https://github.com/BogDAAAMN/movies-api-client-react/
$ cd movies-api-client-react
$ npm install
```
⚠️ Create and edit an `.env` file, as seen in [`.env.example`](/.env.example).
https://github.com/BogDAAAMN/movies-api-client-react/blob/5007b6c0da6b369caf06768649b210aa24b4a6ed/.env.example#L1
Replace `REACT_APP_API_URL` with the right API URL:
- `http://locahost:3000` if you run [Movies API Nestjs](https://github.com/BogDAAAMN/movies-api-nestjs) locally
- `https://quiet-depths-21248.herokuapp.com/docs` is currently used and deployed
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
## Build and deploy
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
### Netlify
The project is currently deployed at https://affectionate-noether-30c383.netlify.app/.
⚠️ Manually set the `REACT_APP_API_URL` env variable into the Netlify dashboard before running the first build. Read more at [Build environment variables](https://docs.netlify.com/configure-builds/environment-variables/#declare-variables).
[](https://app.netlify.com/start/deploy?repository=https://github.com/BogDAAAMN/movies-api-client-react)
## API
This app uses the API built at [BogDAAAMN/movies-api-nestjs](https://github.com/BogDAAAMN/movies-api-nestjs). Full documentation available at https://quiet-depths-21248.herokuapp.com/docs/.