update envs

.env.dist

@@ -1,2 +1,2 @@
-REACT_APP_CLIENT_ID=
-REACT_APP_REDIRECT_ID=http://localhost:3000
+REACT_APP_SPOTIFY_CLIENT_ID=
+REACT_APP_SPOTIFY_REDIRECT_URL=http://localhost:3000

Dockerfile

@@ -1,6 +1,6 @@
 
-ARG REACT_APP_CLIENT_ID
-ARG REACT_APP_REDIRECT_ID=http://localhost:3000/
+ARG REACT_APP_SPOTIFY_CLIENT_ID
+ARG REACT_APP_SPOTIFY_REDIRECT_URL=http://localhost:3000/
 
 # build environment
 FROM node:18.12 as builder

README.md

@@ -5,23 +5,21 @@
 </a>
 
 <p align="center">
-  
+
 <img src="https://img.shields.io/badge/Spotify-1ED760?style=for-the-badge&logo=spotify&logoColor=white" alt="Spotify Badge">
 <img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" alt="React Badge">
 <img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="Typescript Badge">
 <img src="https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white" alt="Redux Badge">
 
 </p>
 
-
 # 🎧 Spotify React Web Client
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > Spotify Playback requires users to authenticate with a valid Spotify Premium subscription.
 
 ![gif](https://github.com/user-attachments/assets/2077cdef-f3fa-49c9-a905-9cc9ab6629fb)
 
-
 ## 🚀 Features
 
 ⚡ **Music Playback**: Play songs in real-time using the Spotify Playback SDK.
@@ -52,13 +50,10 @@
 
 🎵 <a href="https://developer.spotify.com/documentation/web-playback-sdk/">Spotify Playback SDK</a>: For real-time music playback control within the web client.
 
-
 ## 📸 Screenshots
 
 More in images [folder](https://github.com/francoborrelli/spotify-react-web-client/tree/main/images).
 
-
-
 <div align="center">
     <table >
      <tr>
@@ -103,8 +98,8 @@ To run this project locally, follow these steps:
 4. Set up your Spotify Developer account and create a [new app](https://developer.spotify.com/dashboard/applications) to obtain your **Client ID** and **Redirect URI**. Add these to an `.env` file in the root of your project:
 
    ```
-   REACT_APP_SPOTIFY_CLIENT_ID=your-client-id
-   REACT_APP_REDIRECT_URI=http://localhost:3000/callback
+   REACT_APP_SPOTIFY_CLIENT_ID=<your id>
+   REACT_APP_SPOTIFY_REDIRECT_URL=<your redirect uri>
    ```
 
 5. Start the development server:
@@ -131,8 +126,3 @@ Contributions are welcome! If you have any suggestions or improvements, feel fre
 ## 📝 License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
-
-
-
-
-

src/utils/spotify/login.ts

@@ -3,8 +3,8 @@ import { getFromLocalStorageWithExpiry, setLocalStorageWithExpiry } from '../loc
 import axios from 'axios';
 
 /* eslint-disable import/no-anonymous-default-export */
-const client_id = process.env.REACT_APP_CLIENT_ID as string;
-const redirect_uri = process.env.REACT_APP_REDIRECT_ID as string;
+const client_id = process.env.REACT_APP_SPOTIFY_CLIENT_ID as string;
+const redirect_uri = process.env.REACT_APP_SPOTIFY_REDIRECT_URL as string;
 
 const authUrl = new URL('https://accounts.spotify.com/authorize');