Flopost

Разработка веб-приложения для оптовой продажи цветов

Задача

Реализовать одностраничное веб приложение (SPA) интернет-магазин цветов для крупного оптово-розничного поставщика

Интерфейс

Решение

SPA выбран поскольку такие приложения более отзывчивы, кроме того одному клиенту необходимо добавлять большое количество товаров (5-20), товары с небольшим описанием, а ассортимент часто полностью изменяется. Поскольку клиенты – это оптовые покупатели (физические цветочные магазин) – аудитория строго ограничена, то не требуется поисковое продвижение и реклама, поэтому SSR не требуется.
В приложении клиент после авторизации может добавлять товары к заказу и резервировать товар, который в пути, отправлять заказ на проверку менеджеру, корректировать активный заказ, смотреть историю своих заказов и оплат, редактировать свои данные, получать информацию о ближайших поставках и другую информацию.

 Реализованы группы компонентов:

  • каталог товаров;

  • карточка товара;

  • профиль клиента;

  • список/история заказов;

  • страница заказа;

  • финансы (история оплаты);

  • страница контента (страница со свободным контентом);

А также, реализована общая функциональность:

  • Аунтефикация (браузерные куки, xcsrftoken, CORS) через существующий api, в приложении необходимо получаем токен и храним его в куках, при необходимости (например перезагрузка) отправляем куку в заголовке для получения статуса юзера;

  • Базовые права доступа через API, в приложении отработаны состояния доступа (если анонимный юзер использует ресурсы требующие аутентификацию, то он получает предупреждение или ошибку или форму авторизации);

  • Нотификация в приложении (react-toastify) выкидывать сообщения через диспатч;

  • Прелоадинг экранов и начального приложения;

  • Смена title при роутинге (react-helmet).

Технологии

  • YII

  • MySQL

  • JavaScript

  • React.js

  • Bootstrap

  • CSS3

  • HTML5

основные библиотеки React ( ^16.8.6), Redux (^4.0.0), Redux-thunk (^2.3.0), React-router (^4.3.0). 

Взаимодействие с API fetch через async/await. 

Верстка Bootstrap (^4.3.1), для использования JavaScript-компонентов bootstrap использовать React-bootstrap (^1.0.0-beta-9). 

Стили подключаются через React CSS Modules Stylesheet или обычным импортом css. 

Селекторы через функции из библиотеки Ramda.

 

Результат

Проект разработан за 21 рабочий день