WG Forge. Front-End Course 2021

Команда № 1. Дипломный проект

Разработка магазина внутриигровых товаров

Используемый стек технологий: JS, TypeScript, Express, MongoDB, SCSS, WebPack, EsLint, Prettier, StyleLint, Husky

Деплой предрелизной версии проекта https://wg-front-end.herokuapp.com

Кроме функционала ТЗ дипломного проекта (часть 1) дополнительно реализовано:

1. Разработан backend с документацией swagger https://wg-forge-back.herokuapp.com/api-docs для необходимого функционала
2. Реализована страница админа с детализированным UI по работе с товарами и настройками магазина, проработана валидация ввода
3. Реализованы страницы signin/signup с необходимой валидацией пользовательского ввода. Пользователи, не имеющие статуса admin, не смогут попасть на страницу admin
4. При прохождении процедуры логина после перезагрузки страницы, например, состояние и данные пользователя автоматически подгружаются. Переход на страницы signin/signup блокируется до момента logout
5. Реализована страница корзины товаров с возможностью подтверждения заказа
6. Работа с избранным и корзиной доступна только авторизованным пользователям. Иначе, при попытке - реализован редирект пользователя на страницу signin
7. Кнопки добавления в избранное и корзину (purchase) связаны между собой на всех страницах (товара, главной витрине магазина, в избранном, в корзине) и отображаются в соответствии с состоянием на бекэнде
8. Добавлены спиннер загрузки и popup для отображения пользовательских сообщений, в т.ч. об ошибках
9. На главной странице реализована анимация добавления товара в корзину
10. Красивый и единый дизайн, в т.ч. проработанный адаптив, включая свайпер в мобильной версии страницы товара. Добавлен footer.
11. В проекте стиллистически проработаны интерактивные элементы (плавные анимации, ховеры, смена визуальных состояний)
12. Реализована страница 404
13. В окружении настроен webpack, необходимые линтеры и форматеры кода, precommit хуки (husky). Настроен автоматический деплой собранного проекта из последнего PR или состояния ветки master https://wg-front-end.herokuapp.com.
14. Использован TypeScript

Краткая инструкция по установке и использованию проекта

Установка:

1. Установить (если не имеется) node.js с npm (node package manager)

2. Склонировать или скачать данный репозиторий

3. Перейти в папку проекта и запустить npm install в командной строке (в терминале, например)

После успешной установки зависимостей

Использование:

В командной строке запуск npm run и

serve - старт проекта в режиме разработки и горячей отладки (в dev-server);
start - аналогично (короткий вызов npm start);
build - сборка проекта в production-режиме;
build:dev - сборка проекта в dev-режиме;
lint - запуск проверки EsLint;
lint:fix - запуск проверки EsLint с автоматическим исправлением ошибок по возможности;
prettier - запуск prettier для форматирования кода;
stylelint - запуск stylelint для проверки стилей;
stylelint:fix - запуск stylelint для проверки стилей с автоматическим исправлением ошибок по возможности;
precommit - последовательный запуск EsLint, prettier, stylelint с автоматическим исправлением ошибок по возможности. Предназначен для запуска перед каждым коммитом в репозиторий;

Собранный проект для деплоя (после команд npm run build и npm run build:dev) располагается в папке /dist