спринт 1: задание 1 и 2. Разбил монолитный фронтенд на микрофронтенды. Добавил диаграмму разбиения монолита на компоненты

README.md

@@ -0,0 +1,97 @@
+# Задание 1
+
+[ReadMe для микрофронтендов](https://github.com/PYasonau/architecture-sprint-1/tree/sprint_1/frontend/microfrontend#readme)
+
+В данном проекте использован Webpack Module Federation. Если я правильно разобрался, все микрофронтенды написаны на React, и возможно предоставить общий код во время выполнения.
+
+## Подход DDD для разбиения
+
+На основании бизнес-логики определены следующие микрофронтенды:
+
+- **auth** – удаленный модуль аутентификации
+- **photo** – удаленный модуль для работы с изображениями
+- **profile** – удаленный модуль для работы с профилем пользователя
+- **host** – основное приложение, динамически загружает модули auth/photo/profile
+
+### Компоненты
+
+**auth:**
+- `Login` – компонент для логина пользователя  
+- `Register` – компонент регистрации пользователя
+
+**photo:**
+- `AddPlacePopup` – компонент добавления изображения  
+- `ImagePopup` – компонент просмотра изображения  
+- `PopupWithForm` – компонент диалогового окна сохранения  
+- `Card` – компонент карточки с изображением
+
+**profile:**
+- `EditAvatarPopup` – компонент для редактирования аватарки пользователя  
+- `EditProfilePopup` – компонент для редактирования профиля пользователя  
+- `PopupWithForm` – компонент диалогового окна сохранения (используется и тут)
+
+**host:**
+- `App` – основной компонент приложения  
+- `Footer` – подвал сайта  
+- `Header` – шапка сайта  
+- `ProtectedRoute` – защищенный маршрут  
+- `InfoTooltip` – информационный тултип  
+- `Main` – основной компонент для отображения списка карточек изображений  
+- `PopupWithForm` – диалоговое окно сохранения (используется и тут)
+
+---
+
+# Задание 2
+
+Ниже приведена схема приложения онлайн аукционов.
+
+Исходя из бизнес-логики онлайн-аукциона можно выделить следующие бизнес-фичи (сервисы):
+
+1. **Профиль пользователя** – управление жизненным циклом пользователя
+2. **Управление заказами пользователей**
+3. **Товары и услуги** – управление товарами/услугами
+4. **Аукцион** – управление жизненным циклом аукционов
+5. **Платеж** – управление платежами
+6. **Техподдержка** – управление обращениями в техподдержку
+7. **Отчеты** – создание отчетов для пользователей системы
+
+## Акторы
+
+В приложении будут 4 актора:
+
+1. **Продавец**
+2. **Покупатель**
+3. **Администратор приложения**
+4. **Сотрудник технической поддержки**
+
+Общие действия (авторизация, регистрация, обращение в техподдержку и т.д.) по возможности пропустим при детальном описании.
+
+Для каждого актора есть уникальные бизнес-пути:
+
+### Продавец
+- Добавляет, удаляет, редактирует свои товары и услуги в каталоге
+- Подает заявку на участие в аукционе
+- Обращается в службу поддержки (вопросы по профилю, аукционам и т.д.)
+- Получает статистику (продажи, возвраты, неуспешные аукционы)
+- Получает нотификации о своих аукционах
+
+### Покупатель
+- Размещает заказ на покупку товара/услуги или создает заявку на участие в аукционе
+- В случае победы в аукционе – оплачивает товар через систему платежей
+- При технических проблемах – обращается в техподдержку
+- При несогласии с результатом аукциона – обращается в техподдержку с апелляцией
+
+### Администратор
+- Процесс регистрации администратора может отличаться от обычного пользователя
+- Принимает решения о правилах проведения аукционов, аппеляциях, корректности данных в профиле/каталоге
+- Получает статистику и отчеты по товарам, аукционам, продавцам, покупателям
+- Обладает прочими необходимыми функциональностями
+
+### Сотрудник технической поддержки
+- Регистрация сотрудника техподдержки может отличаться от регистрации покупателя
+- Имеет доступ к базе обращений в техподдержку
+- Управляет жизненным циклом заявки в техподдержку (обновление статуса, назначение исполнителя)
+
+## Диаграмма
+
+[Ссылка на диаграмму разбиения монолитного приложения на компоненты](https://viewer.diagrams.net/?tags=%7B%7D&lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=arch__task2_yasonau.drawio#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D1acFjIKv2jqJoPkU58RAvWHguM8ZXDcof%26export%3Ddownload)

frontend/microfrontend/Readme.md

@@ -0,0 +1,32 @@
+Использовал Webpack - Module Federation. Если я правильно разобрался, то все  микрофоронтенды написаны на React и можно предоставить общий код во время выполнения. 
+
+Использовал подход DDD для разделения, на основании бизнес-логики определил следующие микрофронтенды
+
+Микрофронтенды: 
+auth - удаленный модуль аутентификации 
+photo - удаленный модуль для работы с изображениями 
+profile - удаленный модуль для работы с профилем пользователя 
+host - основное приложение , динамически загружает модули auth/photo/profile
+
+Компоненты auth : 
+Login // Компонент для логина пользователя 
+Register // Компонент регистрации пользователя
+
+Компоненты photo : 
+AddPlacePopup // Компонент добавления изображдения 
+ImagePopup // Компонент - показ изображения 
+PopupWithForm // Компонент - попап сохранения
+Card // Компонент - карточка с изображением 
+
+Компоненты profile : 
+EditAvatarPopup // Компонент - редактирования аватарки пользователя EditProfilePopup // Компонент - редактирования профиля пользователя PopupWithForm // Компонент - диалоговое окно сохранения
+
+Компоненты host :
+
+App // Компонент основной 
+Footer // Компонент футер 
+Header // Компонент хеадер 
+ProtectedRoute // Компонент маршрутизатор 
+InfoTooltip // Компонент - тултип информационное окно 
+Main // Компонент - главный компонент для отображения основного списка с карточками изображений 
+PopupWithForm // Компонент - диалоговое окно сохранения

frontend/microfrontend/auth/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "auth",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "build:start": "cd dist && PORT=8091 npx serve",
+    "start": "webpack serve --mode development",
+    "start:live": "webpack serve --mode development --live-reload --hot"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Jack Herrington",
+    "email": "[email protected]"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "autoprefixer": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^6.3.0",
+    "html-webpack-plugin": "^5.3.2",
+    "postcss": "^8.2.1",
+    "postcss-loader": "^4.1.0",
+    "style-loader": "^3.3.0",
+    "webpack": "^5.57.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.3.1",
+    "dotenv-webpack": "^8.0.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

frontend/microfrontend/auth/src/App.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import "./index.css";
+
+const App = () => (
+  <div className="container">
+    <div>Name: auth</div>
+    <div>Framework: react</div>
+    <div>Language: JavaScript</div>
+    <div>CSS: Empty CSS</div>
+  </div>
+);
+const rootElement = document.getElementById("app")
+if (!rootElement) throw new Error("Failed to find the root element")
+
+const root = ReactDOM.createRoot(rootElement)
+
+root.render(<App />)

frontend/src/components/Login.js → frontend/microfrontend/auth/src/components/Login.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import '../blocks/login/login.css';
+import '../styles/login/login.css';
 
 function Login ({ onLogin }){
   const [email, setEmail] = React.useState('');
@@ -36,4 +36,4 @@ function Login ({ onLogin }){
   )
 }
 
-export default Login;
+export default Login;

frontend/src/components/Register.js → frontend/microfrontend/auth/src/components/Register.js

@@ -38,4 +38,4 @@ function Register ({ onRegister }){
   )
 }
 
-export default Register;
+export default Register;

frontend/microfrontend/auth/src/index.css

@@ -0,0 +1,10 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+  font-size: 3rem;
+  margin: auto;
+  max-width: 800px;
+  margin-top: 20px;
+}

