🎉 Weekend Planner

Weekend Planner — це сучасний веб-додаток для пошуку та планування подій на вихідні. Додаток допомагає користувачам знайти цікаві події, додати їх до планера та спланувати свій ідеальний вікенд.

📋 Зміст

• Особливості
• Технології
• Початок роботи
• Структура проєкту
• Доступні скрипти
• Основні функції
• Тестування
• Деплой

✨ Особливості

• 🔍 Пошук подій — швидкий та зручний пошук подій з фільтрацією
• 📅 Планувальник — створення особистого плану на вихідні
• 🗺️ Інтерактивна карта — перегляд подій на мапі з використанням Leaflet
• 👤 Автентифікація — реєстрація та авторизація користувачів
• 📱 Адаптивний дизайн — підтримка всіх типів пристроїв
• 🎨 Сучасний UI — стильний інтерфейс з Tailwind CSS
• 🌐 SSR & CSR — оптимізована продуктивність з Next.js

🛠 Технології

Frontend Framework

• Next.js 16.0.1 — React фреймворк з App Router
• React 19.2.0 — бібліотека для побудови UI

State Management

• Redux Toolkit 2.9.2 — управління глобальним станом
• Redux Persist — збереження стану в local storage
• React Query (TanStack Query 5.90.6) — управління серверним станом та кешуванням

Styling & UI

• Tailwind CSS 4 — utility-first CSS фреймворк
• PostCSS — обробка CSS
• clsx & tailwind-merge — умовні класи
• Lucide React — набір іконок

Maps & Geolocation

• Leaflet 1.9.4 — інтерактивні карти
• Leaflet.markercluster — кластеризація маркерів на карті

HTTP & Data

• Axios 1.13.2 — HTTP клієнт
• Fuse.js 7.0.0 — fuzzy search

UI Components

• Swiper 12.0.3 — сучасний слайдер
• React Hot Toast — сповіщення

Development Tools

• ESLint 9 — лінтинг коду
• Prettier — форматування коду
• Husky 9.1.7 — Git hooks
• lint-staged — лінтинг staged файлів

Testing

• Jest 30.2.0 — тестування
• React Testing Library — тестування React компонентів
• jest-environment-jsdom — DOM оточення для тестів

🚀 Початок роботи

Передумови

• Node.js 20.x або новіша версія
• npm, yarn, pnpm або bun

Встановлення

1. Клонуйте репозиторій:

git clone <repository-url>
cd weekend-planner-fe

2. Встановіть залежності:

npm install

3. Створіть файл .env.local з необхідними змінними оточення:

NEXT_PUBLIC_API_URL=your_api_url

4. Запустіть development сервер:

npm run dev

5. Відкрийте http://localhost:3000 у браузері.

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

weekend-planner-fe/
├── public/                    # Статичні файли
│   ├── images/               # Зображення
│   ├── svg/                  # SVG іконки
│   └── search_response.json  # Mock дані
├── src/
│   ├── app/                  # Next.js App Router сторінки
│   │   ├── (home)/          # Головна сторінка (route group)
│   │   ├── about/           # Про проєкт
│   │   ├── add-event/       # Додавання події
│   │   ├── events/          # Деталі події
│   │   ├── favorites/       # Обрані події
│   │   ├── planner/         # Планувальник
│   │   ├── search/          # Пошук
│   │   ├── sign-in/         # Вхід
│   │   ├── sign-up/         # Реєстрація
│   │   └── user/            # Профіль користувача
│   ├── components/          # React компоненти
│   │   ├── layout/          # Компоненти макету
│   │   └── ui/              # UI компоненти
│   ├── constants/           # Константи
│   ├── context/             # React Context (Auth)
│   ├── data/                # Demo дані
│   ├── hooks/               # Custom hooks
│   ├── libs/                # Бібліотеки та конфігурації
│   │   ├── api/             # API клієнт
│   │   └── redux/           # Redux store та slices
│   ├── services/            # Сервіси (fetch функції)
│   └── utils/               # Утиліти
├── eslint.config.mjs        # ESLint конфігурація
├── jest.config.mjs          # Jest конфігурація
├── next.config.mjs          # Next.js конфігурація
├── postcss.config.mjs       # PostCSS конфігурація
├── tailwind.config.js       # Tailwind конфігурація
└── package.json             # Залежності та скрипти

📜 Доступні скрипти

# Запуск development сервера
npm run dev

# Побудова production версії
npm run build

# Запуск production сервера
npm run start

# Лінтинг коду
npm run lint

# Запуск тестів
npm test

# Запуск тестів у watch режимі
npm run test:watch

# Запуск тестів з coverage
npm run test:coverage

🎯 Основні функції

1. Пошук подій

• Фільтрація за містом, типом події, датою
• Пошук з автодоповненням
• Відображення результатів у вигляді списку або на карті

2. Планувальник вихідних

• Додавання подій до особистого планувальника
• Редагування та видалення подій

3. Автентифікація

• Реєстрація нових користувачів
• Авторизація з JWT токенами
• Захищені маршрути
• Автоматичне оновлення токенів

4. Інтерактивна карта

• Відображення подій на карті
• Кластеризація маркерів
• Фільтрація подій на карті

🧪 Тестування

Проєкт використовує Jest та React Testing Library для тестування.

# Запуск всіх тестів
npm test

# Запуск тестів у watch режимі
npm run test:watch

# Генерація звіту покриття
npm run test:coverage

Приклади тестів знаходяться в:

• src/components/layout/__tests__/
• src/components/ui/buttons/__tests__/
• src/context/__tests__/

🚢 Деплой

Vercel (Рекомендовано)

Найпростіший спосіб задеплоїти додаток — використати Vercel Platform:

1. Підключіть ваш GitHub репозиторій до Vercel
2. Налаштуйте змінні оточення
3. Vercel автоматично задеплоїть ваш додаток

Інші платформи

Додаток можна задеплоїти на будь-якій платформі, що підтримує Node.js:

• Netlify
• AWS Amplify
• Railway
• Render

Детальніше: Next.js Deployment Documentation

Зроблено з ❤️ для планування ідеальних вихідних