Командний проєкт "Меблерія"

Це лендинг для магазину меблів "Меблерія". Сайт дозволяє користувачам переглядати асортимент меблів, фільтрувати товари за категоріями, ознайомлюватися з детальною інформацією про продукт, читати відгуки та оформлювати замовлення через форму зворотного зв'язку.

Стек технологій

• HTML5
• CSS3
• JavaScript (ES6+)
• Node.js
• Vite
• Бібліотеки:
  • Axios (для взаємодії з бекендом)
  • Swiper.js (для слайдерів у секціях "Відгуки" та "Популярні товари")
  • izitoast (для спливаючих повідомлень про успішне замовлення або помилку)
  • accordion (для реалізації функціоналу в секції FAQ)
  • css-star-rating / raty-js (для відображення рейтингу у вигляді зірочок)

Утиліти

• VSCode (для розробки коду, отладки та підтримки)
• Trello (для проектування та розробки проекту)
• Figma (для роботи з дизайн-системою проекту)
• Git/GitHub (для роботи з версіями та розробкою проекту)
• Chat GPT/GitHub Copilot (використовувались, як інформаційні системи)

Структура та функціонал проєкту

Проєкт складається з наступних функціональних блоків:

• Хедер (Header): Навігація по сайту, логотип та бургер-меню для мобільних пристроїв.
• Секція "Hero": Головний екран з пропозицією та закликом до дії.
• Секція "Про нас" (About Us): Коротка інформація про компанію.
• Секція "Наші Меблі" (Furniture List): Каталог товарів з можливістю фільтрації та дозавантаження.
• Секція "Популярні товари" (Popular Products): Слайдер з найпопулярнішими товарами.
• Секція "Часті запитання" (FAQ): Акордеон з відповідями на поширені запитання.
• Секція "Відгуки" (Feedback): Слайдер з відгуками клієнтів.
• Футер (Footer): Додаткова навігація, контакти та посилання на соціальні мережі.
• Модальне вікно "Деталі товару": Детальна інформація про обраний товар.
• Модальне вікно "Замовлення": Форма для оформлення замовлення.

---

Команда та розподіл завдань

Станіслав Немченко (Team Lead)

Зона відповідальності:

• Header (Хедер): Реалізація навігації, плавного скролу до секцій, адаптивного бургер-меню, яке блокує скрол сторінки у відкритому стані та закривається по кліку на посилання, поза меню або клавішею Escape.
• Popular Products (Популярні товари): Створення секції, отримання даних з бекенду (/furniture?type=popular), реалізація слайдера карток товарів за допомогою Swiper.js з навігацією.
• Reviews (Відгуки): Розробка секції, отримання даних з (/feedbacks), реалізація слайдера відгуків за допомогою Swiper.js, відображення рейтингу "зірочками" та синхронізація з пагінацією.

Дмитро Войтович (Scrum Master)

Зона відповідальності:

• Furniture Details Modal (Модальне вікно з деталями товару): Створення модального вікна, що відкривається по кліку на картку товару. Вікно містить галерею зображень, опис, ціну, рейтинг, вибір кольору. Реалізовано закриття вікна (кнопка, клік поза вікном, Escape), блокування скролу сторінки. Кнопка "Перейти до замовлення" відкриває модальне вікно форми замовлення.

Ярослав Пронь (Developer)

Зона відповідальності:

• Hero Section (Секція Hero): Верстка та стилізація головного екрану з заголовком, описом та кнопкою "Що про нас думають", яка є якірним посиланням на секцію з відгуками.

Андрій Абросенков (Developer) & Артем Проскуровский (Developer)

Зона відповідальності:

• Furniture List Section (Секція зі списком меблів): Реалізація динамічного відображення карток товарів, отриманих з бекенду (/furniture). Розробка логіки фільтрації товарів за категоріями. Реалізація кнопки "Завантажити ще" для підвантаження наступної порції товарів.

Ліна Хацько (Developer)

Зона відповідальності:

• About Us Section (Секція "Про нас"): Верстка та стилізація секції з контентним зображенням, заголовком та описовим текстом.
• Popular Products (Популярні товари): Спільна робота над секцією.

Дар’я Цевашова (Developer)

Зона відповідальності:

• FAQ Section (Секція "Часті запитання"): Реалізація секції у вигляді акордеону, де при кліку на питання плавно розгортається відповідь. Одночасно може бути відкритою лише одна відповідь.

Марина Прушак (Developer)

Зона відповідальності:

• Feedback Section (Секція "Відгуки"): Спільна робота над секцією.
• Footer (Футер): Верстка та стилізація футера, що містить логотип, копірайт, навігацію та посилання на соціальні мережі, які відкриваються у новій вкладці.

Денис Гамзінов (Developer)

Зона відповідальності:

• Order Modal (Модальне вікно з формою замовлення): Створення модального вікна з формою (email, телефон, коментар). Реалізовано валідацію полів та відправку POST-запиту на /orders з даними форми та інформацією про товар. Інтегровано бібліотеку izitoast для показу повідомлень про успішне відправлення або помилку.

---

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

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

   git clone https://your-repo-url.com/project.git

2. Перейдіть до папки проєкту:

   cd project

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

   npm install

4. Запустіть проєкт у режимі розробки:

   npm run dev

   (або інша команда, вказана у package.json)

Після цього проєкт буде доступний за локальною адресою, вказаною у вашому терміналі (зазвичай http://localhost:xxxx).