Приложение на ReactJS с функциями управления бюджетом. Добавление, удаление, редактирвоание записей о поступлениях или тратах денег, управление категориями, интерактивный график для просмотра баланса.
npm install
npm run project
Этой командой запустится проект, который будет доступен по адресу http://localhost:5143, а так же mock-сервер, реализованный с помощью json-server по адресу http://localhost:8080
npm run build
В проекте используется модульная архитектура. Каждый модуль экспортирует необходимые для внешнего использования методы и компоненты посредством файла index.js. Для сборки используется инструмент Vite
Модули лежат в папке src/modules. Кажыдй модуль определён по смыслу и функционалу.
└── src
└── modules
├── addPost
├── alerts
├── auth
├── burgerMenu
├── categories
├── chart
├── filters
├── firstSteps
├── header
├── modals
├── panel
├── posts
├── preloader
├── sidebar
Каждый модуль может иметь следующую структуру:
└── moduleName
├── index.js
└── ui
└── UiComponent
├── UiComponent.jsx
└── Layout
├── Container.jsx
├── Layout.jsx
├── Layout.module.sass
└── model
└── moduleNameSlice.js
└── moduleNameAPI.js
└── index.js
└── subModuleNmae
...
└── index.js
- ui — здесь располагается основной компонент
Layout.jsxдля экспортирвоания из модуля. Если требуется дополнительная логика, она выносится в контейнерный компонентContainer.jsxкоторый в свою очередь отрисовывает внутри себяLayout.jsx. При наличии контейнерного компонента именно он будет экспортироваться из модуля как основной. Так же директория ui может соержать в себе дополнительные компоненты для использования в Layout. - model — хранит в себе логику для управления состоянием и запросами к API сервера
- index.js — файл, который экспортирует компоненты, редьюсеры, хуки и т.д. из модуля для использования на уровне выше.
- Каждый модуль может содержать в себе неогринченное числе подмодулей
Модуль соержит в себе два подмодуля
- addPostBtn — модуль с кнопкой добавления записи
- addPostForm — модуль с формой добавления записи
Модуль отвечает за алерты. В текущей версии реализован толко один подмодуль
- microAlerts — Модуль для управления микроалертами
Модуль отвечает за авторизацию пользователя. Содержит два подмодуля
- signIn — модуль с формой входа
- signUp — модуль с формой регистрации
Модуль отвечает за мобильное меню. Имеет один подмодуль
- menuBtn — Модуль кнопки меню
Модуль для управления категориями и их отображения
Модуль для управления графиками в панеле управления
Модуль для управления фильтрацией записей в приложении. Внутри два подмодуля.
- dayFilters — модуль для фильтрации записей по временным периодам
- postTypesFilters — модуль для фильтров типа записей «Расходы», «Доходы», «Баланс»
Модуль отвечает за инициализацию аккаунта пользователя после регистрации. СОдержит два подмодуля
- budgetStep — модуль отвечает за шаг для указания стартового бюджета пользователя
- currencyStep — модуль отвечает за шаг выбора валюты аккаунта пользвоателя
Модуль хедера приложения. Содержит подмодуль
- budgetControl — модуль для отображения текущего бюджета пользователя
Модуль для управления модальными окнами приложения. Сконструирован с возможностью легко расширить набор разных модальных окон с динамическим контентом. В данном проекте реализовано два модальных окна. Обычное общее модальное окно и окно подтверждения чего-либо.
- centeredModal
- confirmationModal Так же в модуле есть настройка контекста в папке context для возможности легко монтировать модальные окна из любого места в приложении
Модуль панели управления пользователя. Простой модуль для сборки нескольких модулей панели управления в один модуль.
Модулья для отображения записей и управления ими. СОдержит один подмодуль
- editPost — модуль с формой изменения записи
Модуль с набором прелоадеров для проекта. В текущей реализации содержит 3 подмодуля с прелоадерами
Модуль меню панели управленния
Страницы, которые используются в основном роутере приложения наъходятся в папке pages. Эти страницы только отрисовывают модули внутри себя и ничем не управляют
В папке shared находятся переиспользуемые компоненты, такие как элементы форм, кнопки, хоки, хуки, защищенные роуты, заголовки и т.д. Так же в папке utils находятся вспомогательные функции и компоненты, которые так же переиспользуются в проекте.
Стили реализованы с помощью sass модулей. Каждый модуль относящийся к определённому компоненту лежит в той же директории, что и сам компонент. Общие и переиспользуемые стили, а так же функции и миксины находятся в директории style └── src └── assets └── styles ├── _functions.sass ├── _mixins.sass ├── colors.module.sass ├── common.module.sass
Для управления состоянием приложения использована библиотека Redux Toolkit. Каждый модуль в директории modules имеет отдельный срез для управления своим состоянием и состоянием своих подмодулей. Например:
└── src
└── modules
└── addPost
├── addPostBtn
├── addPostForm
└── model
├── addPostSlice.js
Настройка конфигурации Redux Toolkit находится в rtk/configuration.js
└── src
└── rtk
├── configuration.js
Для демонстрации работы приложения используется мock-сервер json-server, который предоставляет возможность использовать REST API. База данных в формате JSON находится в директории src/db/db.json
└── src
└── db
├── db.json
Запуск сервера json-server происходит автоматически при запуске проекта основной командой «npm run project», описанной в начале документации. Сервер запускается на порте 8080. Для изменения порта и конфигурации запускаемого сервера нужно изменить команду в файле package.json в свойстве scripts.server указав новый порт. Так же, после изменения порта необходимо настроить новый URL для API запросов в файле src/shared/utils/constants/constants.js, изменив порт на новый.
Для осуществления связи проекта с API сервера ипользуется расширение RTK Query. Каждый модуль в директории modules имеет свой срез для управления API запросами. Например
└── src
└── modules
└── addPost
├── addPostBtn
├── addPostForm
└── model
├── addPostAPI.js
Это отдельно вынесенный модуль, в котором находится вся логика для инициализации, управление состоянием, провайдеры и роутер приложения. Здесь же конфигурируется компонент App.jsx для дальнейшего его использования в точке входа в приложение.
Модуль модальных окон имеет настройку контекста, который передаёт в подключаемый к нему компонент объект для управления модальными окнами. Каждое модальное окном можно гибко настроить под необходимые задачи. Модуль легко расширяется.