Stay Tuned Radio

An awesome a music-sharing platform, designed to foster community engagement and discovery.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Built With
3. Contact
4. Getting Started
   • Prerequisites
   • Installation
5. Usage
6. Roadmap
7. Contributing
8. License
9. Acknowledgments

About The Project

We like to share our music and we like to stream coding music while we work. But we don’t have our own radio station to share and discover music that resonates with the community.

Introducing our app, a music-sharing platform integrated with Spotify, designed to foster community engagement and discovery. Each day, a selection of songs from our extensive database is randomly curated and added to a Spotify playlist, accessible via a widget embedded within our app. Users can return daily to explore fresh tracks recommended by fellow community members.

While our app is publicly available, exclusive access to certain features, such as song submissions, is reserved for community members. Authentication is seamlessly facilitated through Slack, leveraging the Sign in with Slack feature. Team members are authenticated based on their membership within the designated Slack workspace. Upon authentication, users gain access to the song submission feature, where they can contribute to expanding our music database by providing song details and URL.

(back to top)

Contact

• Christina Mifsud: Github - LinkedIn - Email
• Irianni Munoz: Github - LinkedIn - Email
• Mandy Cheung: Github - LinkedIn - Email
• Man Sang Sin: Github - LinkedIn - Email

Project Link: https://github.com/m4ndycheung/cyf-stay-tuned-radio

(back to top)

Built With

• 
• 
• 
• 

Other technology used

Slack API

The Slack API enables secure authentication, verifying users' team membership before granting access to additional features.

Spotify API

The Spotify API facilitates seamless integration, allowing our app to dynamically generate and update playlists based on community submissions.

JWT

We employ JSON Web Tokens (JWT) to facilitate secure transmission of user data between frontend and backend components. Following industry best practices, JWTs are issued upon user authentication, enabling subsequent requests without exposing sensitive tokens

(back to top)

Getting Started

To get a local copy up and running follow these not-so-simple steps.

Prerequisites

• npm

npm install npm@latest -g

• Install ngrok
• Create a Slack app
• Create a Spotify app
• Create a Postgresql database

Installation

1. Clone the repo

git clone https://github.com/m4ndycheung/cyf-stay-tuned-radio.git

2. Install NPM packages and dependencies for both client and server

npm install

Setup Environment Variables

1. Create .env variable file in client directory

VITE_SERVER_URL=http://localhost:3001
VITE_FRONTEND_URL=http://localhost:5173
VITE_SLACK_WORKSPACE_NAME=

• VITE_SLACK_WORKSPACE_NAME is a string variable which is displayed in the header

2. Create .env variable file in server directory

# spotify credentials
SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=
SPOTIFY_REDIRECT_URI=http://localhost:3001/callback
SPOTIFY_PLAYLIST_ID=

# slack credentials
SLACK_CLIENT_ID=
SLACK_CLIENT_SECRET=
SLACK_REDIRECT_URI=**ngrok_url**/slack/oauth_redirect
SLACK_ADMIN_USER_ID=
SLACK_WORKSPACE_NAME=

# database credentials
DB_USER=
DB_PASSWORD=
DB_HOST=
DB_PORT=
DB_NAME=

# jwt variables
JWT_SECRET=

# addresses
SERVER_URL=http://localhost:3001
FRONTEND_URL=http://localhost:5173

Spotify

SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET

In order to get these credentials, go to your Spotify app and copy them from settings section. (For more details, click here: https://developer.spotify.com/)

SPOTIFY_PLAYLIST_ID

Create a playlist on Spotify and paste the playlist id here

Slack

SLACK_CLIENT_ID and SLACK_CLIENT_SECRET

Go to your Slack App and copy them here. (For more details, click here: https://api.slack.com/authentication/sign-in-with-slack)

SLACK_ADMIN_USER_ID

To get this you need to login to your Slack workspace, click on the account you intend to make the admin. Click three dots and copy the member ID.

SLACK_WORKSPACE_NAME

You can find the workspace name in the slack url of your workspace. It is your workspace or organisation name followed by the slack.com domain (For more details, click here: https://slack.com/intl/en-gb/help/articles/221769328-Locate-your-Slack-URL-or-ID)

JWT

JWT_SECRET

This string variable is used to encode and decode/verify the JSON Web Tokens used in the backend server only allowing authorised users to access certain endpoints.

Setup Database

Note: A seed file is available in the server/data directory. This will create 2 tables:

tracks
refresh_tokens_table

The tracks table stores songs and information about the artists as well as the unique track id and the username of the user who submitted it.

tracks

It has 6 columns consisting of:

• id: which is automatically generated when a new song is added
• song_name: add the title of your chosen song
• artist_name: add the name of the artist of your chosen song
• cyf_slack_username (optional): add your slack username
• song_genre (optional): add the gene of your chosen song
• spotify_song_id: on Spotify, click on your chosen song, and from the browser copy the highlighted bit from the example below:

  https://open.spotify.com/track/5fHXbmrx8mfOT1wfSa1Nc8

refresh tokens

The refresh tokens table stores (you guessed it!) the refresh token provided by spotify which can then be exchanged for a new access token. It has 2 columns consisting of:

• id: which is automatically generated when a refresh token is added
• refresh_token: refresh token provided by Spotify.

Installation Complete (Well done!)

Told you they weren't simple. Well done on getting so far! It would be rude to stop now, follow the next few steps to get the project up and running 🚀

On First Time Run

start the project

Refer to Running the project locally

login as admin user

Under the maintenance section:

click Get Access and Refresh Token (This will populate the refresh tokens table in the database)

Running the project locally

To start:

1. Go to Client folder and enter in terminal:

    npm run dev

2. Go to Server folder and enter:

   npm start

3. Start ngrok:

   ngrok http 3001

4. Copy the forwarding URL from ngrok CLI, it’ll look something like this: https://2e73-94-119-32-12.ngrok-free.app
5. Append /slack/oauth_redirect to this URL i.e. https://2e73-94-119-32-12.ngrok-free.app/slack/oauth_redirect
6. Paste into env file SLACK_REDIRECT_URI
7. Go to https://api.slack.com/ and go to Oauth and Permissions tab and paste into Redirect URLs.
8. Go to http://localhost:3001 to access the backend.
9. Go to http://localhost:5173 to access the frontend.

(back to top)

Usage

How to update the playlist There’s a button for this sitting on the front page

How to add songs to the database User needs to be logged in for the add songs form to be shown

(back to top)

Roadmap

• Create a scheduled script to automate the playist update process
• Display previous daily playlists
• Display how many users added a specific track
• View tracks added by a specific user

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch

git checkout -b feature/AmazingFeature

3. Commit your Changes

git commit -m 'Add some AmazingFeature'

4. Push to the Branch

git push origin feature/AmazingFeature

5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Acknowledgments

• CodeYourFuture

(back to top)