ArtistsHub

🌐 Виберіть для Вас комфортну мову

🇺🇦 Українська | 🇬🇧 English | 🇩🇪 Deutsch

📸 Скріншот проекту

👥 Контриб'ютори

---

📌 Назва проєкту

ArtistsHub — адаптивний веб-додаток (лендинг) за макетом Figma. Командний проєкт GoIT Fullstack (JavaScript, REST, responsive).

---

🎯 Про проєкт і яку задачу він вирішує

• Про проєкт: односторінковий адаптивний сайт, зібраний з HTML-partials та модульних CSS-файлів, згідно з макетом ArtistsHub (Figma).
• Задача: презентація платформи (хабу) для артистів: головний екран, блок виконавців, «Про нас», відгуки та модальне вікно з деталями. Реалізовано mobile-first, семантична розмітка, валідний HTML/CSS/JS, зручний запуск та збірка через Vite.

---

🛠 Технології

Категорія	Стек
Розмітка	HTML5, семантичні теги
Стилі	CSS3, modern-normalize, mobile-first, Stylelint
Скрипти	JavaScript (ES modules), Axios, Swiper, Raty.js, css-star-rating
Збірка	Vite, PostCSS (sort media queries), vite-plugin-html-inject, vite-plugin-full-reload
Іконки та зображення	IcoMoon (sprite.svg), SVGOMG (мініфікація SVG), Squoosh (WebP)
Інше	Code Guide, валідатори W3C / JSHint

---

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

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

   cd goit-fullstack-team-javascript-web-rest-responsive-app

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

   npm install

3. Запустити режим розробки:

   npm run dev

   Відкриється браузер (наприклад, http://localhost:5173/).

4. Зібрати продакшн-версію:

   npm run build

   Результат у папці dist/.

5. Переглянути збірку локально:

   npm run preview

---

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

Секції та файли узгоджені з макетом ArtistsHub (Figma):

goit-fullstack-team-javascript-web-rest-responsive-app/
├── src/
│   ├── css/
│   │   ├── styles.css     
│   │   ├── reset.css
│   │   ├── base.css
│   │   ├── container.css
│   │   ├── header.css
│   │   ├── hero.css
│   │   ├── about.css
│   │   ├── artists.css
│   │   ├── feedback.css
│   │   ├── artist-modal.css
│   │   └── footer.css
│   ├── img/
│   │   ├── about-us/
│   │   ├── feedback/
│   │   └── hero/
│   ├── js/
│   │   ├── api-artists.js
│   │   ├── artist-modal.js
│   │   ├── artists.js
│   │   ├── config.js
│   │   ├── feedback.js
│   │   ├── header-mob-menu.js
│   │   └── hero.js
│   ├── partials/
│   │   ├── header.html
│   │   ├── hero.html
│   │   ├── about.html
│   │   ├── artists.html
│   │   ├── feedback.html
│   │   ├── artist-modal.html
│   │   └── footer.html
│   ├── public/
│   │   ├── favicon.svg
│   │   ├── logo.svg
│   │   └── img/
│   │       └── sprite.svg
│   ├── index.html
│   └── main.js
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .stylelintignore
├── package.json
├── package-lock.json
├── vite.config.js
├── README.md
├── README.en.md
└── README.de.md

Відповідність секцій макету:

Секція макету	Partial	CSS	JS / залежності
Header	header.html	header.css	header-mob-menu.js, sprite.svg
Hero	hero.html	hero.css	hero.js, sprite.svg
About	about.html	about.css	—
Artists	artists.html	artists.css	artists.js, api-artists.js, config.js
Feedback	feedback.html	feedback.css	feedback.js (Swiper, Raty.js), sprite.svg
Artist Details Modal	artist-modal.html	artist-modal.css	artist-modal.js, api-artists.js, config.js
Footer	footer.html	footer.css	sprite.svg

---

👥 Учасники

№	Учасник	GitHub	Роль / Секція
1	Микола Вутов	VuToV-Mykola	Team Lead: goit-fullstack-team-javascript-web-rest-responsive-app, Hero, About, Footer
2	Володимир Костік	VladimirKostik	Scrum Master: Trello, Header
3	Еліна Резніченко	EllieReznichenko	Backend (api-artists.js)
4	Олександр Шеверя	Shevk1n	Feedback (Swiper.js, raty-js)
5	Світлана Токаренко	Svetlana-see	Feedback (Swiper.js, raty-js)
6	Маріам Падалка	MariamPadalka	Artist Modal (асинхронна робота з API, динамічний рендеринг)
7	Тетяна Зінов'єва	TaliaZcoder	Artists (асинхронна робота з API, динамічний рендеринг)
8	Олександр Чернишов	AlPetrChernyshov	Artists (асинхронна робота з API, динамічний рендеринг)

---

✅ Валідація та якість коду

• HTML: validator.w3.org
• CSS: jigsaw.w3.org/css-validator
• JavaScript: jshint.com

---

🔗 Супутня інформація та посилання

• Макет проєкту: ArtistsHub (Figma)

• ТЗ: Google Таблиці — завдання та посилання

• Матеріали до командного проєкту (JS Fullstack): Презентація Google Slides

Посилання з презентації командного проєкту:

• Організація роботи в команді: скринкаст Trello, інструкція Trello, принципи роботи в команді — плейлист, презентація принципів, Scrum Poker

• Планування: план роботи над проєктом

• GitHub і репозиторій: шаблон проєкту (vanilla-app-template), скринкаст «Робота з GitHub + термінал», плейлист «Як працювати з репозиторієм»

• Технічні вимоги: документ вимог, як здати ДЗ в LMS

• Захист проєкту: чек-лист та шаблони презентації

• Редактори README: readme.so, dillinger.io

• Stylelint Rules

• Code Guide