Skip to content

Latest commit

 

History

History
45 lines (36 loc) · 4.68 KB

README.md

File metadata and controls

45 lines (36 loc) · 4.68 KB
Raw

"Cinema-booker"

Pet-проект. SPA-приложение резервирования билетов в кинотеатр

О приложениии

Демо Cinema-booker

  • Приложение написано на ReactJS по дизайн-макету реального киносайта.
  • Реализована работа блока резевирования билетов.
  • Адаптивность для мобильных устройств и логика работы спроектированы самостоятельно.
  • Имитация загрузки базы данных фильмов с сервера.
  • При загрузке приложения отображается страница выбора фильма.
  • На странице фильма доступен выбор даты из ближайших 4-х дней, кинотеатра, сеанса и мест в зрительном зале.
  • Просмотр трейлера.
  • Выбор кинотеатра и сеанса выпадающими списками.
  • Выбор/снятие выбора места кликом на место в схеме зрительного зала.
  • Выбранные билеты отображаются на "странице оплаты" при нажатии кнопки "перейти к оплате".
  • Кнопка блокируется при невыбранных дне, кинотеатре, сеансе или местах в зале.
  • Данные зарезервированных мест сохраняются в текущей сессии при возврате из страницы оплаты или переходе на страницу текущего фильма.
  • Резерв обнуляется при смене: фильма, даты, кинотеатра или времени сеанса.
  • Горизонтальный скролл зрительного зала на экранах маленькой ширины для удобства пользователя.
  • Прелоадер загрузки, оповещение при ошибке сервера и вывод 404 ошибки при отсутствии страницы.

Технологии

  • ReactJS, Router, ReactHooks, StyledComponents, ContextProvider, Grid/Flex, RestAPI.
  • Настройки приложения в файле env.json: стилевое оформление (цвета и шрифты), навигация, url бэкенда, настройки календаря (количество отображаемых ближайших дат и список кинотеатров), настройки схемы зрительного зала (количество рядов и мест), настройки отображения итоговой суммы (цена билета и валюта).
  • Конфигурация позволяет получать полный объем данных о сеансах с сервера с минимальной доработкой приложения.
  • В приложении имитируется загрузка базы данных фильмов сервера (фактически БД находится JSON-файлах в public/db).
  • Сборка с помощью Create React App.
  • Поддержка браузеров Сhrome, Firefox, Safari (1 последняя версия).
  • Деплой демо готовой сборки на Firebase Hosting.

Как установить?

  • Скопировать содержимое репозитория в рабочую папку
  • В терминале выполнить команду npm install
  • В случае создания проекта с помощью Create React App дополнительно установить пакеты из add_packages.txt.
  • Проверить соответствие версий установленной NodeJS и пакета node-sass в документации.
  • Запустить development mode командой npm start.
  • Открыть http://localhost:3000 для просмотра в браузере.
  • Для поддержки IE9/11 использовать Полифиллы.
  • Для сборки приложения команда npm run build. Готовый проект будет в папке build рабочей директории.