Как я создала приложение, которое решает, что мне есть
Работать на удалёнке прекрасно, за исключением одного — всё время нужно что-то готовить. А для этого — придумать, что бы такого вкусного тебе хотелось съесть сегодня.
Меня зовут Лена Райан, я фронтенд-разработчик в Точка Навыки. Недавно закончила свой новый пет-проект — приложение, которое анализирует, какие продукты уже есть дома, и даёт подсказки, что можно из них сделать. В этой статье рассказываю, с какими сложностями пришлось столкнуться, и что в итоге получилось.
С чего всё началось
Впервые идея создать приложение для подбора меню появилась в начале 2024 года. На тот момент в моей жизни было две главные проблемы:
Я работала в Учи.ру, где мы писали браузерную игру на чистом JS, поэтому я очень скучала по реакту.
Мне надоело придумывать, что готовить. Из-за этого мы с мужем перешли на готовые рационы. Но, во-первых, питаться только доставками дорого. А во-вторых, всё равно приходилось мыть посуду, потому что мы сознательные разработчики, которые сортируют мусор и сдают пластик в переработку.
В какой-то момент я поняла, что пришло время перемен, и придумала, как разом решить все мои проблемы — нужно создать приложение для подбора меню.
Подготовка
Первое, что я сделала — набросала схему в FigJam. Здесь отметила, какие функции обязательно должны быть в MVP, а какие войдут в следующие версии проекта (v1.5, v2 и даже v3).
План развития проекта
После этого нарисовала первый прототип приложения. Потом поняла, что совсем не шарю в графике, и обратилась к подруге — веб-дизайнеру. Вот такое «до/после» у нас получилось.
Мой дизайн приложения
Итоговый вариант от веб-дизайнера
Чтобы ничего не забыть, все задачи отмечала в Notion, а когда он закрылся, перешла в AnyType. Кому-то он нравится больше, но лично мне не хватило возможности переносить таски из одного столбика в другой (или я просто не поняла, как это делать). Поэтому в скором времени планирую переезд в Obsidian.
Кое-что по технарю
Для разработки я выбрала эти инструменты:
Библиотека: ReactJS. Думаю, пояснения будут излишни.
Стор: Redux Toolkit. Много раз видела его в вакансиях, но ни разу с ним не работала, поэтому было интересно пощупать на практике.
Базы данных: Supabase — аналог Firebase. Тоже взяла впервые.
Сборка: Vite, потому что он быстрый и классный.
Деплой: Vercel. В отличие от GitHub Pages может делать всё за одно нажатие кнопки.
Инструменты, которые я использовала в работе
Ещё хотела использовать UI-библиотеку, но так как приложение небольшое, то решила не тащить лишние килобайты и сверстать всё сама.
Из того, что приятно удивило в процессе работы — я перестала искать уроки на YouTube. Всю информацию по новым инструментам брала в официальных документациях: сейчас они стали подробными и понятными.
Всю информацию по новым инструментам брала в официальной документации
Как работают алгоритмы
Основа приложения — это три главных экрана:
Работает это просто: я заполняю раздел «Холодильник» и отмечаю, какие продукты уже есть дома, а приложение подбирает подходящие рецепты из базы данных.
Приложение подбирает рецепты с учётом имеющихся продуктов
Например, сейчас в базе есть рецепты шакшуки, авокадо-тоста или гранолы с фруктами. При этом для шакшуки у меня есть 67% ингредиентов, для тоста — ровно половина, а для гранолы — только 33%. Поэтому идём по пути наименьшего сопротивления и выбираем на завтрак яйца. А недостающий перец автоматически отправляется в список покупок.
Как работают алгоритмы приложения
Конечно, высчитывать проценты не обязательно, тем более, все равно нужно идти в магазин. Но, во-первых, не хочется тащить до дома гигантский пакет, а, во-вторых, нужно успеть использовать уже имеющиеся продукты до истечения срока годности.
Список продуктов и покупок
Список покупок можно заполнять и вручную. Если продукт, который вы хотите добавить, там уже есть, то высветится предупреждение. А вот рецепты пока пополняются только через базу данных — в будущем хочу это исправить.
Пополнять базу данных пока можно только вручную через Supabase
Немного проблем
В процессе работы было несколько трудностей:
Нехватка времени. Я начала делать приложение на новогодних каникулах, а потом они кончились, и свободного времени не осталось.
Лень. Если честно, заполнять базу данных рецептами довольно муторно, поэтомусо временем мы снова перешли на доставку готовых рационов.
Странности с Supabase. На бесплатном тарифе база данных замораживается, если не пользоваться ей неделю. Потом можно опять активировать, но я думаю перейти на Nitra, чтобы ни от кого не зависеть.
Уход от плана. В какой-то момент я настолько вошла во вкус, что забыла про свои схемы и черновики. В итоге актуальная версия приложения очень отличается от той, что была запланирована.
Планы на будущее
Сейчас приложение на этапе MVP, но есть много идей, куда и как его можно развивать. Вот что точно хочу сделать в будущем:
Общий список покупок. Чтобы там были не только продукты, но и другие вещи. Думаю, будет логично хранить всё в одном месте.
Генерация меню на несколько дней. Это упростит процесс покупок, и не придётся лишний раз ходить в магазин.
Внесение блюда в базу данных через интерфейс. Надеюсь, это решит мою проблему с ленью, и я найду силы и время добавить в приложение все рецепты.
Тёмная тема. Она уже готова, нужно просто подключить.
Так будет выглядеть тёмная тема приложения
Ещё думаю над тем, чтобы вывести приложение в паблик и дать возможность всем желающим подключить свою базу данных. С open-source всё сложнее — пока не настолько доверяю людям, чтобы дать им возможность решать, что будет у меня на завтрак:)
Зачем делать пет-проект
Пет-проект — это классный способ прокачать свои навыки. Если у вас тоже есть своя задумка, рекомендую не откладывать её в долгий ящик. С помощью пет-проекта вы можете:
Решить свою актуальную проблему, как это сделала я. С одной стороны — сняла головную боль с придумыванием блюд, с другой — вернулась к любимому реакту.
Поработать с новыми технологиями, которые хочется пощупать, но нет возможности в основном проекте.
Попробовать себя в новых ролях. Если на работе вы только разработчик, то здесь одновременно аналитик, архитектор, проджект-менеджер, тестировщик и дизайнер;
Пополнить резюме. Новый опыт и технологии точно пригодятся на собеседованиях.
