Від мемів до Next.js: Як я створив ШІ-Таро «Сова на скакалці» з миттєвими відповідями через Groq API

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

Привіт, DOU! Я соло-розробник. Зазвичай я працюю над серйозними освітніми платформами та складними Telegram-ботами, але іноді з’являється непереборне бажання написати щось суто для фану.

На вихідних мені спала на думку ідея: чому б не зробити генератор розкладів карт Таро, але стилізувати його під відомий інтернет-мем «Сова на скакалці»? У цій статті я поділюся досвідом того, як ця жартівлива ідея перетворилася на повноцінний, швидкий веб-додаток завдяки Next.js, React та бездоганній роботі Groq API.

Ідея та ігрові механіки: Більше, ніж просто рандом

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

У додатку реалізовано кілька режимів:

• Карта дня (компонент components/daily-card.tsx).
• Повноцінний розклад (компонент components/spread-reading.tsx).
• Швидка відповідь Так/Ні (компонент components/yesno-reading.tsx).

Також я додав можливість легко розшарити свій розклад друзям через окремий UI-елемент (components/share-button.tsx). Увесь словник карт та базова логіка їх випадіння акуратно винесені в модулі lib/cards.ts та lib/fortune.ts. Допоміжні функції обробки знаходяться у lib/utils.ts.

Технічний стек: Next.js (App Router) та анімації

Основою проєкту став фреймворк Next.js. Структура маршрутизації класична: головна сторінка знаходиться в app/page.tsx, а загальний лейаут — в app/layout.tsx.

Для стилізації я використовував Tailwind CSS (глобальні конфігурації стилів лежать в app/globals.css та postcss.config.mjs). Також інтегровано готові UI-елементи від shadcn, наприклад, components/ui/button.tsx.

Головною візуальною фішкою стали плавні CSS-анімації взаємодії з колодою та ефект перевертання самих карт (flip effect), логіка яких інкапсульована у components/tarot-card.tsx. Всі залежності та скрипти збірки налаштовані через package.json та pnpm-lock.yaml.

ШІ-Оракул під капотом: Чому саме Groq API?

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

Оскільки для такого додатка критично важлива швидкість відгуку (ніхто не буде чекати 20 секунд, поки згенерується жарт), я обрав Groq API. Після фінальних доопрацювань API працює просто супер — жодних помилок, відповіді прилітають миттєво.

Логіка бекенду реалізована через API-роут Next.js у файлі app/oracle/route.ts. Щоб гарантувати безпеку, ключ доступу GROQ_API_KEY не світиться на фронтенді, а надійно зберігається у змінних оточення (конфігурація прописана у файлі env.download). Клієнтський компонент просто відправляє випавші карти на /oracle, а Groq блискавично повертає згенероване пророцтво від імені тієї самої Сови.

Що далі?

Це був крутий досвід того, як сучасний стек дозволяє зібрати фановий, але технічно грамотний продукт буквально за вихідні. Додаток вже доступний онлайн: sovanaskakalci.vercel.app.

Запрошую всіх поклацати, витягнути свою карту та поділитися результатами! А ще цікаво: які нестандартні API чи моделі ви використовуєте для своїх пет-проєктів, коли потрібна максимальна швидкість генерації тексту? Діліться в коментарях!