Як розробниця-економістка побудувала фінтех-застосунок на Angular + Capacitor за 9 місяців від ідеї до релізу

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Колись я працювала економісткою в банку. Сьогодні я Angular-розробниця і засновниця власного фінтех-продукту, який живе в Google Play Market. Це історія про те, як я втомилась чекати, що хтось створить потрібний мені інструмент, і зробила його сама.

Увійти в ІТ

Десять років я працювала в банку і зсередини бачила не тільки, як працюють гроші, а й те, як банки свідомо створюють гачки: споживчі кредити, кредитні ліміти, овердрафти — все те, що викривляє фінансову реальність людини й знижує її фінансову грамотність (особливо, якщо її і не було).

Але в ІТ я перейшла не заради місії. Я завжди знала, що це моя стихія — просто подобається, і все. Вхід в ІТ — самостійно, з дитиною на руках. Було трохи складно та це рішення, яке я прийняла і виконую досі.

Звідки взявся «Грошопис»

Я давно веду бюджет за методом Kakeibo — це японська філософія усвідомленого ручного запису витрат. Ключове слово тут — «усвідомленого». Я людина графіків, режиму та планів, тому Kakeibo лягло природно: це не просто облік витрат, а щоденна структура, яка відповідає моєму мисленню.

У великому місті розраховуєшся телефоном біля термінала, і гроші зникають у невідомому напрямку. Банківська виписка або аналітика потім скаже куди, але не так, як ти думаєш. Вона скаже: «SILPO». Мій застосунок скаже: «продукти на тиждень», «дитяче харчування», «корм котам» — бо ти сам так розділив за категоріями й написав у коментарі. Автоматизація знає назву магазину. Ти знаєш, навіщо туди пішов.

Є ще одна українська специфіка. Банківські застосунки роками показують загальний залишок включно з кредитним лімітом, і багато людей щиро вірять, що це їхні гроші. Кредитний ліміт непомітно став сприйматися як частина власного капіталу і межа між «власне» і «навʼязане» сильно затерлась. А це борг. Борг у себе майбутнього. Ми показуємо їх окремо — власні кошти й кредитний ліміт ніколи не змішуються в одну цифру. Не тому, що так технічно правильно. А тому, що людина має право знати, де її гроші, де кошти, запропоновані банками до використання, де борг, а не жити в ілюзії багатства.

Перш ніж писати код, я довго носила ідею в голові. Вела облік і у звичайному Excel, перепробувала купу застосунків, а також купувала спеціальні паперові нотатники під систему Kakeibo. Шукаючи готове рішення серед аналогів, моніторила відгуки користувачів і виявила, що того, чого бракує мені, бракує і багатьом іншим: люди скаржилися на відсутність відокремлення кредитного ліміту від власних коштів, на брак загальної консолідованої інформації про фінансовий стан і на те, що доводиться довго вводити транзакції по одній.

Я перепробувала десятки застосунків, і жоден не відповідав моєму мисленню та потребам:

• Більшість застосунків просто дозволяють записи у нескінченний мінус або змішують власні кошти з кредитним лімітом.
• Жоден не має пакетного ручного введення транзакцій: прийшла з ринку з шістьма покупками під різні категорії — вводь шість разів окремо. Перевірила глобальний ринок — такого немає ні в кого.
• Більшість — це просто записники витрат без відповіді на питання «скільки ще можна витратити до кінця місяця?».
• Мультивалютність скрізь зводиться до примусової конвертації чи то у транзакціях чи то у плануванні, але UAH, USD та EUR це різні гроші з різним призначенням. Не можна котів рахувати в собаках.

Тому я зробила його для себе. А потім вирішила поділитися зі світом.

Стек і архітектура

Angular + Capacitor — одна кодова база для Android та iOS (перехід на iOS буде відносно безболісним, коли прийде час, поки що реліз без iOS). Express + MongoDB на бекенді, Firebase Auth для авторизації, хостинг на Google Cloud.

Вибір стеку простий: я Angular-розробниця, тому мінімум нових технологій — максимум фокусу на продукті. Для швидкої побудови чистого й акуратного інтерфейсу я використала Angular Material.

MongoDB обрала через гнучку схему: коли починала, структура транзакцій та мультивалютності ще еволюціонувала, тож відсутність жорстких міграцій на старті зекономила купу часу.

А для інтеграції, валідації та надійного керування підписками на обох платформах (Android та майбутній iOS) я інтегрувала RevenueCat — це позбавило потреби писати складну власну логіку для перевірки чеків та покупок.

