PETS

"Друзі, які завжди поруч"

---

---

🐾 Опис проєкту

PETS — це не просто сайт. Це спроба створити екосистему підтримки, де волонтери, притулки та просто небайдужі можуть об'єднатися, щоб допомогти тваринам, які постраждали через війну.

Тут можна знайти нових друзів, прочитати реальні історії, допомогти з усиновленням або просто зробити маленьке добро. Ми віримо, що навіть одна врятована лапа — це вже перемога 🐕❤️

---

🛠️ Технології

• React + Vite
• TypeScript
• TailwindCSS
• Shadcn UI
• React Router DOM
• Zod — валідація форм
• React Hot Toast — нотифікації
• json-server — мокова база для розробки

---

⚙️ Функціонал

🔐 Аутентифікація

• Реєстрація та вхід через Email/Password або Google
• Відновлення паролю
• Збереження токена в LocalStorage

👤 Профіль користувача

• Редагування профілю
• Зміна паролю
• Завантаження аватарки

🧑‍🤝‍🧑 Ролі

• Волонтер — створює оголошення, допомагає тваринам, спілкується з притулками
• Притулок — керує заявками на усиновлення, створює оголошення про тварин

📢 Оголошення

• CRUD (створення, редагування, видалення, перегляд)
• Фільтрація за ролями
• Пошук по імені тварини, волонтеру, притулку
• Додавання в "обране"

🐶 Сторінка тварини

• Детальна інформація
• Відгуки та коментарі

🏠 Сторінка притулку

• Детальна інформація
• Заявка на усиновлення
• Коментарі, рейтинг

📰 Блог

• Новини, статті, корисні поради
• Можливість додавати власні матеріали

ℹ️ Про нас

• Історія проєкту
• Команда
• Партнери

---

📸 Скріншоти

Головна сторінка Сторінка з створенням оголошення Сторінка оголошення Сторінка з всіма оголошеннями Сторінка з оголошеннями створеними певним користувачем Сторінка з реєстрацією Сторінка з входом (google auth працює!) Сторінка з профілем користувача Сторінка з профілем притулка Сторінка з профілем волонетра Сторінка якщо користуач залогінений Сторінка з обраними оголошеннями Сторінка з новинами Сторінка зв'яжіться з нами Сторінка про нас

---

FIGMA

Project figma

Перед запуском потрібно завантажити та добавити відео у папку
"./public/Media/BG3.mp4"

Google Drive(video)

🚀 Як запустити проєкт

> Потрібні встановлені pnpm та Node.js

🔧 Кроки:

Встановлюємо pnpm

npm install -g pnpm

Клонуємо репозиторій

git clone https://github.com/Vatsonio/Haca2025.git

Переходимо в папку проєкту

cd Haca2025

Встановлюємо залежності

pnpm install

Запускаємо json-server (локальна БД)

pnpm add -D json-server
pnpm run server

Запускаємо застосунок

pnpm run dev

👥 Автори

• @Vatsonio Ігор — Fullstack

• @WinSoU Даніїл — Тімлід

• @SamLake Ілья — UI/UX

• @RecognisesPainn Андрій - Ідеї

• @bushchakk Євген - Фронтенд

  Маєш ідеї або хочеш долучитись? Пиши нам — будемо раді!