This is a Spotify Clon made with Astro and using Web Transitions
Do you love it?, Please give me a star! 🌟
This project is a Spotify clone developed using Astro, which replicates the main functionalities of the original aplication: music playback, skipping tracks forwar and backward, adjusting the volume up and down, music paylist, and the cherry on the cake... Web Transitions!
It is base on a project created by midudev but adapted to match Spotify's latest interface (at the time of development) and includes some additional features, such as scrolling through songs and the original behavior of Spotify. For instance:
- Add functionalit to skip tracks forwar and backward.
- Clicking the back button during the first few seconds of a song changes to the previous track, but after the initial seconds, the back button will simply restart the current song.
- The song switches to the next one when it ends.
This project uses Astro, React, some Svelt code, TailwindCSS and Zustand for the global state.
- Clone this repository
- Install the dependencies:
npm i- Execute the project:
npm run dev- You are ready for coding!
¡As simple as that!
When you open the project, you'll find something like this:
/
├── public/
│ ├── fonts/
│ ├── music/
│ └── favicon.ico
├── src/
│ ├── components/
│ ├── icons/
│ ├── layouts/
│ │ └── Layout.astro
│ ├── lib/
│ │ ├── colors.ts
│ │ └── data.ts
│ ├── pages/
│ │ ├── api/
│ │ ├── playlist/
│ │ └── index.astro
│ └── store/
│ └── playerStore.js
└── package.json
Here are the datails of the structure:
| Section | Description |
|---|---|
public/ |
Stores the favicon, the fonts and the songs |
src/components/ |
Contains the astro and react components |
src/layouts/ |
Contains the main layout Layout.astro |
src/pages/ |
Contains the index, the playlist pages and the API |
src/lib/ |
Contains colors.ts with the used colors and data.ts with the song's info |
src/store/ |
Here you can find the global state playerStore.js of zustand |
The most important dependencies are listed here:
This project is open source, so feel free to clone it, edit it and use it.
If you have any suggestion or improvement, you can contribute to this project in the following way:
- Fork this project
- Clone your fork with:
git clone <URL of your fork>`- Add the original repository as remote:
git remote add upstream <URL of the original repo>- Create your branch, make your changes and make a push them to your branch
- Open a Pull Request (PR)
Ensure that your commits are clean and descriptive
If this project was helpful to you you or you liked it, please give me a star!, I would be very grateful! :D
See you coding 👋
