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