Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 7 days ago
JSON representation

A Spotify clone made with Astro.js + Spotify API + View Transitions 🚀

Awesome Lists containing this project

README

        

# Spotify Clone with Astro v4 - 🎵🎶


![hero page](https://i.postimg.cc/wvhzm2DX/682shots-so.png)

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)

(back to top)