🎧 ArtistsHub

ArtistsHub is a responsive web application for exploring global music artists. Users can search by name, filter by genre, read biographies, and browse albums and tracks. Built as part of the GoIT Full Stack Bootcamp.

🔗 Live Demo

🌐 View Project

---

📌 About the Project

ArtistsHub helps users discover musical artists from around the world. It features an accessible and responsive interface with a focus on usability, search and filtering capabilities, and modern design.

Key objectives:

• Practice real-world collaboration
• Use modern front-end tools and libraries
• Follow accessibility, SEO, and responsive design best practices
• Apply MVP architecture

---

🎨 Design Prototype

🎨 View Figma Design

---

⚙️ Technologies Used

• HTML5, CSS3
• JavaScript (ES6+)
• Vite
• Axios
• TUI Pagination
• Splide.js (carousel)
• Prettier
• Git & GitHub
• GitHub Pages

---

✨ Features

• 🔍 Search and sort artists by name
• 🎶 Filter artists by genre
• 🧠 View detailed artist biographies
• 💿 Browse albums and tracklists with YouTube integration
• 📦 Dynamic pagination for artist results
• 💬 Testimonials section with slider
• 🔄 Loader and modals with backdrop, close button, and ESC support
• 🎨 Responsive layout: Mobile / Tablet / Desktop (320px / 768px / 1440px)
• ⚠️ Error handling and messages
• 🔒 Scroll lock on modal open
• 🧩 Component-based code structure (MVP)

---

🛣️ Roadmap

• Add user authentication (login/register)
• Save favorite artists
• Display recently viewed artists
• Enable feedback submission to backend
• Add skeleton loaders to improve perceived performance

---

👥 Team Members

👥 Team Members

Name	GitHub Username	Role(s)	Responsibilities
Vitalii Mieliet	vitalii-mieliet	Team Lead, Developer	Project deployment, code review, API module, refactoring
Valeriia Dumikh	RozLera	Scrum Master, Developer	About Us section (HTML/CSS)
Mykola Bubriak	Nicolae24	Developer	Reviews section (HTML/CSS/JS)
Dmytro Severyn	dlmak1	Developer	Header, footer, mobile menu (HTML/CSS/JS)
Andrii Lesnikov	AndriiLesnicov	Developer	Artist section (HTML/CSS/JS)
Oleksii Yakovliev	Oleksii-fullstack	Developer	Modal artist details (HTML/CSS/JS)
Vladyslav Prokopii	prokopiy203	Developer	Hero section, filter form (HTML/CSS/JS)

---

🚀 Getting Started

git clone https://github.com/vitalii-mieliet/artists-hub.git
cd artists-hub
npm install
npm run dev

⚠️ The index.html is located inside the src folder. The public folder is also under src.

---

📄 License

MIT