Skip to content

🎵 Swipe through random songs with your thumb by integrated Spotify API.

Notifications You must be signed in to change notification settings

qwrtsdev/swipify-react

Repository files navigation

Swipify Logo

Discord GitHub last commit X (formerly Twitter) Follow

ko-fi

Swipify is an open-source music shuffler.
inspried from Tinder and Swipefy but made completely from scratch!
for people who feeling bored with their every day song.

Note

This project was my first web application for educational and made during rush, thus it was not taking serious like it should do. You might find it wacky and facing some issues during use.

Note

This project is now planned to be continue in the future, please stay tuned for any further updates.

✅ Features

  • Tinder-alike Card Swipe & Buttons
  • Infinite Song Generation
  • Song Previews
  • Basic Authentication

📝 Prequisites

📦 Installation

Run this command to install all of dependencies

yarn add

⚙ Setup

Caution

For beginners: please don't skip and follow the instructions carefully to making sure nothing is broken. (sorry for the inconvenience.)

  • Run yarn run dev command to start the server.
  • Go to Spotify API Dashboard and create an application.
  • Go to application's settings and copy Client ID and Client Secret.
  • Create an .env file and enter :
    VITE_SPOTIFY_CLIENT="<your client id goes here>"
    VITE_SPOTIFY_SECRET="<your client secret goes here>"
    VITE_SPOTIFY_ACCESS="<read the next part>"
    
  • Request an access key (in this situation it was called SPOTIFY_ACCESS) by using tools such as Postman or cURL and using this template of script :
    - https://accounts.spotify.com/api/token (as the endpoint)
    - application/x-www-form-urlencoded (as header called: Content-Type)
    - client_credentials&client_id=<SPOTIFY_CLIENT>&client_secret=<SPOTIFY_SECRET> (as parameter called: grant_type)
    
  • You'll get a response from Spotify in this format :
    {"access_token":"<SPOTIFY_ACCESS>","token_type":"Bearer","expires_in":3600}
    
  • Open your .env file and fill out the <SPOTIFY_ACCESS> section with the key you got from the response.
  • Go to Google Firebase Console and create a project.
  • Go to Authentication section and setup how you want.
  • Open your .env file and enter :
    VITE_FB_APIKEY=""
    VITE_FB_AUTHDOMAIN=""
    VITE_FB_PROJECTID=""
    VITE_FB_STORAGE=""
    VITE_FB_MESSAGE=""
    VITE_FB_APPID=""
    VITE_FB_MID=""
    
  • Fill out all the keys to enable the Authentication (Some keys just not necessary to use but keep them as they might help. Read full documentation about Firebase Authentication here and you also can remove the authentication processes from the system anytime. If you know how.)

💬 Community

The FullstackHub community is very welcomed for everyone! Where you can ask questions, sharing knowledges and ideas about web development or programming-related topics.

To chat with other community members. You can join the Discord server.

About

🎵 Swipe through random songs with your thumb by integrated Spotify API.

Topics

Resources

Stars

Watchers

Forks

Sponsor this project