Бюджет: учёт доходов и расходов на React

Одностраничное приложение на React 18 и TypeScript для личного учёта денег: операции по месяцам, расходы по категориям и выгрузка в CSV. Данные хранятся только в браузере.

Возможности

• Добавление дохода или расхода: сумма, категория, дата и комментарий до 80 символов
• Свои наборы категорий для доходов и расходов, при смене типа категория сбрасывается на первую подходящую
• Сумма принимается с пробелами и запятой (1 299,90), ноль и отрицательные значения отклоняются с подсказкой
• Переключение месяцев стрелками, после добавления операции открывается её месяц
• Карточки за месяц: доходы, расходы, остаток и доля потраченного дохода в процентах
• Общий баланс по всем операциям, отрицательный подсвечивается
• Горизонтальная диаграмма расходов по категориям, отсортированная по сумме, у каждой категории свой цвет
• Список операций сгруппирован по дням, новые сверху
• Удаление с всплывающей кнопкой «Вернуть»
• Экспорт операций месяца в CSV для Excel (BOM, разделитель ;, десятичная запятая)
• При первом запуске подставляются примерные операции за текущий и прошлый месяц
• Всё сохраняется в localStorage через собственный хук useLocalStorage

Стек

React 18, TypeScript 5 (strict), Vite 5, @vitejs/plugin-react, CSS без фреймворков, localStorage. Сборка и публикация на GitHub Pages через GitHub Actions.

Как запустить

Нужен Node.js 18 или новее.

npm install
npm run dev       # дев-сервер Vite, http://localhost:5173
npm run build     # проверка типов (tsc --noEmit) и сборка в dist/
npm run preview   # локальный просмотр собранной версии

Автодеплой

В .github/workflows/deploy.yml настроен деплой на GitHub Pages: при каждом пуше в ветку main (или вручную через workflow_dispatch) GitHub Actions ставит зависимости на Node 20, выполняет npm run build и публикует папку dist/. В vite.config.ts указан base: './', поэтому сборка работает из подпапки репозитория. Чтобы включить, в настройках репозитория выберите Pages → Source: GitHub Actions.

Настройка

• src/types.ts: справочник категорий CATEGORIES для доходов и расходов и их цвета CATEGORY_COLORS
• src/demo.ts: стартовые операции для первого запуска
• Ключ хранилища finance-tracker задаётся в src/App.tsx

Структура проекта

.github/workflows/deploy.yml   # сборка и публикация на GitHub Pages
index.html                     # точка входа Vite
vite.config.ts                 # плагин React и base: './'
src/
  main.tsx                     # монтирование приложения в StrictMode
  App.tsx                      # состояние, итоги, отмена удаления, экспорт CSV
  components/
    TransactionForm.tsx        # форма операции с валидацией суммы
    TransactionList.tsx        # список операций с группировкой по дням
    CategoryChart.tsx          # диаграмма расходов по категориям
  useLocalStorage.ts           # useState с сохранением в localStorage
  format.ts                    # форматирование рублей, месяцев и дат
  demo.ts                      # стартовые данные
  types.ts                     # типы и справочник категорий
  styles.css                   # стили приложения

Как это устроено

• Состояние хранится в одном массиве операций, выборка за месяц мемоизирована через useMemo, итоги считаются при рендере.
• useLocalStorage лениво читает значение при первом рендере и записывает его в эффекте; ошибки чтения и записи (приватный режим, переполнение) перехватываются.
• Даты хранятся строками YYYY-MM-DD, месяц определяется срезом строки, а «сегодня» берётся с поправкой на часовой пояс, чтобы ночью не съезжать на вчера.
• Сумма округляется до копеек при сохранении, суммы выводятся через Intl.NumberFormat в рублях.
• Диаграмма сделана на обычных элементах: ширина полосы считается от самой крупной категории.
• Доступность: переключатель типа операции оформлен как radiogroup, у кнопок удаления подробный aria-label, название месяца объявлено aria-live.

Идеи для развития

• Бюджеты-лимиты по категориям с предупреждением о превышении
• Импорт CSV из выписки банка
• Повторяющиеся операции (зарплата, подписки)
• Тесты на Vitest для форматирования и подсчёта итогов

Лицензия

MIT © 2026 whysafe. Telegram: @yawhysafe · Сайт: whysafe.ru