Как я создала приложение, которое решает, что мне есть

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

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

С чего всё началось

Впервые идея создать приложение для подбора меню появилась в начале 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. На бесплатном тарифе база данных замораживается, если не пользоваться ей неделю. Потом можно опять активировать, но я думаю перейти на Nitra, чтобы ни от кого не зависеть.

• Уход от плана. В какой-то момент я настолько вошла во вкус, что забыла про свои схемы и черновики. В итоге актуальная версия приложения очень отличается от той, что была запланирована. 

Планы на будущее

Сейчас приложение на этапе MVP, но есть много идей, куда и как его можно развивать. Вот что точно хочу сделать в будущем:

• Общий список покупок. Чтобы там были не только продукты, но и другие вещи. Думаю, будет логично хранить всё в одном месте.

• Генерация меню на несколько дней. Это упростит процесс покупок, и не придётся лишний раз ходить в магазин.

• Внесение блюда в базу данных через интерфейс. Надеюсь, это решит мою проблему с ленью, и я найду силы и время добавить в приложение все рецепты.

• Тёмная тема. Она уже готова, нужно просто подключить. 

Ещё думаю над тем, чтобы вывести приложение в паблик и дать возможность всем желающим подключить свою базу данных. С open-source всё сложнее — пока не настолько доверяю людям, чтобы дать им возможность решать, что будет у меня на завтрак 🙂

Зачем делать пет-проект

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

• Решить свою актуальную проблему, как это сделала я. С одной стороны — сняла головную боль с придумыванием блюд, с другой — вернулась к любимому реакту.

• Поработать с новыми технологиями, которые хочется пощупать, но нет возможности в основном проекте.

• Попробовать себя в новых ролях. Если на работе вы только разработчик, то здесь одновременно аналитик, архитектор, проджект-менеджер, тестировщик и дизайнер;

• Пополнить резюме. Новый опыт и технологии точно пригодятся на собеседованиях.