Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/m-kupiec/music-app
Web application (TypeScript, React) leveraging the Spotify Web API for music library management
https://github.com/m-kupiec/music-app
frontend oauth2 pkce react spotify-api tailwindcss typescript
Last synced: 17 days ago
JSON representation
Web application (TypeScript, React) leveraging the Spotify Web API for music library management
- Host: GitHub
- URL: https://github.com/m-kupiec/music-app
- Owner: m-kupiec
- License: mit
- Created: 2024-09-30T15:23:31.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-30T09:51:56.000Z (2 months ago)
- Last Synced: 2024-11-30T10:29:56.082Z (2 months ago)
- Topics: frontend, oauth2, pkce, react, spotify-api, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 246 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Spotify Client
A TypeScript and React web application leveraging the Spotify Web API for music library management. For the latest development updates, as well as detailed requirements and acceptance criteria, refer to the [project board](https://github.com/users/m-kupiec/projects/3).
## Quick Start
1. Log in to [Spotify for Developers](https://developer.spotify.com/) and open your [Dashboard](https://developer.spotify.com/dashboard). Create a new app by following [these instructions](https://developer.spotify.com/documentation/web-api/concepts/apps).
2. Clone or download this repository.
3. Navigate to the project directory and run `npm install` to install dependencies.
4. Open `src/config.ts` and add your Spotify app's _Client ID_ and _Redirect URI_, which you can find on your application's Dashboard page.
5. Start the development server with `npm run dev`.
## Installation
### Registering Your App on Spotify
1. Log in to [Spotify for Developers](https://developer.spotify.com/) and navigate to your [Dashboard](https://developer.spotify.com/dashboard).
2. Create a new app by following the steps in [Spotify's app creation guide](https://developer.spotify.com/documentation/web-api/concepts/apps).
### Installing Dependencies
**Note:** The projects requires Node.js version 18+ or 20+.
After cloning or downloading the repository, navigate to the project directory and install the npm packages:
```bash
npm install
```
### Configuring the Application
Update `src/config.ts` with your Spotify _Client ID_ and _Redirect URI_ from the Spotify Dashboard.
Alternatively, if you prefer to keep `appConfig.spotifyAuth.clientId` as `import.meta.env.VITE_CLIENT_ID`, you can create a `.env.local` file in the project's root directory with the following content:
```bash
VITE_CLIENT_ID=
```
Ensure that the port in `appConfig.spotifyAuth.redirectUrl` matches the port used by Vite on your local machine (`5173` by default).
## Usage
### Starting the Development Server
Run Vite's development server:
```bash
npm run dev
```
### Previewing the Production Build
To preview the production build locally (after running the `build` script):
```bash
npm run preview
```
### Building the Project
To run the TypeScript compiler and build the project with Vite:
```bash
npm run build
```
## License
This project is licensed under the [MIT License](https://github.com/m-kupiec/music-app/blob/main/LICENSE.txt).