REGINOX

О проекте REGINOX

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

Адаптивный дизайн обеспечивает комфортное взаимодействие с сайтом на различных устройствах, гарантируя удовлетворение потребностей пользователей вне зависимости от типа устройства. Продвинутая навигация по страницам делает поиск и просмотр товаров легким и удобным, что позволяет пользователям быстро находить исключительные продукты. Возможность сравнения продуктов предоставляет пользователям инструмент для принятия информированных решений, а информационные страницы содержат полезные сведения о продукции и услугах, что делает пребывание на сайте еще более информативным и интересным.

Четырнадцать уникальных страниц предоставляют разнообразную информацию и возможности: страницы о компании, товары, акции, контакты etc. Продвинутые фильтры по категориям и ключевым словам позволяют точно находить нужные товары. Продвинутые карточки товаров содержат информацию о ценах, акциях, скидках и рейтинге. Продвинутая навигация между страницами облегчает выбор и просмотр. Дополнительные секции на странице - такие, как рекомендованные и популярные предложения, помогают пользователям найти интересные продукты. Адаптивная панель фильтров обеспечивает удобство на планшетах и смартфонах.

Challaneges

Filters: Одним из ключевых вызовов было обеспечение сохранения выбранных фильтров на каждой из 9 продуктовых страниц в стейте. Необходимость восстановления выбранных фильтров при переходах с одной страницы на другую добавляла сложности, особенно в контексте необходимости определить, загружен ли контент на странице, и пропустить неактивные фильтры. Это создало неординарную и тонко настроенную логику работы стейт менеджера, и процесс ее разработки и настройки стал значительным вызовом.

Loading on demand: Реализация подгрузки контента страницами по мере необходимости при переходе на них оказалась еще одним значительным вызовом. Этот подход позволил существенно ускорить загрузку страниц и создать более быстрый пользовательский опыт.

Takable search link: Еще одним вызовом было обеспечение управления поисковой строкой (search query) с помощью стейт менеджера. Строка должна автоматически обновляться при изменении стейта, который в свою очередь изменяется при выборе различных фильтров. Это инновационное решение позволяет пользователям сохранять ссылки на страницы и возвращаться к ним в будущем, чтобы получить страницу в точно таком же состоянии, как при первом посещении.

Особенности проекта

Производительность и Оптимизация: Особое внимание уделено оптимизации и ускорению рендеринга компонентов при обновлениях нитерфейса для обеспечения плавности работы UI и улучшения опыта использования приложения.

Progressive Web App (PWA): Reginox - это PWA, что означает, что пользователи могут использовать приложение в автономном режиме, даже при отсутствии интернета. Это идеальное решение для пользователей с медленным интернетом или при потере нитернет соединения.

В данном проекте использованы различные библиотеки, которые приносят свои уникальные возможности:

