Spotify Clone

Welcome to the Spotify Clone repository! This project is a personal exercise aimed at practicing and improving my skills with various web technologies. The goal is to recreate a simplified version of Spotify, focusing on building a functional and visually appealing interface.

Project Overview

This project involves cloning the core features of Spotify using the following technologies:

• React: For building the user interface and handling application state.
• HTML: For structuring the content.
• CSS (Tailwind CSS): For styling the application with utility-first CSS.
• Svelte: For creating interactive components and experimenting with reactive programming.
• Astro: For integrating the different parts of the application and optimizing the build process.

Features

• Home Page: Display featured playlists, albums.
• Search Functionality: Allow users to search for songs, albums, and artists.
• Playback Controls: Implement basic playback controls (play, pause, next, previous).

Tech Stack

• Frontend:
  • React: To build the main user interface and manage application state.
  • Tailwind CSS: For responsive and customizable styling.
  • Svelte: For creating reusable and reactive components.
  • Astro: To manage the integration of React and Svelte components and optimize the final build.
  • Zustand: For persisting and synchronizing the state of the played music across the application.

Getting Started

To get started with the project, follow these steps:

1. Clone the Repository:

   git clone https://github.com/sergio-tr/spotify-clone.git
   
   cd spotify-clone
   
   npm install
   
   npm start

Project Structure

• src/: Contains all the source code.
  • components/: Reusable React and Svelte components.
  • pages/: Astro pages and layouts.
  • styles/: Tailwind CSS configuration and global styles.
• public/: Static assets like images and fonts.
• astro.config.mjs: Astro configuration file.
• package.json: Project dependencies and scripts.

Future Enhancements

• User Authentication: Integrate a real authentication system.
• Recommended tracks: Implement a way of recommending music according to each user potential wishes.
• Responsive Design: Ensure the application is fully responsive on all devices.
• API Integration: Connect to a real music API for dynamic content.

Contributing

Feel free to contribute to this project! Here’s how you can help:

1. Fork the Repository.
2. Create a New Branch for your changes.
3. Commit Your Changes with clear messages.
4. Push Your Branch and create a pull request.

Acknowledgements

• Spotify Design for design inspiration.
• Tailwind CSS for utility-first CSS styling.
• React and Svelte for their powerful frameworks.
• Astro for integrating and optimizing the build process.

Thank you for checking out the Spotify Clone repository! Feel free to explore the code, open issues, and suggest improvements. Happy coding! 😊