Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lesiaukr/goit-react-woolf-hw-05-movies
Master's Degree React Course. React. React Routes
https://github.com/lesiaukr/goit-react-woolf-hw-05-movies
goit-react-woolf-hw-05-movies javascript react react-router react-router-dom
Last synced: about 1 month ago
JSON representation
Master's Degree React Course. React. React Routes
- Host: GitHub
- URL: https://github.com/lesiaukr/goit-react-woolf-hw-05-movies
- Owner: LesiaUKR
- Created: 2024-02-28T19:36:32.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-09T18:43:06.000Z (10 months ago)
- Last Synced: 2024-03-09T19:36:58.653Z (10 months ago)
- Topics: goit-react-woolf-hw-05-movies, javascript, react, react-router, react-router-dom
- Language: JavaScript
- Homepage: https://lesiaukr.github.io/goit-react-woolf-hw-05-movies/
- Size: 5.95 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Критерії приймання
- Створений репозиторій `goit-react-woolf-hw-05-movies`
- При здачі домашньої роботи є посилання: на вихідні файли та робочі сторінки
кожного проекту на `GitHub Pages`.
- У стані компонентів зберігається мінімально необхідний набір даних, решта
обчислюється
- Під час запуску коду завдання в консолі відсутні помилки та попередження.
- Для кожного компонента є окрема папка з файлом React-компонента та файлом
стилів
- Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.
- Імена компонентів зрозумілі та описові
- JS-код чистий і зрозумілий, використовується `Prettier`
- Стилізація виконана `CSS-модулями` або `Styled Components`.
## Кінопошук
Створи базову маршрутизацію для застосунку пошуку і зберігання фільмів. Прев'ю
робочого застосунку
[дивись за посиланням](https://drive.google.com/file/d/1vR0hi3n1236Q5Bg4-se-8JVKD9UKSfId/view?usp=sharing).
## themoviedb.org API
Для бекенду використовуй [themoviedb.org API](https://www.themoviedb.org/).
Необхідно зареєструватися (можна ввести довільні дані) та отримати API-ключ. У
цій роботі будуть використовуватися наступні ендпоінти.
- [/trending/get-trending](https://developers.themoviedb.org/3/trending/get-trending)
список найпопулярніших фільмів на сьогодні для створення колекції на головній
сторінці.
- [/search/search-movies](https://developers.themoviedb.org/3/search/search-movies)
пошук фільму за ключовим словом на сторінці фільмів.
- [/movies/get-movie-details](https://developers.themoviedb.org/3/movies/get-movie-details)
запит повної інформації про фільм для сторінки кінофільму.
- [/movies/get-movie-credits](https://developers.themoviedb.org/3/movies/get-movie-credits)
запит інформації про акторський склад для сторінки кінофільму.
- [/movies/get-movie-reviews](https://developers.themoviedb.org/3/movies/get-movie-reviews)
запит оглядів для сторінки кінофільму.
[Посилання на документацію](https://developers.themoviedb.org/3/getting-started/introduction)
## Маршрути
У застосунку повинні бути такі маршрути. Якщо користувач зайшов за неіснуючим
маршрутом, його необхідно перенаправляти на домашню сторінку.
- `'/'` – компонент ``, домашня сторінка зі списком популярних
кінофільмів.
- `'/movies'` – компонент ``, сторінка пошуку кінофільмів за
ключовим словом.
- `'/movies/:movieId'` – компонент ``, сторінка з детальною
інформацією про кінофільм.
- `/movies/:movieId/cast` – компонент ``, інформація про акторський склад.
Рендериться на сторінці ``.
- `/movies/:movieId/reviews` – компонент ``, інформація про огляди.
Рендериться на сторінці ``.
## Code Splitting (поділ коду)
Додай асинхронне завантаження JS-коду для маршрутів застосунку, використовуючи
`React.lazy()` і `Suspense`.
### Фінальний результат
