An UI clone of Spotify Web with login by Spotify API to display public user data, such as favorite songs, album, playlists, artists and etc.
- React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
- React Hooks - A new addition in React 16.8. That allows to use state and other React features without writing a class.
- React Router - A declarative routing for React applications.
- Axios - A promise based HTTP client for the browser and node.js.
- Spotify API - Official Spotify API based on REST principles, that return JSON metadata about music artists, albums, and tracks, directly from the Spotify Data Catalogue.
- SCSS - The most mature, stable, and powerful professional grade CSS extension language in the world.
- Cookies - Small piece of data stored on the user's computer by the web browser. That allows data persistence even after refreshing the page.
Demonstration online by GitHub Pages on this link.
1 - Get a free Spotify API Key here.
2 - Create a file in the root folder named .env and type:
REACT_APP_API_KEY=<your-key-here>
REACT_APP_REDIRECT_URI=<your-redirect-uri> // Ex: http:https://localhost:3000/clone-spotify-web-react/login
Note that the "/login" path at the end of the redirect URI is required.
3 - Then with NPM install the packages and run the localhost server:
npm install
npm run start
1 - Following the installation steps but add these other environment variables in the .env file:
REACT_APP_API_KEY_PROD=<your-key-here>
REACT_APP_REDIRECT_URI_PROD=<your-key-here>
2 - And then with NPM run the build script:
npm run build
This project is licensed under the MIT License - see the LICENSE.md file for details