Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sebastianterleira/astro-spotify-clone
A Spotify clone made with Astro.js + Spotify API + View Transitions 🚀
https://github.com/sebastianterleira/astro-spotify-clone
astro spotify-api view-transitions
Last synced: 9 days ago
JSON representation
A Spotify clone made with Astro.js + Spotify API + View Transitions 🚀
- Host: GitHub
- URL: https://github.com/sebastianterleira/astro-spotify-clone
- Owner: sebastianterleira
- Created: 2023-11-13T22:28:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-27T22:45:22.000Z (3 months ago)
- Last Synced: 2024-08-28T16:35:21.383Z (3 months ago)
- Topics: astro, spotify-api, view-transitions
- Language: Astro
- Homepage: https://astro-spotify-clone-galanga.vercel.app/
- Size: 183 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spotify Clone with Astro v4 - 🎵🎶
This is a Spotify clone built with Astro, using the Spotify Web API for authentication and retrieving playlists related to the logged-in user. The View Transitions also don't lag behind, featuring fading transitions between pages, state persistence, and more.
## Getting Started
### Manual Installation
Here are the steps to execute the project:
1. Clone the repo
```sh
git clone [email protected]:sebastianterleira/astro-spotify-clone.git
```
2. Install NPM packages
```sh
npm install
```
3. Run the app
```sh
npm run dev
```
## Environments
You need create a `.env` file to be able work with environment variable, you can see this file the example [(.env.example)](./.env.example)
## Authentication account for the app
I do this because Spotify has my application in 'developer mode,' and I have to enable the account for each user who wants to log in, with a limit of only 25 users. That's why I provide a sample Spotify account for them to use the app. However, if they want to log in with their own credentials, they should run the project locally, setting up a Spotify application to configure the environment variables.
Email:
```sh
[email protected]
```
Password:
```sh
123456!@ST
```
## Learning Resources
- [Astro JS crash course](https://www.youtube.com/watch?v=e-hTm5VmofI)
- [Astro JS in 100 seconds](https://www.youtube.com/watch?v=dsTXcSeAZq8)
- [Astro JS docs](https://astro.build/)
- [Aprende Astro 3 desde cero](https://www.youtube.com/watch?v=RB5tR_nqUEw)
- [Portafolio con Astro v4](https://www.youtube.com/watch?v=HEMvsJTBweY)