Mango Music

A music-based social media app using Spotify API.

Mango Music is a social media platform in which users can build connections over what they love the most, music! Users can search for tracks, discover new tunes, listen to song previews, and most importantly, share their thoughts and start a discussion about a particular piece. Whether visitors prefer meeting new people by visiting the explore page or sharing the new indie band they just dicovered with their tight-knit circle, Mango Music has something for all music lovers alike. Visit Mango Music today and see what all the hype is about.

screen recording of mango music, a music based social media website

Technologies used:

  • MongoDB
  • Express
  • React/Redux
  • Node
  • APIs: Spotify, Genius, and Lyrics Ovh

Featured code snippet: Searching for songs using Spotify API:

router.get("/search", (req, res) => {
	getAuth()
	.then(data => {
		const token = "Bearer " + data.access_token;
		let search_url = "https://api.spotify.com/v1/search?";
		
		let params = []
		for (let k in req.query) {
			params.push(`${k}=${req.query[k]}`)
		}
		search_url += params.join("&");
		
		const response = axios.get(search_url, {
			headers: { 
				'Authorization': token
			}
		})
		
		return response;
	})
	.then(payload => {
		return res.json(payload.data)
	}, err =>  res.status(400).json(err))
});

To fetch data from the Spotify Web API, we first use the function `getAuth` to send a POST request to the `/api/token` Spotify API endpoint, with including the Authorization and Content-Type in the headers of the request. Once we receive a response with the temporary Spotify access token, we use that token to send another request to spotify's search endpoint with our specified search parameters such as song title.