"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 рабочей директории.