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.
- Tinder-alike Card Swipe & Buttons
- Infinite Song Generation
- Song Previews
- Basic Authentication
Run this command to install all of dependencies
yarn add
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
andClient 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.)
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.