https://github.com/mynameiscarsten/react-spotify-app

React web application based on Spotify API. The app allows users to search the Spotify library, create a custom playlist, then save it to their Spotify account.
https://github.com/mynameiscarsten/react-spotify-app

react spotify-api

Last synced: 3 months ago
JSON representation

React web application based on Spotify API. The app allows users to search the Spotify library, create a custom playlist, then save it to their Spotify account.

• Host: GitHub
• URL: https://github.com/mynameiscarsten/react-spotify-app
• Owner: MyNameIsCarsten
• Created: 2023-09-25T13:28:01.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-28T18:26:22.000Z (over 1 year ago)
• Last Synced: 2024-12-29T07:15:15.393Z (5 months ago)
• Topics: react, spotify-api
• Language: JavaScript
• Homepage: https://spotapify.netlify.app/
• Size: 1.73 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Spotify Music Web Application

## Overview

I've created a web application using React.js that allows users to interact with the Spotify API. 

This project has helped me gain a strong understanding of React.js and how to work with external APIs for making HTTP requests and managing user accounts securely.

### Searching for tracks

![track view](./track-view.jpg)

### Adding to Playlist

![playlist view](./playlist-view.jpg)

Clicking on `Save to Spotify` will create the Playlist and reset the playlist as well as its name.

### Final Playlist

![spotify view](./spotify-view.jpg)

## Key Features

Here are some of the key features and achievements of this project:

1. **React.js Mastery:** Throughout this project, I've deepened my understanding of React.js, including how to create components, manage state, and build a responsive and interactive user interface.

2. **Spotify API Integration:** I've successfully integrated the Spotify API into my web application, enabling users to search for tracks, add them to their playlist, and create new playlists.

3. **User Authentication:** To provide a secure user experience, I've implemented user authentication, allowing users to log in to their Spotify accounts and interact with their music library.

## Technologies Used

- React.js: I've utilized the React library to build the frontend of my web application, creating a dynamic and responsive user interface.

- Spotify API: By integrating the Spotify API, I've enabled users to access and manipulate their Spotify music library directly within the application.

## Project Highlights

### Creating Components

I've structured my project using components, breaking down the user interface into smaller, reusable pieces. 

This approach made it easier to manage and maintain the application.

### Spotify API Interactions

I've leveraged the Spotify API to search for tracks, retrieve user data, create playlists, and add tracks to these playlists. 

This required understanding how to make authenticated HTTP requests to external APIs.

### User Authentication

Implementing user authentication was a significant achievement. 

Users can securely log in to their Spotify accounts, granting the application access to their music library while ensuring data privacy.

![start view](./start-view.jpg)

## Conclusion

In summary, this project has been a valuable learning experience, helping me master React.js and showcasing my ability to integrate external APIs and implement user authentication. 

I'm proud of the music web application I've created and the skills I've gained along the way.