Личный финансовый трекер

Мобильное веб-приложение — личный финансовый трекер для одного пользователя. Интерфейс на русском, валюта — рубли (₽). Данные хранятся в localStorage браузера, без бэкенда и базы данных.

Технологии

• Next.js (App Router) + TypeScript
• Tailwind CSS
• Хранение данных — localStorage
• Готово к деплою на Vercel «из коробки»

Возможности

• Сводка: «на руках», доход/расход/разница за месяц, реальная позиция (на руках − остаток долга по кредиту), прогресс цели, ближайший платёж по кредиту.
• Добавить операцию: дата, тип, категория (зависит от типа), сумма, счёт, заметка.
• Операции: список за месяц, сгруппирован по дням с итогом расходов за день, фильтр по категории, редактирование и удаление.
• Переключатель месяца вверху экрана.
• Настройки: ручное редактирование балансов счетов, цели и параметров кредита.

Кредиты и займы считаются отдельно и не входят в «доход» и «расход».

Запуск локально

npm install
npm run dev

Откройте http://localhost:3000

Сборка

npm run build

Деплой на Vercel

1. Запушьте репозиторий на GitHub.
2. Зайдите на vercel.com → Add New… → Project.
3. Подключите этот репозиторий → нажмите Deploy (настройки менять не нужно, Vercel сам определит Next.js).
4. После сборки откройте выданную ссылку на телефоне.

Стартовые данные

• Счета: Яндекс банк — 11 937 ₽, Сбербанк — 879 ₽, Тинькофф — 344 ₽.
• Кредит: получено 30 000 ₽ (26.05.2026), платёж 10 921 ₽ × 3 (26 июня / 26 июля / 26 августа 2026).
• Цель: «Квартира», 40 000 ₽, накоплено 0 ₽.

Стартовые балансы — это остаток на сейчас. Прошлые операции вносить не нужно; логирование начинается с текущего дня.

Синхронизация с Google-таблицей (необязательно)

По умолчанию данные хранятся только в браузере. Чтобы пользоваться приложением с телефона и с компьютера с одними и теми же данными (и иметь резервную копию), можно подключить Google-таблицу как хранилище. Отдельный сервер не нужен — всё работает через бесплатный Google Apps Script.

Шаг 1. Создать таблицу и скрипт

1. Создайте новую Google-таблицу на sheets.new.
2. В меню: Расширения → Apps Script.
3. Удалите содержимое файла Code.gs и вставьте код из apps-script/Code.gs этого репозитория. Сохраните.
4. Project Settings → Script properties → Add script property: SYNC_TOKEN = длинная случайная строка (например, openssl rand -hex 32). Без токена хаб отклоняет любой запрос.

Состояние хранится в файле на Google Диске (у ячейки таблицы лимит 50 000 символов, данные давно больше), лист «Операции» — читаемая копия.

Шаг 2. Опубликовать как веб-приложение

1. Справа вверху: Deploy → New deployment (Деплой → Новый деплой).
2. Тип (шестерёнка) → Web app (Веб-приложение).
3. Настройки:
   • Execute as / Запуск от имени — Me (от своего имени).
   • Who has access / У кого есть доступ — Anyone (Все). Защиту даёт токен.
4. Нажмите Deploy, при первом разе подтвердите доступ к своему Google-аккаунту.
5. Скопируйте Web app URL — ссылку вида https://script.google.com/macros/s/.../exec.

Шаг 3. Подключить в приложении

1. Откройте приложение → Настройки → Синхронизация.
2. Вставьте ссылку вместе с токеном: https://script.google.com/macros/s/.../exec?token=ВАШ_ТОКЕН.
3. Оставьте галочку «Синхронизировать автоматически» и нажмите «Синхронизировать сейчас».
4. На другом устройстве сделайте то же самое — данные подтянутся.

Синхронизация всегда сливает данные: перед каждой отправкой приложение забирает таблицу, объединяет её со своими изменениями (по id записей, более свежая правка побеждает, удаления хранятся «надгробиями») и только потом отправляет итог. Ещё она запускается при возврате в приложение и при появлении сети. Ошибки хаба (неверный токен, занятая блокировка) показываются на «Сводке», а не прячутся.

Хаб ведёт номер версии документа. Если два устройства отправляют почти одновременно, второе получает отказ, забирает свежие данные, сливает и отправляет снова, поэтому правки не затирают друг друга.

Если меняете код Code.gs позже — в Apps Script делайте Manage deployments → Edit → Version: New version, иначе ссылка останется на старой версии.