Bunnfee — це сучасний вебзастосунок для ресторану, розроблений як частина курсової роботи. Проєкт дозволяє користувачам ознайомитися з меню, бронювати столики через інтерактивну карту та керувати власним профілем.
Головний акцент зроблено на Mobile-first дизайні, швидкодії та використанні найсучасніших можливостей фреймворку Next.js.
-
Головна сторінка: Динамічні банери, блок "Про нас" та контактна інформація.
-
Інтерактивне меню: - Категоризація страв.
- Фільтрація за ціною та тегами (гостре, м'ясо, алергени).
- Детальні модальні вікна страв з інгредієнтами.
-
Система бронювання:
- Вибір дати та часу.
- Візуальний план залу з можливістю обрати конкретний столик.
- Підтримка бронювання як для авторизованих користувачів, так і для гостей.
-
Особистий кабінет: Реєстрація, автентифікація та можливість редагування даних користувача.
Проєкт побудований на сучасному стеку з використанням архітектури Server Actions:
-
Framework: Next.js 16+ (App Router)
-
Мова: TypeScript
-
Стилізація: Tailwind CSS
-
Компоненти: shadcn/ui (на базі Radix UI)
-
Управління даними: - TanStack Query (React Query) — для синхронізації серверного стану.
-
Server Actions &
useActionState— для обробки форм та взаємодії з API (замість традиційних клієнтських запитів через Axios). -
Валідація: Zod (інтегрована в серверні дії).
-
Шрифти: Кастомний шрифт Meila DEMO.
У новій версії проєкту було проведено значну оптимізацію коду:
- Відмова від Axios: Усі запити переведені на вбудований
fetchз інтеграцією в Next.js Server Actions для кращої безпеки та SEO. - Міграція форм: Більшість форм переведено з React Hook Form на нативний хук
useActionState, що дозволило зменшити кількість JavaScript на клієнті. - Оптимізація State Management: Видалено Zustand, оскільки логіка стану тепер ефективно делегована вбудованим контекстом та закешована за допомогою TanStack Query.
- Вікторія Пилипчук — Ідея ресторану та дизайн інтерфейсу.
- Максим Крадожон — Клієнтська частина вебсайту (Front-end).
- Кирило Лопушенко — Серверна частина вебсайту (Back-end).
Примітка: У цьому репозиторії представлено реалізацію клієнтської частини (Front-end).
- Клонуйте репозиторій:
git clone https://github.com/tockepie/ipz_coursework.git
- Встановіть залежності:
yarn install- Налаштуйте середовище:
Створіть файл
.envна основі.example.envта вкажіть URL вашого API:
NEXT_PUBLIC_API_URL=
# Example: NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_API_BASE=
# Example: NEXT_PUBLIC_API_URL=http://localhost:5000- Запустіть сервер для розробки:
yarn run devВідкрийте http://localhost:3000 у вашому браузері.
/app— маршрутизація, сторінки та серверні дії./components— перевикористовувані UI компоненти (shadcn та кастомні)./api— конфігурація запитів та взаємодія з бекендом./hooks— кастомні React хуки./public— статичні ресурси (логотипи, зображення столиків)./types— описи інтерфейсів та TypeScript типів.