"iPhone13"

Pet-проект. Промо-лендинг iPhone13

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

Демо

• Приложение написано с нуля на ReactJS по реальному дизайн-макету.
• Полностью реализована промо-страница и выбор товара и отправка заказа.
• Анимированный роутинг по страницам "главная - отзывы - правила доставки"ю
• Адаптивный дизайн.
• Загрузка базы данных товаров с сервера.
• Базовые настройки приложения вынесены в файл.
• Выбор модели пв карточке товара.
• Анимированные "аккордеоны" просмотра характеристик.
• Добавление Cross-sell товаров.
• Анимированная подгрузка товаров.
• Валидация полей ввода данных пользователя.
• Кастомная маска поля ввода телефона.
• Отключение скролла при открытии модального окна.
• Прелоадер загрузки данных.
• Оповещение пользователя об успешной отправке заказа или ошибке.

Стек и технологии

• ReactJS, Redux, Redux/Toolkit, React Hooks, Styled Components, Context Provider, React Router, React Spring, react-media, seamless-scroll-polyfill для поддержки скролла на Safari, Grid/Flex, RestAPI.
• Настройки приложения в файле env.json: стилевое оформление (цвета и шрифты), навигация.
• Конфигурация позволяет получать полный объем данных о сеансах с сервера с минимальной доработкой приложения.
• В приложении имитируется загрузка базы данных фильмов c сервера (фактически БД находится JSON-файлах в public/db).
• Сборка с помощью Create React App.
• Поддержка браузеров Сhrome, Firefox, Safari (1 последняя версия).
• Деплой демо готовой сборки на Firebase Hosting.

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

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