Skip to content

Latest commit

 

History

History
45 lines (37 loc) · 3.69 KB

README.md

File metadata and controls

45 lines (37 loc) · 3.69 KB
Raw

"Lomoda"

Pet-проект. SPA-приложение по дизайн-макету реального известного интернет-магазина

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

Демо Lomoda

  • SPA приложение собрано на ReactJS полностью с нуля
  • Хранение локации пользователя и корзины в LocalStorage браузера
  • Загрузка товаров и настройки приложения в json файлах
  • Файл src/env.json : initialState для Store, ссылки backend для api-запросов, базовое название магазина, названия категорий товаров дла nav menu, маска и префикс номера телефона, цвет стилизации :hover, списки навигации footer.
  • Прелоадер и оповещение при ошибке сервера
  • Роутинг по страницам групп товаров и отдельного товара
  • Анимация роутинга и модальной корзины React-Spring
  • Вывод 404 ошибки
  • Индикация количества товара в корзине
  • На странице товара блокировка кнопки добавления в корзину при невыбранных параметрах товара
  • В модальной корзине: удаление товара, блокировка кнопки отправки товара при пустой корзине и невалидном телефоне.
  • Валидация номера телефона
  • Оповещение о статусе отправки заказа и очистка корзины
  • Отключение скролла при открытии корзины
  • Получение списка товаров и отправка заказа по RestAPI
  • Использование SVG иконок спрайтом и React компонентами
  • Создание навигации меню в subheader на основании полученного по API списка товаров и настроек в env.json
  • Индикация выбранной категории товаров
  • Навигация в footer на основании env.json

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

  • ReactJS, Redux/Toolkit, Router, ReactHooks, React-Spring,StyledComponents, ContextProvider, SASS/SCSS, Grid/Flex, Local Storage.
  • Настройки приложения в env.json.
  • Исходные данные товаров в public/db.
  • Сборка с помощью Create React App.
  • Деплой демо готовой сборки на Firebase Hosting.

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

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