makdmt / react-biletopoisk

learning project Yandex summer school 2023

Учебный проект: Билетопоиск на Next.js

Второй проект на React.
Цель проекта: закрепить навыки разработки на React, познакомиться с фреймворком Next.js
На главной странице проекта отображается список фильмов и форма с фильтрами. Фильмы можно добавить в корзину. Кликнув по карточке в списке, можно посмотреть детальную информацию о фильме и отзывы зрителей. Рендеринг страниц "О нас" и "Вопросы-ответы" осуществляется на стороне сервера.

Освоенные технологии и навыки:

• React / App Router / React Context / React createPortal
• Redux Toolkit / RTK Query
• Технологии оптимизации: debounce на input, ленивая загрузка картинок вне viewport, доступ к хранилищу по селекторам.
• Отработаны шаблоны программирования: Compound components / HOC / Render prop

Посмотреть web-страницу на Vercel: https://react-biletopoisk.vercel.app/

Как собрать и запустить код

# установите зависимости
npm i

# запустите бекенд
npm run api

# запустите сервер в dev режиме
npm run dev

После этого приложение можно открыть в браузере по адресу http://localhost:3000

Планы по доработке:

Настроить accessibility

react-biletopoisk's Issues

Cross-check

Привет! Проект не билдится (при запуске npm run build см. скрин). Если пофиксишь, напиши. Ревью проверки напишу позже в отдельном issue.

Cross-check

Привет! Сначала написал баллы, ниже развернутый ответ.

1. Реализована страница списка фильмов 0.75

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - да/нет

   2. Работает переход по клику на фильм(либо на всю карточку, либо на название или постер) - да

   3. Реализованы все ограничения и шаблоны ввода для фильтров(там где указаны) - да

   4. Реализованы ограничения на кол-во билетов - да

2. Фильтры 1

   1. Фильтрация работает - значения в списке фильтруются - да

3. Страница фильма 0.5

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - нет

   2. Реализованы ограничения на кол-во билетов - да

4. Страница заказа 0.67

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - нет

   2. Финальное кол-во билетов считается корректно - да

   3. Модально окно работает как описано - да

5. Страница о нас 0.5

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - да

   2. Static (страница генериться на билде, а не на реквесте) - нет

6. Страница вопросы/ответы 0

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - *нет

   2. Static (страница генериться на билде, а не на реквесте) - нет

7. Шапка 0.5

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - да

   2. Позиционируется липко(стики) - нет

8. Футер 1

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - да

9. Модалка 1

   1. Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется) - да

   2. Используется портал - да

10. Стор 1

    1. Данные корректно разбиты на модули(пример - кинотеатры, фильмы, отзывы, авторы отзывов, корзина) - да

    2. Селекторы написаны оптимально(нет кучи дублирования) - да

    3. Данные грузятся только по необходимости(отзывы не надо грузить на странице списка фильмов и тд), если уже загружены, то повторно не загружаются. - да

11. Оптимизация 0.33

    1. При изменении кол-ва билетов не перерендеривается вся карточка фильма(в списке фильмов, на странице фильма, в заказе), а только часть с количеством - нет

    2. Для картинок используется Image некста. Постеры(про список фильма), которые вне вьюпорта грузятся лениво - да

    3. На полях фильтрации с свободным вводом есть debounce(фильтрация происходит только после окончания ввода) - нет

Результат: 7

В разных местах верстка не по фигме, про статик сказать не могу тк проект все равно не получилось сбилдить. Дебаунса на инпут нет. Для того, чтобы не триггерился ререндер карточки фильма, можно было не вызывать селектор amount, а перенести его вызов в дочерние компоненты, которым требуется это значение (как и инициализация функций). В целом, могу посоветовать сохранять получаемые данные (фильмы, фильтры итп) в стор, для последующей манипуляции и более удобном разделении компонентов. (юз селекторы и стейт нужно стараться вызывать глубже, в мелких компонентах, если это возможно)