Як влаштована фінансова логіка під капотом

Це та частина, де банківський досвід є важливішим за будь-який курс із розробки.

• Мультивалютність: Транзакція містить суму, рахунок містить валюту. Валюти не конвертуються — UAH, USD, EUR живуть окремо і сортуються незалежно. Планування та аналітика доступні окремо по кожній валюті у розрізі надходжень і витрат.
• Місячні зрізи як checkpoint: Замість перерахунку балансу від початку часів при кожній операції — зберігаю стан як checkpoint. Кожен зріз містить залишок на початок і на кінець місяця — це дає повну картину без перерахунку всієї історії транзакцій. Якщо нова транзакція остання хронологічно — просто додаю або віднімаю від зрізу. Якщо між транзакцією і кінцем місяця є ще операції — перераховую зріз.
• Версіонування кредитного ліміту: Кредитний ліміт зберігається з датою зміни. Валідація транзакції використовує ліміт, актуальний на дату цієї транзакції, а не поточний. Минулі транзакції не перераховуються з новим лімітом. Саме так це працює в реальних банківських системах — нові умови не застосовуються ретроактивно.
• Валідація цілісності: Будь-яка зміна, яка може вплинути на баланс, проходить валідацію через перерахунок зрізу. Видалення надходження, яке спричинить перевищення кредитного ліміту, блокується. Редагування суми перераховує зріз і дозволяє операцію тільки тоді, якщо результат залишається в межах ліміту.
• Переказ між рахунками з комісією: Переказ має окремі поля комісії для відправника й отримувача. Комісія за зняття готівки стає відомою статтею, а не загадковою різницею між списаним і отриманим. Переказ між рахунками не потрапляє в статистику витрат, бо переказ — це рух грошей, а не витрата.

Що всередині продукту

• Чітке розділення власних коштів і кредитного ліміту — філософія, а не технічна деталь.
• План vs Факт за категоріями з повним дрілдауном (деталізацією) до транзакцій.
• Пакетне додавання транзакцій — одна сесія, кілька категорій, живий залишок до збереження. Глобальних аналогів не знайдено.
• Якщо потрібної категорії під час введення ще немає, її можна створити прямо там, не виходячи з форми.
• Категорія «Інше» для всього, що не потрапило в план — чесна сіра зона з власним сегментом діаграми та дрілдауном.
• Анонімний режим — починай без реєстрації, дані зберігаються на сервері, й у будь-який момент можна прив’язати Google-акаунт без втрати прогресу.
• Вся аналітика на двох екранах — План і Факт — без блукання та без необхідності мати вищу фінансову освіту.
• Повністю кастомні категорії: назва, іконка, колір; колір категорії = колір сегмента діаграми.
• Серед іконок є і шкідливі звички — алкоголь, куріння, азарт. Ми не вдаємо, що користувач ідеальний.
• Drag-and-drop сортування категорій та планування.
• Переказ між рахунками не псує статистику витрат.
• Мультивалютна аналітика — окремий вид руху по кожній валюті.
• Демо-режим із реальними мультивалютними даними, щоб побачити продукт перед тим, як почати користуватися.
• Темна і світла теми.
• Offline-режим — дані завжди доступні для перегляду.

Головне — застосунок відповідає на три запитання, які більшість людей ставлять собі щомісяця:

• куди гроші поділися?
• скільки маю зараз?
• скільки ще можу витратити?

Без ілюзій.

9 місяців паралельно з full-time роботою

Застосунок розробляється виключно у вільний від основної роботи час — вечорами та у вихідні. Від створення репозиторіїв на GitHub до релізу в Google Play Market — 9 місяців. Довго? Можливо )

Звісно, є складнощі, і вони здебільшого не технічні. Найскладніше — довіряти власному продуктовому мисленню, коли навколо кажуть: «додай банківську інтеграцію» та «немає дизайну».

Я не додала банківську інтеграцію і не планую. Не тому, що це технічно складно, а тому, що це суперечило б самій суті Kakeibo. Сам акт ручного введення є практикою усвідомленості. Якщо прибрати його, залишиться тільки звіт постфактум.

Банківська автоматизація, яка думає за тебе — це як дивитися відео про тренування замість того, щоб тренуватися самому. Інформація є, а контакту немає. Kakeibo — це контакт із власними грошима. І автоматизація з банками цього не змінить, вона просто красиво покаже те, що вже сталося.

