Да кто блин такой этот ваш вайбкодинг?

Уже несколько месяцев хотел попробовать его, но все откладывал, но в субботу сел и наконец начал.

Сначала хотел сделать что-то уникальное. Но потом подумал: лучше начать с того, что реально решает мою проблему. Так я смогу разобраться, как всё устроено.

Я всё время пытался вести учёт финансов, но почти всегда забрасываю. Поэтому захотелось трекер, который помогает не просто фиксировать траты, а осознавать их: отмечать, была ли покупка осознанной или спонтанной, ставить лимиты, смотреть аналитику.

В идеале приложение ещё и подсказывает, где ты перебарщиваешь, и даёт советы по финансовой грамотности. Чтобы это был не просто список, а штука, которая помогает меняться.

Накидал идею вместе с GPT, потом закинул её в Claude и он выдал первый минимальный прототип. Уже можно было что-то потыкать, внести трату, это вдохновило. После этого я пошёл в Cursor. Это был мой первый опыт в кодовом редакторе вообще.

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

На бесплатной версии Cursor запускал проект раз шесть и каждый раз он ломался. Я успевал добавить только фунционал внесения трат. Еще бесили очереди, те когда хочешь ПоВаЙбКоДиТь, а вместо этого сидишь и ждёшь. Это, конечно, что-то новое, но в какой-то момент я уже устал ждать и в итоге купил подписку — работа пошла лучше, особенно Cloude 3.7 Sonent.

Завёл репозиторий на GitHub, разобрался с коммитами и наконец перестал бояться, что всё придется делать с нуля. Стало проще просто двигаться вперёд.

Техническая часть проекта, конечно, сложная для меня, но всё-таки интересная. Очень многое не понимаю, но постепенно приходит какое-то осознание, и начинаешь видеть, как всё начинает складываться. Мне кажется, это очень полезно — особенно для будущих проектов, где уже не будешь так теряться на старте.

UI поначалу был довольно слабый — что, в целом, неудивительно, потому что я не сделал ни одного экрана в фигме. Мне было интересно, чего можно добиться, используя только ChatGPT и Cursor. Потом подключил стороннюю и бесплатную библиотеку компонентов — стало поприличнее. Всё ещё далеко до идеала, но уже достаточно, чтобы спокойно продолжать работу.

Сейчас приложение умеет:
→ вносить траты с категорией и эмоцией,
→ показывать аналитику по месяцам, категориям и эмоциям,
→ ставить недельные лимиты,
→ менять тему (светлая/тёмная).
В итоге на финальную версию с нуля у меня ушло часа 4.

Хочу еще добавить планируемые траты — с метками «регулярная» или «единоразовая», и уроки по финграмотности. Типо как в ТЖ, если знаете.

В идеале — хотелось бы довести всё до Telegram Mini App с ботом. Чтобы можно было прислать ему скрин из банка со списком трат за день, а он сам считывал суммы, определял категории, а тебе оставалось только выбрать эмоции. В ответ — короткий совет, или чтобы бот присылал их периодически.

Сейчас всё это в вебе — мобильное показалось сложноватым для начала. Но как только доведу текущую версию до чего-то стабильного, очень хочу попробовать сделать iOS-приложение.

Если выйдет вторая часть — значит я не перегорел и что-то получилось.

PS: Сори, что так быстро мышкой вожу на видео

Кароч, неделю назад я где-то наткнулся на скрин плейлистов, оформленных в стиле CD-дисков с кассетой, и сегодня решил оформить свои плейлисты в таком же стиле.

Порыскал по инету и нашёл хорошую PNG-картинку кейса от диска, затем затащил её в фигму и приступил к созданию своих обложек: сначала нарисовал вектором диск, а потом принялся за поиск картинок, подходящих под название и вайб плейлиста. Потратил около часа и теперь довольный смотрю на свои плейлисты в спотике.

Потом подумал, что, может, вам тоже захочется сделать что-то похожее, поэтому вот ссылка на фигму с тимплейтом. Буду еще рад, если гляните мои другие работы в Figma Community.

Кстати, добавляйтесь в спотифае, если пользуетесь им.

— Сколько будем делать дисков на обложке?
— ДА

Подборочка анимаций