eujinnlucashow / goit-react-hw-05-movies

⚛️ goit-react-hw-05-movies

Використовуй цей шаблон React-проекту як стартову точку своєї програми.

Критерії приймання

• Створений репозиторій goit-react-hw-05-movies
• При здачі домашньої роботи є посилання: на вихідні файли та робочі сторінки кожного проекту на GitHub Pages.
• У стані компонентів зберігається мінімально необхідний набір даних, решта обчислюється
• Під час запуску коду завдання в консолі відсутні помилки та попередження.
• Для кожного компонента є окрема папка з файлом React-компонента та файлом стилів
• Для компонентів описані propTypes
• Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.
• Імена компонентів зрозумілі та описові
• JS-код чистий і зрозумілий, використовується Prettier
• Стилізація виконана CSS-модулями або Styled Components.

Завдання «Кінопошук»

Створи базову маршрутизацію для застосунку пошуку і зберігання фільмів. Прев'ю робочого застосунку дивись за посиланням.

API themoviedb.org

Для бекенду використовуй themoviedb.org API. Необхідно зареєструватися (можна ввести довільні дані) та отримати API-ключ. У цій роботі будуть використовуватися наступні ендпоінти.

• /trending/get-trending список найпопулярніших фільмів на сьогодні для створення колекції на головній сторінці.
• /search/search-movies пошук фільму за ключовим словом на сторінці фільмів.
• /movies/get-movie-details запит повної інформації про фільм для сторінки кінофільму.
• /movies/get-movie-credits запит інформації про акторський склад для сторінки кінофільму.
• /movies/get-movie-reviews запит оглядів для сторінки кінофільму.

Посилання на документацію

Маршрути

У застосунку повинні бути такі маршрути. Якщо користувач зайшов за неіснуючим маршрутом, його необхідно перенаправляти на домашню сторінку.

• '/' – компонент <HomePage>, домашня сторінка зі списком популярних кінофільмів.
• '/movies' – компонент <MoviesPage>, сторінка пошуку кінофільмів за ключовим словом.
• '/movies/:movieId' – компонент <MovieDetailsPage>, сторінка з детальною інформацією про кінофільм.
• /movies/:movieId/cast – компонент <Cast>, інформація про акторський склад. Рендериться на сторінці <MovieDetailsPage>.
• /movies/:movieId/reviews – компонент <Reviews>, інформація про огляди. Рендериться на сторінці <MovieDetailsPage>.

Code Splitting (поділ коду)

Додай асинхронне завантаження JS-коду для маршрутів застосунку, використовуючи React.lazy() і Suspense.