🪑 Меблерія

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

Меблерія — це сучасний вебдодаток для вибору та замовлення меблів.
Проєкт створено для демонстрації роботи з REST API, реалізації адаптивного дизайну, модальних вікон, динамічного рендерингу карток, фільтрації та пагінації.

Користувачі можуть:

• Переглядати меблі з бази даних;
• Фільтрувати їх за категоріями;
• Переглядати детальну інформацію про товар;
• Замовляти меблі через форму зворотного зв’язку;
• Переглядати відгуки клієнтів та інформацію про компанію.

---

🌐 Макет і API

• Макет Figma:
  Меблерія — дизайн

• Бекенд (API):
  Furniture Store API v2

---

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

• HTML5 — семантична структура сторінок
• CSS3 / SCSS — стилізація, адаптивність, retina-зображення
• JavaScript (ES6+) — логіка додатку, обробка подій, API-запити
• Async/Await — робота з асинхронними запитами
• Бібліотеки:
  • iziToast — сповіщення про події
  • Swiper.js — слайдер для відгуків
  • Accordion.js — FAQ акордеон
  • Raty.js — відображення рейтингу

---

📱 Адаптивність

Верстка адаптивна під такі розміри:

• Mobile: 375px+
• Tablet: 768px+
• Desktop: 1440px+

---

🚀 Основний функціонал

🔹 Header

• Логотип, меню навігації, бургер-меню;
• Плавний перехід до секцій;
• Блокування скролу при відкритому меню.

🔹 Hero Section

• Заголовок, підзаголовок, кнопка “Що про нас думають” (якір до відгуків).

🔹 Furniture List

• Отримання меблів із бекенду /furniture;
• Показ 8 карток при старті;
• Фільтрація за категоріями /categories;
• Кнопка “Показати ще” для пагінації;
• Модальне вікно “Детальніше” з інформацією про меблі;
• Відображення назви, кольору, ціни, рейтингу.

🔹 About Us

• Зображення, заголовок і текст про компанію.

🔹 Popular Products Section (“Популярні товари”)

• Отримання списку популярних товарів із бекенду /furniture?type=popular;
• Навігаційні кнопки та пагінація;
• Модальне вікно “Детальніше” з інформацією про меблі та з подальшим перходом до форми замовлення;
• Реалізація через Swiper.js.

🔹 FAQ Section

• Акордеон зі списком запитань/відповідей.

🔹 Feedback Section

• Слайдер відгуків користувачів /feedbacks;
• Оцінки “зірочками”, навігаційні кнопки, пагінація;
• Реалізація через Swiper.js.

🔹 Модальні вікна

Деталі меблів:

• Галерея зображень, опис, ціна, розміри, кольори;
• Кнопка “Перейти до замовлення”.

Форма замовлення:

• Поля: ім’я, телефон, коментар;
• POST-запит /orders з даними користувача;
• Валідація форми та сповіщення про результат через iziToast.

🔹 Footer

• Логотип, навігація, соцмережі (YouTube, Instagram, Facebook);
• Посилання відкриваються у новій вкладці з rel="noopener noreferrer".

---

🧠 Оптимізація та UX

• Курсор змінюється при наведенні на клікабельні елементи;
• Відсутні непередбачені помилки в консолі;
• Всі зображення оптимізовані для Retina (2x);
• Під час запитів показується лоадер;
• Помилки запитів обробляються і виводяться через iziToast.

---

📦 Деплой

Сайт задеплоєно на Github:
🔗 [https://alinaslp.github.io/QuantumJS/]

---

👨‍💻 Команда проєкту

Командна робота студентів курсу Fullstack Developer (GoIT):

Team lead: Alina Slipenka

Scrum master: Alisa Pagan

Developer 1: Alina Yashchenko

Developer 2: Vitalii Ivashchenko

Developer 3: Anastasiia Melnyk

Developer 4: Dasha Kazarina

Developer 5: Tetiana Shcherbyna

Developer 6: Tetiana Kovpak

Developer 7: Mykhailo Pyroh

---

🧾 Ліцензія

Цей проєкт є навчальним і розповсюджується під ліцензією MIT.
Використання коду дозволене з посиланням на авторів та навчальний курс GoIT.