І ще одна річ, яку автоматизація не вирішує: більшість людей планують заощадження на залишок від зарплати. Тобто відкладають те, що залишиться, а залишається зазвичай нічого. Фінансова грамотність каже інакше: спершу заплати собі. Заощадження, донати ЗСУ, допомога притулку для тварин — це перші рядки плану, а не останні. Застосунок не змушує так робити, це інструмент, щоб навчитися так робити, бо план видно до того, як почав витрачати.

Скільки коштує запустити свій продукт: маркетинг та інфраструктура

Багато розробників думають, що витрати закінчуються на оплаті акаунту розробника в Google Play ($25). Але запуск продукту — це ще й про те, як зробити так, щоб про нього дізналися, адже самий найкращий продукт нічого не вартий, якщо про нього ніхто не знає.

Моя стратегія просування поки що складається з точкових експериментів та органіки. На сьогодні мої фінансові вкладення виглядають так:

• Маркетинг (Google Ads): Власне інвестовано близько $250.
• Підтримка від Google: Додатково вдалося залучити 10 000 грн як подарунковий купон на розвиток від Google Ads для нових рекламодавців. Це суттєво допомагає протестувати перші гіпотези.
• YouTube-канал: Я створила канал, де публікую короткі промо та туторіал-ролики по 30 секунд — 1 хвилині українською та англійською мовами. Вони працюють як безкоштовна органіка і також приносять конверсії в завантаження.
• Інфраструктура (хостинг, сервери): Поки що це копійки (базові тарифи хостингу, Firebase та Google Cloud), які практично не відчуваються.

Створення креативів — це чи не найскладніший для мене процес в усій цій історії. Написати логіку перерахунку балансу чи налаштувати сервери — це зрозуміла інженерна задача. А от змонтувати динамічне відео, продумати сценарій для Shorts, підібрати правильний візуальний вайб, накласти озвучку у CapCut — це вимагає зовсім іншого мислення. Іноді на 30-секундний ролик витрачаєш більше ментального ресурсу, ніж на дебаг складного сервісу. Але без цього ніяк — у мобільних фінансах люди купують очима.

Загальний сценарій роликів побудований за класичною маркетинговою схемою: спершу показую реальний біль, а потім — легке рішення у вигляді мого чудового застосунку.

Також в одному з відео головними акторами стали мої коти! Теорія про те, що котики добре просувають продукт, повністю підтверджена )

Де зараз

«Грошопис» в Google Play Market. Ті, хто встановив застосунок до введення підписки (перша сотня користувачів), користуватимуться ним безкоштовно назавжди. Наразі лічильник завантажень у Google Play показує 500+ і впевнено прямує до першої тисячі. Для нових користувачів діє двотижневий тріал, якого цілком вистачає, щоб зрозуміти, чи вписується застосунок у щоденну рутину. Далі — тільки підписка.

У планах — повноцінний облік боргів та заощаджень як окремих сутностей, хоча вже зараз їх можна вести в застосунку.

Застосунок локалізовано мовами:

• Англійська
• Польська
• Іспанська
• Португальська (бразильська)
• Французька
• Німецька
• Гінді

Також локалізовано й назву застосунку: для України та української діаспори — «Грошопис», для решти світу — MoneyScript. Звісно, простіше було зробити одну спільну назву, та назва адаптована саме під українські реалії, тож має бути відповідною. Водночас система Kakeibo має більший відгук саме в країнах Західної Європи, США та Канаді, а великі британські фінансові медіа активно просувають Kakeibo, як найкращий спосіб боротьби з імпульсивними покупками в епоху онлайн-шопінгу.

Що я винесла — і продовжую виносити

• Банківський досвід є кращою підготовкою до створення фінтех-продукту, ніж будь-який курс із product management. Якщо розумієте домен зсередини — будуйте в ньому.
• Найкращі продукти народжуються з власного болю, не тільки з аналізу ринку. Я точно знаю, яку проблему вирішую, бо це моя власна проблема.
• Синдром самозванця каже: «Та це не так і складно — створити застосунок». Не слухайте. Переважна більшість людей, які «хочуть створити застосунок», не запускають нічого. Різниця не в таланті, а в тому, щоб почати й не зупинятися.

Я почала. Не зупиняюся. Застосунок живе.

Одна з ключових задач при розробці — простота і зрозумілість використання. Наскільки, на вашу думку, це вдалося? І чого, на вашу думку, бракує в застосунку зараз? Які фічі зробили б його ще кориснішим?