Spotify Clone

Spotify Clone

Clon de la aplicación Spotify, desarrollado con fines académicos, permitiendo la reproducción de música, creación de listas de reproducción y búsqueda de canciones, emulando la experiencia de la plataforma original

📝 Table of Contents

• 📝 Table of Contents
• 🧐 Problem Statement
• 💡 Solution
• 🚀 How Does It Work?
• 🏁 Getting Started
  • 1️⃣ Clonar el repositorio
  • 2️⃣ Instalar dependencias
  • 3️⃣ Iniciar el servidor de desarrollo
• 🎨 Screenshots & Previews
  • 🏠 Página de inicio
  • 🎤 Artistas populares
  • 📑 Página de Playlist
  • 📊 Visualización de Métricas
• 📐 Project Structure
• ⛏️ Technology Stack
• ✍️ Authors

🧐 Problem Statement

El objetivo de este proyecto fue desarrollar un clon de la aplicación Spotify, replicando sus funcionalidades básicas, como la búsqueda y reproducción de música, la creación y gestión de listas de reproducción, y el acceso a contenido musical.

El desafío consistió en emular la experiencia de usuario de Spotify, manejando una navegación fluida con animaciones entre páginas, y asegurando un diseño responsive para garantizar su adaptabilidad a diferentes dispositivos. Se buscó crear una plataforma intuitiva, que ofrezca una experiencia de streaming de música eficiente y atractiva.

💡 Solution

Para optimizar la experiencia del usuario, se recreó el clon de Spotify usando tecnologías modernas. La aplicación permite la búsqueda y reproducción de música, la creación de listas de reproducción y el guardado de playlists favoritas utilizando local storage.

Además, se implementó la Web Audio API del navegador para la reproducción de audio y se diseñó una interfaz responsive para adaptarse a diferentes dispositivos. La navegación fluida y las animaciones entre páginas mejoran la interacción y hacen la experiencia más agradable.

🚀 How Does It Work?

• Los usuarios pueden buscar y reproducir música de manera sencilla.
• La plataforma permite crear y gestionar listas de reproducción, que se guardan en local storage para mantenerlas disponibles en futuras sesiones.
• La Web Audio API del navegador se utiliza para la reproducción de sonido, con control total sobre el volumen y la calidad de la reproducción.
• Los usuarios pueden guardar sus playlists favoritas, permitiendo un acceso rápido a su música preferida en cualquier momento.
• La interfaz es responsive, adaptándose a diferentes dispositivos y pantallas.
• La navegación entre las diferentes secciones es fluida, mejorada con animaciones que hacen la experiencia más interactiva y atractiva.

🏁 Getting Started

1️⃣ Clonar el repositorio

Abre una terminal y ejecuta:

git clone https://github.com/Nekolas777/spotify-clone.git
cd spotify-clonbe

2️⃣ Instalar dependencias

Instala las dependencias del proyecto ejecutando:

npm install

3️⃣ Iniciar el servidor de desarrollo

Inicia el servidor de desarrollo ejecutando:

npm run dev

Ahora puedes abrir tu navegador y navegar a http://localhost:4321 para ver la aplicación en funcionamiento.

🎨 Screenshots & Previews

🏠 Página de inicio

🎤 Artistas populares

📑 Página de Playlist

📊 Visualización de Métricas

📐 Project Structure

.
└── src
    ├── assets
    │   # Contiene recursos estáticos como imágenes, fuentes y estilos globales.
    ├── components
    │   # Componentes reutilizables de la interfaz de usuario (UI) como botones, tarjetas, formularios, etc.
    ├── data
    │   # Archivos y datos estáticos, como archivos JSON, Markdown, o constantes que contienen datos de la aplicación.
    ├── icons
    │   # Contiene los íconos utilizados en la aplicación (pueden ser SVGs, fuentes de íconos, etc.).
    ├── layouts
    │   # Componentes de diseño que estructuran la página como header, footer, sidebar, etc.
    ├── pages
    │   # Páginas que corresponden a diferentes rutas de la aplicación.
    │   └── index.astro
    │   └── about.astro
    │   └── blog.astro
    │   └── [slug].astro   # Páginas dinámicas con rutas parametrizadas.
    ├── router
    │   # Si usas rutas personalizadas, configuraciones de la navegación.
    ├── store
    │   # Gestión de estado global de la aplicación si usas algo como @astro/store o cualquier biblioteca de estado.
    ├── styles
    │   # Archivos CSS, SCSS o cualquier archivo de estilo global de la aplicación.
    ├── utils
    │   # Funciones y helpers reutilizables en toda la aplicación.
    └── astro.config.mjs
        # Configuración global de Astro.

⛏️ Technology Stack

• Astro – Framework moderno para construir sitios rápidos y ligeros, con soporte para múltiples frameworks de componentes.
• React – Biblioteca de JavaScript para construir interfaces interactivas y reutilizables.
• Tailwind CSS – Framework de CSS con clases utilitarias para diseñar interfaces rápidas y responsivas.
• Zustand – Biblioteca ligera para la gestión de estado global en aplicaciones React.
• Swup – Biblioteca para transiciones fluidas entre páginas sin recargar el navegador (page transitions).

✍️ Authors

• @Nekolas777