confectionery-frontend

Введение

Confectionery это магазин кондитерских изделий,которые представляет из себя SPA приложение, написанное на React и NodeJS+Express с использованием MongoDB.

Это frontend-часть данного проекта, поэтому здесть будет описан стэк используемых технологий, взаимодействие с бэкендом, а также краткое описание планов для дальнейшего развития проекта

Навигация

• Введение
• Установка и запуск
• Процесс разработки
• Стэк технологий
• Взаимодействие с бэкендом
• Будущее проекта
• Благодарности

Установка и заупск

Для начала установите и запустите backend, так как некоторые компоненты напрямую зависят от бэкенд-части.

Запуск Frontend-части:

Клонируйте репозиторий на ваш компьютер

git clone https://github.com/DendiRob/confectionery-frontend.git

Установите все необходимые зависимости

npm install

Запустите приложение

npm start

Процесс разработки

Данный проект написан с моим хорошим другом, поэтому клиентская часть разделена на зоны ответсвенности по компонентам.
Мои компоненты:

• Header
• VacancyPage
• VacancyInfoPage
• CatalogPage
• BasketPage
• PrivacyPolicyPage
• BasketCard
• Menu (мобильная версия меню)
• modals (все окна)
• CatalogCard
• VacancyCard

При разработке компонентов, я использовал Redux Toolkit (thunk/query) для управления состоянием компонентов и выполнения асинхронных запросов к бэкенду. Для стилизации компонентов мы воспользовались препроцессором SCSS и методологией БЭМ.
Наиболее интересными с точки зрения разработки являются каталог товаров и корзина. В корзине я использовал Local Storage для хранения массива товаров, а также переменные для отслеживания общего количества товаров и общей стоимости товаров. После добавления авторизаций,планируется привязать корзину к БД
Также в проекте реализованы компоненты с картами, используя библиотеку Яндекс для работы с картами.

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

• react-helmet
• react-input-mask (использовалась в другой версий приложения, будет добавлена после авторизаций)
• react-redux
• react-router-dom
• scss
• swiper
• RTK(thunk/query)
• react-yandex-maps
• TypeScript

Взаимодействие с бэкендом

Для взаимодействия с бэкендом мы используем REST API через асинхронные запросы с помощью Redux Toolkit(Thunk/Query).

Будущее проекта

• добавить авторизацию
• добавить админ панель

Благодарности

Огромная благодарность X6uddy, с которым мы писали этот проект!
Огромная благодарность Ghost-str, чья помощь и советы сэкономили огромное количество врмени и нервных клеток))