Клон гри Flappy Bird 🐦

Вигляд:

Cучасний full-stack веб-клон класичної гри Flappy Bird. Створений на Next.js, цей проєкт має чистий користувацький інтерфейс, плавні анімації, автентифікацію користувачів та глобальну таблицю лідерів для відстеження рекордів. Метою було відтворити ностальгічний ігровий досвід за допомогою сучасного стеку технологій. Проєкт представлений англійською та українською мовами.

Репозиторій Демо-сторінка

Можливості

✔Автентифікація користувачів: Безпечний вхід через Google або GitHub за допомогою NextAuth.js для збереження прогресу та результатів.

✔Глобальна таблиця лідерів: Змагайтеся з іншими гравцями та переглядайте свій рейтинг у глобальній таблиці рекордів.

✔Збереження рекордів: Ваш особистий найкращий результат зберігається у профілі користувача.

✔Класичний геймплей: Знайома механіка "торкнись, щоб летіти", відтворена у браузері.

✔Інтернаціоналізація (i18n): Повна підтримка англійської та української мов за допомогою `next-intl`.

✔Темна/світла тема: Тема автоматично адаптується до налаштувань системи та може бути змінена вручну в налаштуваннях.

✔Адаптивний дизайн: Бездоганний ігровий досвід на комп'ютерах, планшетах та мобільних пристроях.

✔Плавні анімації: Переходи в інтерфейсі користувача реалізовані за допомогою Motion для сучасного та приємного вигляду.

Використані технології

JavaScript

Next.js

Auth.js

Prisma

TailwindCSS

Motion

next-intl

Структура проєкту

src/
├── 📁 app/              # Маршрутизація, серверні компоненти та API
│   ├── 📁 api/          # API-маршрути для автентифікації та результатів
│   ├── 📁 game/        # Маршрут головної сторінки гри
│   ├── 📁 leaders/     # Маршрут сторінки лідерів
│   ├── 📁 settings/    # Маршрут сторінки налаштувань
│   ├── 📄 layout.js     # Кореневий макет додатку
│   └── 📄 page.js      # Головна (цільова) сторінка
├── 📁 components/      # React-компоненти для повторного використання
│   ├── 📁 game/        # Компоненти, специфічні для гри (Пташка, Труба)
│   ├── 📁 ui/          # Загальні елементи UI (Кнопка, Модальне вікно)
│   └── 📄 *Client.js  # Клієнтські обгортки для сторінок
├── 📁 context/         # React Context для глобального стану (Гра, Тема)
├── 📁 hooks/           # Кастомні React-хуки для складної логіки
├── 📁 i18n/            # Конфігурація для інтернаціоналізації
├── 📁 lib/             # Основні допоміжні функції (клієнт Prisma)
└── 📄 auth.js          # Серверна конфігурація NextAuth.js

Можливості

✔Збереження рекордів: Ваш особистий найкращий результат зберігається у профілі користувача.

✔Класичний геймплей: Знайома механіка "торкнись, щоб летіти", відтворена у браузері.

✔Інтернаціоналізація (i18n): Повна підтримка англійської та української мов за допомогою `next-intl`.

✔Адаптивний дизайн: Бездоганний ігровий досвід на комп'ютерах, планшетах та мобільних пристроях.

Структура проєкту

src/ ├── 📁 app/ # Маршрутизація, серверні компоненти та API │ ├── 📁 api/ # API-маршрути для автентифікації та результатів │ ├── 📁 game/ # Маршрут головної сторінки гри │ ├── 📁 leaders/ # Маршрут сторінки лідерів │ ├── 📁 settings/ # Маршрут сторінки налаштувань │ ├── 📄 layout.js # Кореневий макет додатку │ └── 📄 page.js # Головна (цільова) сторінка ├── 📁 components/ # React-компоненти для повторного використання │ ├── 📁 game/ # Компоненти, специфічні для гри (Пташка, Труба) │ ├── 📁 ui/ # Загальні елементи UI (Кнопка, Модальне вікно) │ └── 📄 *Client.js # Клієнтські обгортки для сторінок ├── 📁 context/ # React Context для глобального стану (Гра, Тема) ├── 📁 hooks/ # Кастомні React-хуки для складної логіки ├── 📁 i18n/ # Конфігурація для інтернаціоналізації ├── 📁 lib/ # Основні допоміжні функції (клієнт Prisma) └── 📄 auth.js # Серверна конфігурація NextAuth.js