• axios: Позволяет безопасно отправлять HTTP-запросы к API и обрабатывать ошибки, обеспечивая надежное взаимодействие с сервером.
  
  
• focus-trap: Гарантирует, что фокус остается в пределах модальных окон, обеспечивая доступность для всех пользователей, включая тех, кто использует вспомогательные инструменты для работы с приложением.
  
  
• formik: Обеспечивает удобное взаимодействие с формами. В проекте присутствует более 5 различных форм, и Formik помогает управлять ими эффективно.
  
  
• normalize-scss: Улучшает кроссбраузерность, обеспечивая единое отображение страницы на различных платформах, помогая преодолеть различия между разными операционными системами и типами устройств, такими как Android, Windows, и Apple.
  
  
• photoswipe & react-photoswipe-gallery: Позволяют создавать красивые модальные окна для просмотра изображений с возможностью перелистывания слайдов прямо в модальном окне. В проекте удалось интегрировать photoswipe в swiper и наладить их взаимодействие, предоставляя пользователю более удобный способ просмотра изображений.
  
  
• rc-collapse: Используется для плавного сворачивания фильтров карточек товара, обеспечивая удобное взаимодействие с контентом.
  
  
• react-collapsible: Создает аккордеон на главной странице для отображения блока адресов на мобильных устройствах.
  
  
• react-burger-menu: Создает уникальную анимацию открытия боковой панели (бургер-меню) и обеспечивает удобное управление фильтрами в меню на мобильных устройствах.
  
  
• redux-burger-menu: Позволяет использовать бургер-меню с помощью Redux, что дает дополнительные возможности для управления состоянием.
  
  
• react-input-mask: Позволяет форматировать вводимые значения в полях формы "на лету", улучшая удобство пользователей, например, при вводе номеров телефонов.
  
  
• react-range: Реализует кнопку-слайдер для выбора диапазона цен, отправляет выбранные значения в стейт.
  
  
• react-responsive: дополняет и расширяет возможности React, позволяя адаптировать отображение компонентов в зависимости от типа устройства(расширяет css media-queries)
  
  
• react-modal: удобная инструмент для создания модальных окон. На сайте имеется множество модальных окон, которые были оптимизированы путем переиспользоваиня стилей и компонентов при сохранении уникального дизайна каждой.
  
  
• react-select: Кастомизированный селект с поддержкой доступности, используется для выбора фильтров карточек товара.
  
  
• react-tabs: Простая библиотека для реализации вкладок, обогащающая пользовательский опыт на нескольких страницах.
  
  
• redux: В проекте используется redux-toolkit, улучшенная библиотека для работы со стейтом, что повышает эффективность управления данными.
  
  
• redux-persist: Используется для сохранения избранных товаров, предоставляя пользователям удобство и возможность сохранения интересующих их товаров.
  
  
• redux-thunk: Обеспечивает асинхронную отправку HTTP-запросов и управление состоянием приложения, обеспечивая быстрое и плавное взаимодействие.
  
  
• reselect: Позволяет оптимизировать рендеринг компонентов и значительно повысить отзывчивость интерфейса, на что уделялось особое внимание при разработке.

Запуск проекта

1. Клонируйте репозиторий

   git clone https://github.com/kluevevga/reginox-aqua-spa.git

2. Перейдите в директорию проекта

   cd reginox-aqua-spa

3. Установите зависимости серной части:

   npm install

4. Установите зависимости клиентской части:

   cd client
   npm install

5. Вернитесь в корень проекта и запустите проект командой dev:

6. Запуск проекта

   cd ..
   npm run dev

   Проект запустится и будет доступен по следующему адресу: http://localhost:3000

Структура проекта

Клиентская часть:

• Каталог /client/src/components/ содержит переиспользуемые компоненты.

• Каталог /client/src/pages/ - здесь находятся страницы проекта. Каждая директория представляет одну страницу и содержит главную компоненту, а также вспомогательные компоненты, которые импортируются в главную. Вспомогательные компоненты могут также импортировать функции из директории components. Кроме того, в этой директории располагаются файлы стилей.
  
  Стилизация компонентов разделяется на две группы:

  • Уникальные стили - записываются в формате snake_case
  • Переиспользуемые стили - в формате kebab-case
    

Уникальные стили хранятся рядом с соответствующими компонентами, а переиспользуемые находятся в папке client/components/app/styles/.

• Каталог /client/src/utils/ содержит небольшие вспомогательные элементы, такие как форматирование валюты, пользовательский маршрутизатор и вспомогательные функции для библиотеки yup, используемой для получения сообщений об ошибках валидации в формах, а также самих параметров валидации.
  
  
• Каталог /client/src/redux/ включает стейт-менеджер и всю логику фильтрации продуктов.
  
  
• Файл src/index.js содержит обертки, такие как маршрутизатор и управление состоянием через Redux и другие библиотеки.
  
  
• Файл /src/components/app.js - точка входа всего приложения, содержит маршрутизатор и загружает все страницы из каталога pages.

Точка входа приложения сервера:

server.js

end-points:

address:	method:	query string :	response :
/menu	get	-	object
/sertificates	get	-	array
/brands	get	-	array
/promo	get	-	array
/new	get	-	array
/home	get	-	object
/catalogs	get	?size=pageSize[number]&current=current[number]	object
/articles	get	?page=page[number]	object
/articles/:article	get	-	object
/products/:url	get	-	object
/product/:url/:productUrl	get	-	object
/reviews/:url/:productUrl	get	?size=currentSize[number]	array
/cart	get	-	object
/similar-products	get	-	array
/compare	get	-	object

Лицензия 📜

Этот проект распространяется под лицензией MIT. Дополнительную информацию можно найти в файле LICENSE.