Кошелёк

Демо итогового проекта курса «Вайбкодинг»
Что это такое
«Кошелёк» — пример того, что студенты создают в ходе курса. Это полноценное приложение для учёта личных финансов на HTML + JavaScript + Chart.js — всё написано с помощью ИИ-ассистента. Изучите интерфейс, добавьте операцию, поменяйте бюджет. Данные сохраняются локально в вашем браузере — никто кроме вас их не увидит.
Функционал приложения:
  • Живой дашборд — доходы, расходы, баланс и средний день за неделю / месяц / год с реальной динамикой к прошлому периоду
  • Умные инсайты — прогноз трат до конца месяца, самый дорогой день, рост категорий, норма сбережений
  • Календарная карта трат и интерактивные графики по дням, категориям и месяцам
  • Операции трёх типов — доходы, расходы и переводы между счетами с поиском, фильтрами по типу, категории, счёту и датам
  • Быстрый ввод в один клик и умный парсер: «кофе 290» сам подставит категорию и сумму
  • Бюджеты с цветными прогресс-барами и предупреждением о перерасходе
  • Регулярные платежи — аренда, подписки и зарплата создаются автоматически каждый месяц
  • Цели накопления с прогрессом, дедлайнами и пополнением
  • Несколько счетов с балансами, плюс свои категории и счета с любым цветом
  • Отчёты за полгода и сравнение месяцев по каждой категории
  • Персонализация — тёмная/светлая тема, 4 акцента, валюты ₽/$/€ с пересчётом, имя пользователя
  • Контроль данных — экспорт/импорт в JSON и CSV, отмена действий (⌘Z), горячие клавиши, всё хранится локально
Проект является демонстрационным примером. В рамках курса вы можете реализовать любой визуал и добавить функционал по своему усмотрению.
Разделы приложения
куда кликать и что искать
Обзор
клавиша 2
Главный экран. 4 KPI: доходы, расходы, баланс, средний день. Автоматические инсайты — прогноз до конца месяца, самый дорогой день, норма сбережений. Календарная карта трат за 13 недель, график по дням, пончик по категориям, статусы бюджетов, форма ввода и быстрые шаблоны.
Операции
клавиша 3
Полный список всех операций. Поиск по названию, фильтры по типу, категории и счёту. Клик на операцию — редактировать, наведение курсора + крестик — удалить.
Бюджеты
клавиша 4
Лимиты на месяц по категориям. Прогресс-бар меняет цвет: зелёный → жёлтый → красный. Редактируются inline, новый бюджет добавляется формой ниже списка.
Цели
клавиша 5
Накопительные цели — отпуск, техника, подушка безопасности. У каждой сумма, дата, прогресс. Кнопка «Пополнить» добавляет сумму к отложенному. Новую цель — через «+ Новая цель» в хедере.
Отчёты
клавиша 6
Сводная статистика за всё время: доходы/расходы по 6 месяцам, топ категорий, сравнение этого месяца с прошлым по каждой категории.
Скрытые возможности
то, что интуитивно не заметно
Умный парсер ввода
Напишите в поле «На что потратили?» например «кофе 290» или «такси 400» — категория проставится автоматически, сумма подтянется из текста.
Быстрый ввод одним кликом
На Обзоре справа есть плашки «Кофе 290 ₽», «Метро 50 ₽», «Обед 500 ₽», «Такси 400 ₽» — добавляют операцию в один клик.
Отмена действия
Случайно удалили операцию или добавили лишнее? Нажмите ⌘+Z (или Ctrl+Z) — откатится. Помнит 20 последних действий.
Горячие клавиши
N — новая операция, / — поиск, цифры 1–6 — разделы меню, ? — полная справка, Esc — закрыть окно.
Темы и настройки
В самом низу меню — «Управление». Там светлая/тёмная тема, 4 цветовых акцента, валюта (₽/$/€) и поле для имени пользователя.
Экспорт и импорт
Там же — скачать все данные в JSON (бэкап) или CSV (для Excel). Можно загрузить обратно из JSON, сбросить к демо или удалить всё.
Курс GDEKURS
Хотите научиться создавать такие приложения?
На курсе «Вайбкодинг» вы научитесь разрабатывать веб-приложения, сайты и автоматизации с помощью ИИ — без ручного написания кода. Объясняете нейросети задачу, она пишет код, вы запускаете и тестируете.
На страницу курса →

Обзор финансов

Апрель 2026 · все счета
↑
Доходы
0 ₽
+0%
↓
Расходы
0 ₽
+0%
◆
Баланс
0 ₽
Доходы минус расходы
✓
Средний день
0 ₽
Трат в день в среднем
Карта трат
последние 13 недель — насыщеннее цвет = больше потратили
меньше больше
Динамика за месяц
доход / расход по дням
Расходы по категориям
в процентах от общей суммы
Бюджеты на апрель
сколько осталось до лимита
Новая операция
Быстрый ввод
в 1 клик
Последние операции
0

Операции

Все операции

Бюджеты

Установите лимит на месяц по каждой категории
Текущие бюджеты
клик на «Изменить» — редактировать лимит
Добавить бюджет
на ещё одну категорию
Регулярные платежи
создаются автоматически каждый месяц
— тип и день списания каждый месяц

Цели

Копите на большие покупки и отслеживайте прогресс

Отчёты

Сравнение периодов и топ категорий
Всего доходов
0 ₽
Всего расходов
0 ₽
Сохранено за всё время
0 ₽
Доходы и расходы по месяцам
за последние 6 месяцев
Топ категорий расходов
за всё время
Сравнение с прошлым месяцем
апрель vs март по категориям