Кейс: дизайн и разработка PWA-приложения для учёта проектов и финансов

# о проекте

Sheina Finance — личное PWA-приложение для учёта проектов, оплат, правок и финансовой статистики веб-студии. Оно заменило Excel-таблицу и объединило в одной системе ежедневную работу с проектами, платежами, правками и статистикой по месяцам и годам.

Проект начали с полной разработки внутренней логики приложения с нуля. Спроектировали структуру данных, поведение статусов, связи между разделами, сценарии работы с проектами, оплатами и правками, правила расчётов, переносов и формирования статистики. Отдельно продумали, как система должна реагировать на каждое действие пользователя и как данные переходят из одного процесса в другой.

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

Разработку приложения вели через Codex, последовательно переводя спроектированную логику, сценарии и дизайн в рабочий код. Для каждого этапа задавали механику поведения, зависимости между функциями и точные параметры интерфейса — от размеров и отступов до адаптивного поведения элементов.

Состав работ

Проектирование логики

С нуля разработали внутреннюю механику приложения: процессы, статусы, расчёты, зависимости и поведение системы.
Логика данных

Определили, какие данные нужны приложению, как они связаны между собой и как должны меняться в разных сценариях работы.
UX-проектирование

Разработали сценарии взаимодействия и логику экранов для всех основных процессов приложения.
UI-дизайн

Создали визуальный дизайн интерфейса: типографику, цвета, карточки, формы, кнопки, состояния и систему отступов.
Адаптивный дизайн

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

Детально описывали для Codex каждую механику, состояние и параметр интерфейса — от логики расчётов до размеров элементов.
Разработка через Codex

Вели разработку через Codex: поэтапно ставили задачи, передавали логику, дизайн и требования к поведению приложения.
База данных

Задали требования к данным, их связям и поведению; структуру PostgreSQL и техническую реализацию выполнил Codex по ТЗ.
Авторизация

Спроектировали логику регистрации, входа, восстановления пароля и пользовательских сессий; реализацию выполнил Codex по ТЗ.
Экспорт данных

Продумали состав выгрузки, сценарии выбора данных и требования к итоговым Excel-файлам; реализацию выполнил Codex по ТЗ.
Excel-шаблоны

Разработали шаблоны Excel, по которым приложение формирует структурированные файлы с выбранными данными.
PWA

Определили формат установки приложения на компьютер и мобильные устройства без App Store и Google Play; техническую реализацию выполнил Codex.

Шрифты и цвета

# шрифты

Exo 2

light / medium

Exo 2 — геометрический шрифт без засечек с современным технологичным характером. Чёткие формы и хорошая читаемость подходят для интерфейсов с большим количеством цифр, статусов и служебной информации.

Лицензия: SIL Open Font License 1.1
(бесплатно для личного и коммерческого использования)