🎧 Spotify Clone

A Spotify-inspired music player interface built using Astro and modern frontend technologies.
The application displays playlists, songs, and a music player UI with dynamic interactions.

🌐 Live Demo

https://spotify-clone-app-vert-five.vercel.app/

📌 About the Project

This project recreates a simplified Spotify-like interface using Astro as the main framework and combining multiple component technologies such as React and Svelte.

The application includes:

• A sidebar navigation menu
• Playlist cards
• A music player interface
• Song tables
• Dynamic playlist pages

The goal of this project is to practice component-based architecture and modern frontend frameworks.

✨ Features

• Spotify-like UI
• Dynamic playlist pages
• Music player interface
• Sidebar navigation
• Playlist cards
• Responsive layout
• Component-based architecture

📸 Screenshot

https://spotify-clone-app-vert-five.vercel.app/

Main interface

Playlist page

Music player

Responsive layout

🛠️ Technologies

• Astro
• React
• Svelte
• TypeScript
• JavaScript
• CSS

🏗️ Architecture

The project is built using Astro as the main framework, combining different component technologies to create an interactive UI.

Main technologies

• Astro → Handles routing, layouts, and page rendering.
• React → Used for interactive components such as the music player.
• Svelte → Used for lightweight reactive UI elements.
• TypeScript → Provides type safety and better maintainability.

Application structure

The application follows a component-based architecture:

• Layouts → Define the general page structure.
• Pages → Handle routing and dynamic pages (e.g., playlists).
• Components → Reusable UI elements like the player, sidebar, and playlist cards.
• Store → Manages global state for the music player.
• Styles → Global styling and UI appearance.

Data flow

1. Playlist data is stored in the project data files.
2. Pages load the playlist information dynamically.
3. Components render the UI elements.
4. The player state is managed using a central store.

🚀 Installation

Clone the repository:

git clone https://github.com/yourusername/spotify-clone-project.git

Go into the project folder:

cd spotify-clone-project

Install dependencies:

npm install

Run the development server:

npm run dev

Then open:

http://localhost:4321

📚 What I Learned

Through this project I practiced:

• Building applications with Astro
• Creating reusable components
• Mixing React, Svelte and Astro components
• Managing UI state
• Structuring modern frontend projects
• Building a music player interface

🚧 Future Improvements

• Add real audio playback
• Integrate Spotify API
• Add search functionality
• Improve mobile responsiveness
• Implement authentication

👩‍💻 Author

Sandra González

Junior Web Developer

GitHub:
https://github.com/sandragonzalezdiaz1