ikbostudent / homework_react

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

homework_react's Issues

Кросспроверка

Критерии

• Реализована страница списка фильмов
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
  • Работает переход по клику на фильм(либо на всю карточку, либо на название или постер)
  • Реализованы все ограничения и шаблоны ввода для фильтров(там где указаны)
  • Реализованы ограничения на кол-во билетов
• Фильтры
  • Фильтрация работает - значения в списке фильтруются
• Страница фильма
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
  • Реализованы ограничения на кол-во билетов
• Страница заказа
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
  • Финальное кол-во билетов считается корректно
  • Модально окно работает как описано
• Страница о нас
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
  • Static (страница генериться на билде, а не на реквесте)
• Страница вопросы/ответы
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
  • Static (страница генериться на билде, а не на реквесте)
• Шапка
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
  • Позиционируется липко(стики)
• Футер
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
• Модалка
  • Верстка соответствует макетам(допускаются минимальные отхождения, адаптив не требуется)
  • Используется портал
• Стор
  • Данные корректно разбиты на модули(пример - кинотеатры, фильмы, отзывы, авторы отзывов, корзина)
  • Селекторы написаны оптимально(нет кучи дублирования)
  • Данные грузятся только по необходимости(отзывы не надо грузить на странице списка фильмов и тд), если уже загружены, то повторно не загружаются.
• Оптимизация
  • При изменении кол-ва билетов не перерендеривается вся карточка фильма(в списке фильмов, на странице фильма, в заказе), а только часть с количеством
    При изменении количества билетов перерендеривается весь компонент MovieList на странице поиска фильмов и весь компонент CartPage на странице корзины. Оба компонента подписаны на изменения объекта cartItems, который обновляется при каждом экшене корзины.
    
    
    Селектор количества билетов можно расположить максимально близко к месту назначения - в компоненте управления количеством - и подписаться непосредственно на нужное число:

      export function CartTicketControlls({ id }: Props) {
        const count = useAppSelector((state) => state.cart.cartItems[id].count)
    
        ...
      }

  • Для картинок используется Image некста. Постеры(про список фильма), которые вне вьюпорта грузятся лениво
    В компоненте TicketCard для <Image /> использована опция priority, заставляющая грузиться сразу все изображения.
  • На полях фильтрации с свободным вводом есть debounce(фильтрация происходит только после окончания ввода)

Доп. Комментарий:

При обновлении счетчика корзины рендерится весь Header. Можно унести верстку с селектором числа билетов в отдельный компонент и обновлять только его.