README.de.md

ArtistsHub

🌐 Sprache wählen

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

📸 Projektscreenshot

👥 Mitwirkende

---

📌 Projektname

ArtistsHub — responsive Web-App (Landingpage) nach dem Figma-Design. GoIT-Fullstack-Teamprojekt (JavaScript, REST, responsive).

---

🎯 Über das Projekt und welche Aufgabe es löst

• Über das Projekt: Einseitige responsive Website aus HTML-Partials und modularen CSS-Dateien gemäß dem Mockup ArtistsHub (Figma).
• Zweck: Präsentation einer Plattform (Hub) für Künstler: Hero-Bereich, Künstlerliste, „Über uns“, Feedback und ein Detail-Modal. Umgesetzt mit Mobile-First, semantischem Markup, valide HTML/CSS/JS und bequemem Start/Build über Vite.

---

🛠 Technologien

Kategorie	Stack
Markup	HTML5, semantische Tags
Styles	CSS3, modern-normalize, Mobile-First, Stylelint
Skripte	JavaScript (ES-Module), Axios, Swiper, Raty.js, css-star-rating
Build	Vite, PostCSS (Sort Media Queries), vite-plugin-html-inject, vite-plugin-full-reload
Icons & Bilder	IcoMoon (sprite.svg), SVGOMG (SVG-Minifizierung), Squoosh (WebP)
Sonstiges	Code Guide, W3C-/JSHint-Validatoren

---

🚀 Projekt starten und deployen

1. Repository klonen und in den Projektordner wechseln:

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

2. Abhängigkeiten installieren:

   npm install

3. Entwicklungsmodus starten:

   npm run dev

   Der Browser öffnet sich (z. B. http://localhost:5173/).

4. Produktions-Build erstellen:

   npm run build

   Ausgabe im Ordner dist/.

5. Build lokal ansehen:

   npm run preview

---

📁 Projektstruktur

Die Sektionen und Dateien entsprechen dem Design 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

Zuordnung Mockup → Dateien:

Mockup-Sektion	Partial	CSS	JS / Abhängigkeiten
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

---

👥 Teammitglieder

#	Mitglied	GitHub	Rolle / Sektion
1	Mykola Vutov	VuToV-Mykola	Team Lead: goit-fullstack-team-javascript-web-rest-responsive-app, Hero, About, Footer
2	Vladimir Kostik	VladimirKostik	Scrum Master: Trello, Header
3	Elina Reznichenko	EllieReznichenko	Backend (api-artists.js)
4	Oleksandr Sheveria	Shevk1n	Feedback (Swiper.js, raty-js)
5	Svitlana Tokarenko	Svetlana-see	Feedback (Swiper.js, raty-js)
6	Mariam Padalka	MariamPadalka	Artist Modal (asynchrone API, dynamisches Rendering)
7	Tetiana Zinovieva	TaliaZcoder	Artists (asynchrone API, dynamisches Rendering)
8	Oleksandr Chernyshov	AlPetrChernyshov	Artists (asynchrone API, dynamisches Rendering)

---

✅ Validierung und Codequalität

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

---

🔗 Weitere Informationen und Links

• Projekt-Mockup: ArtistsHub (Figma)
• Aufgabenstellung (TZ): Google Tabellen — Aufgaben und Links
• Materialien zum Teamprojekt (JS Fullstack): Google Slides Präsentation

Links aus der Teamprojekt-Präsentation:

• Arbeitsorganisation im Team: Trello-Screencast, Trello-Anleitung, Playlist Teamprinzipien, Präsentation Prinzipien, Scrum Poker

• Planung: Projektarbeitsplan

• GitHub und Repository: Projektvorlage (vanilla-app-template), Screencast „GitHub + Terminal“, Playlist „Mit Repo arbeiten“

• Technische Anforderungen: Anforderungsdokument, Abgabe in LMS

• Projektverteidigung: Checkliste und Vorlagen für Präsentation

• README-Editoren: readme.so, dillinger.io

• Stylelint Rules

• Code Guide