frontend/microfrontend/auth/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>auth</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>

frontend/microfrontend/auth/src/index.js

@@ -0,0 +1 @@
+import("./App");

frontend/microfrontend/auth/src/styles/auth-form/__button/auth-form__button.css

@@ -0,0 +1,15 @@
+.auth-form__button {
+  width: 358px;
+  height: 50px;
+  background-color: #fff;
+  border: 0;
+  border-radius: 2px;
+  font-family: Inter, sans-serif;
+  font-size: 18px;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.auth-form__button:hover {
+  opacity: .85;
+}

frontend/microfrontend/auth/src/styles/auth-form/__form/auth-form__form.css

@@ -0,0 +1,6 @@
+.auth-form__form {
+  display: flex;
+  flex-direction: column;
+  min-height: 60vh;
+  justify-content: space-between;
+}

frontend/microfrontend/auth/src/styles/auth-form/__input/auth-form__input.css

@@ -0,0 +1,5 @@
+.auth-form__input {
+  width: 358px;
+  margin-bottom: 30px;
+  display: block;
+}

frontend/microfrontend/auth/src/styles/auth-form/__link/auth-form__link.css

@@ -0,0 +1,7 @@
+.auth-form__link {
+  color: #fff;
+}
+
+.auth-form__link:hover {
+  opacity: .85;
+}

frontend/microfrontend/auth/src/styles/auth-form/__text/auth-form__text.css

@@ -0,0 +1,8 @@
+.auth-form__text {
+  color: #fff;
+  font-family: Inter, sans-serif;
+  text-align: center;
+  font-size: 14px;
+  line-height: 17px;
+  margin-top: 15px;
+}

frontend/microfrontend/auth/src/styles/auth-form/__textfield/auth-form__textfield.css

@@ -0,0 +1,16 @@
+.auth-form__textfield {
+  font-family: Inter, sans-serif;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 2px solid #CCCCCC;
+  font-size: 14px;
+  padding: 13px 0;
+  width: 100%;
+  color: #fff;
+}
+
+.auth-form__textfield::-webkit-input-placeholder {color:#CCCCCC;}
+.auth-form__textfield::-moz-placeholder          {color:#CCCCCC;}
+.auth-form__textfield:-moz-placeholder           {color:#CCCCCC;}
+.auth-form__textfield:-ms-input-placeholder      {color:#CCCCCC;}
+.auth-form__textfield::placeholder               {color:#CCCCCC;}

frontend/microfrontend/auth/src/styles/auth-form/__title/auth-form__title.css

@@ -0,0 +1,8 @@
+.auth-form__title {
+  color: #fff;
+  font-weight: 900;
+  font-size: 24px;
+  line-height: 29px;
+  font-family: Inter, sans-serif;
+  text-align: center;
+}

frontend/microfrontend/auth/src/styles/auth-form/auth-form.css

@@ -0,0 +1,15 @@
+@import url('./__title/auth-form__title.css');
+@import url('./__form/auth-form__form.css');
+@import url('./__input/auth-form__input.css');
+@import url('./__textfield/auth-form__textfield.css');
+@import url('./__button/auth-form__button.css');
+@import url('./__text/auth-form__text.css');
+@import url('./__link/auth-form__link.css');
+
+.auth-form {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}