Как наш проджект-менеджер шагнул к красоте и стройности за 3 часа и 2,76 $

Long story short: он собрал рабочий, визуально приятный и очень надежный сервис по планированию питания. Просто положился на нейронки. Хорошая новость в том, что вы тоже так можете. Плохая… Давайте посмотрим, будет ли плохая.

Мотивацию опускаем. Всем нужен нормальный планировщик питания, чтобы наконец перестать есть за троих, наладить режим и начать помещаться в зеркале. Да, этот абзац поймут только представители царского дома Пухлорожденных. Изначально худых крестьян просим не беспокоиться.

Вопрос в другом. Может ли человек с опытом разработки собрать годный сервис за 2,76 доллара? Кстати, откуда они взялись, эти несчастные почти три бакса? Нет, мы не купили ему пирожных. Все проще – это расходы на API от Anthropica. За эти деньги получился сервис, который не просто собирает меню на каждый день, но еще иллюстрирует все позиции не хуже вашей бабуленьки.  Кроме денег понадобился Cursor с моделью Claude 3.7 Sonnet и немного терпения. 

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

Функциональные возможности сервиса (назовём его «Жора»). 

Что же умеет Жора?

Генерить персонализированные планы питания и понимать различные параметры, например:

• тип диеты;

• количество приемов пищи;

• ограничения по ингредиентам и калорийности;

• аллергии и дополнительные пожелания.

Вы вводите данные. Жора берет GPT-4o-mini через OpenAI API генерирует план по заданным параметрам и красиво раскладывает на карточки с картинками.

При этом:

• переводит название на английский язык (если надо);

• формирует поисковый запрос с ключевыми словами;

• отправляет запрос к Google Custom Search JSON API;

• выбирает наиболее релевантное изображение, оптимизирует за счёт кэширования результатов.

Во избежание рецептов с мухоморами были добавлены:

•  клиентская валидация в форме ввода;

• серверная проверка параметров;

• обработка ошибок на всех этапах с выводом понятных сообщений пользователю.

Архитектура Жоры

Смотрим в Cursor  – слева все файлы проекта, справа чат с нейронкой.

Для реализации сервиса был выбран стек MERN:

MongoDB – для хранения пользовательских данных и истории запросов;

Express.js – для создания серверной части;

React.js – для разработки динамичного и отзывчивого интерфейса;

Node.js – для объединения всех модулей в единое целое.

Лицо

На фронтенде использовался React.js, благодаря которому реализованы следующие компоненты:

App.js – корневой компонент, управляющий состоянием приложения и маршрутизацией;

Header.js – компонент заголовка, который задаёт тон всему сервису;

MealForm.js – форма для ввода параметров (тип диеты, количество приёмов пищи, аллергии, калорийный лимит и т. д.) с валидацией данных;

MealPlanDisplay.js – отображает сгенерированный план питания;

MealCard.js – карточка отдельного блюда с описанием и изображением;

LoadingSpinner.js и ErrorMessage.js – для улучшения UX, показывают загрузку и информируют об ошибках.

Стилизация выполнена с использованием модульных CSS-файлов aka адаптивность интерфейса под любые устройства. 

Изнанка

Серверная архитектура строилась на Node.js с Express.js:

server.js – основной файл, маршруты API и middleware;

chatGptService.js – сервис для взаимодействия с внешними API: OpenAI (GPT-4o-mini) для генерации текстов и Google Custom Search JSON API для поиска изображений;

routes/api.js – маршруты для обработки запросов от клиента;

Сервер обрабатывает входящие HTTP-запросы, отправляет запросы к внешним API, обрабатывает их ответы и возвращает данные в формате JSON.

Следующая часть для тех, кто не программист. Если вы программист, можете пока пойти покушать.

Шаги по созданию Жоры

Шаг 1. Скачиваем и настраиваем Cursor

После установки:

Переходим в настройки приложения.

В соответствующем поле вставляем API-ключ выбранной модели.

Используем Claude 3.7 Sonnet — она показала отличные результаты в генерации кода, логике обработки данных и, что важно, стоит при этом разумных денег.

Шаг 2. Используем Grok для глубокого анализа.

Просто Grok с функцией DeepSearch. Он быстро соберет релевантные данные и практики по созданию планировщиков питания и поможет избежать ненужных вызовов платных API.

Шаг 3. Подготовка промпта через Grok

Просим Grok сформулировать полное описание проекта, после запрашиваем  промпт для нейросети, который бы точно отражал все нюансы и требования, готовый промпт вставляем в Cursor, и он начинаем (магическим образом, разумеется) прописывать код и логику приложения.

Шаг 4. Описание проекта в чате Cursor

Когда все настройки завершены, в чате Cursor начинаем описывать свои пожелания по созданию сервиса. Тут работает принцип: чем подробнее описываете задачу, тем точнее будет конечный результат. Лучше разбить запросы на несколько этапов

В итоге, через три часа у вас есть верный друг для походов к холодильнику.

Вывод прост: надо использовать возможности ИИ, которые дает нам природа. Ведь кроме Жоры вы можете попробовать запуск MVP за считанные часы для проверки гипотез, быстрое тестирование идей без вложений, минимизацию расходов на инфраструктуру проекта.