Данный проект является тестовым заданием в компанию "Точка Кипения" http://tochkak.ru/, г.Ростов-на-Дону, на позицию "Junior React + Redux Developer".
❗ Для корректной работы проекта, в частности async/await, установите глобально Node Js от 8 версии и выше. Скачать ноду можно по ссылке: https://nodejs.org/en/.
Для начала, установите все необходимые проекту зависимости
> npm install
Запуск development сервера
> npm run dev
Сборка для production
> npm run build
Запуск production сборки
> npm run serve
Удаление production сборки
> npm run clear
Запуск сервера
> npm run server
Проект собран с нуля, самостоятельно. Это относится, как клиентской, так и к серверной части. Ниже - подробнее.
Клиент написан на React + Redux.
Файловая структура проекта по большей части модульная. На мой взгляд, более удобно организовывать проект по фичам, поэтому не фрактальная структура.
Проект собирается через Webpack 3, с разделением на Development и Production сборку, с HMR в Development сборке и оптимизациями/минификациями в Production сборке. Просто запустите Production сборку и будете удивлены тому, насколько мало она весит. К тому же, все части кэшируются. Это видно, если перезагрузить страницу.
Для того, чтобы новый код корректно отображался у конечного клиента на production, новый бандл каждый раз создастся с новым хэшем. Это касается стилей, картинок, основного бандла.
В проекте собраны самые последние версии зависимостей на дату (01.10.2017), в частности React 16 (Fiber) и React-Router 4.
Для обработки асинхронных операций, в проекте используется Redux-Saga. По больщей части, саги в проекте нужны для работы прелоадера, и авторизации/регистрации/логаута, как альтернатива Redux-Thunk, только на генераторах.
Для запроса и получения данных с сервера, используется библиотека "Axios". Используется 2 сущности axios, одна для регистрации и авторизации, другая для получения данных с защищенных роутов на сервере, с параметром Authorization в заголовках GET запросов
Данные из сторы запрашиваются не напрямую, а через селекторы, через библиотеку "Reselect", в целях мемоизации.
На клиенте реализованы защищенные авторизацией роуты. Закрытую страницу нельзя посетить, не имея актуального токена.
Проект сверстан на флекс боксах. Стили написаны с использованием препроцессора SASS. В проекте предусмотрено использование как инлайновых стилей через import 'styles.scss', так и модульных стилей через import styles from 'styles.module.scss'. Подробнее можно посмотреть в конфигурации вебпака. Сборка стилей отличается на development/production. На production стили вынесены в отдельный файл стилей, в отличае от development сборки, где они находятся внутри бандла, в целях более быстрой работы HMR при работе с кодом.
Наименование классов в проекте по BEM методологии.
Сервер написан на Node Js + Express + JWT + Passport. Поскольку, одним из условий тестового задания было, чтобы пользователь создавался в Run Time, я не использовал базу данных. Вместо этого, все данные о пользователе сохраняются в объекте на сервере. Это касается не только сущности пользователя, но и категории/продукта.
JWT используется в качестве стратегии для Passport. При регистрации пользователя, пароль хэшируется через "Bcrypt".
На сервере реализованы защищенные роуты. Если у пользователя отсутствует токен, он не сможет получить данные с сервера.
Поскольку на клиенте в куках сохраняется только токен, после перезагрузки страницы необходимо получить пользователя, записать его в стору и только после этого разрешить доступ к странице на клиенте. Для этой цели, на сервере реализован метод, по которому, имея корректный токен в куках, клиент может сделать запрос на сервер и получить пользователя.
Поскольку клиент и сервер находятся в рамках одного домена, разрешены кросдоменные запросы
Вот как можно со мной связаться: https://vk.com/agroil_92