1. Выбор фреймворка
Предлагаю выбрать Single SPA. Это позволит сделать гибкое одностраничное приложение, где для разных модулей можно будет при необходимости использовать разные фреймворки. Также удобно будет независимо деплоить изменения для разных модулей без переразвёртывания всего приложения.
Клиентская композиция обеспечит динамическую загрузку каждого микрофронтенда во время выполнения, что даст отличный пользовательский опыт и быстрый отклик.
2. Структура проекта (смотреть лучше в режиме Code)
/auth-microfrontend /src /components Login.js // Компонент входа пользователя Login.scc // Компонент стилей входа пользователя Register.js // Компонент регистрации пользователя Register.css // Компонент стилей регистрации пользователя Profile.js // Компонент отображения профиля пользователя (содержит функции изменения описания профиля и изменения аватарки) Profile.css // Компонент стилей профиля пользователя ListOfPlaces.js // Компонент ленты мест ListOfPlaces.css // Компонент стилей ленты мест AddPlace.js // Компонент добавления места AddPlace.js // Компонент стилей добавления места /utils App.js. // Построение главной страницы auth.js // Утилиты для аутентификации index.js // Точка входа микрофронтенда package.json // Зависимости и скрипты микрофронтенда webpack.config.js
Описание микрофронтендов: Profile.js // Компонент отображения профиля пользователя Содержит функции: 1. Изменения описания профиля (Асинхронный API запрос к бэкенду) 2. Изменения аватарки (Асинхронный API запрос к бэкенду)
ListOfPlaces.js // Компонент ленты мест Содержит функции: 1. Удалить (Асинхронный API запрос к бэкенду) 2. Лайк (Асинхронный API запрос к бэкенду)
AddPlace.js // Компонент добавления места Содержит функции: 1. Синхронная отправка фото и описания места 2. Изменение глобального состояния для ListOfPlaces.js, чтобы ListOfPlaces.js обновил список мест
Login.js // Компонент входа пользователя Register.js // Компонент регистрации пользователя
3. Диаграмма
https://drive.google.com/file/d/1faMlBtPtIwvSDeRFZi3w8GiLes3zrakU/view?usp=sharing