suono 🌐

Jam around the world with Suono: Check out the coolest tracks from every country.

Features

• Song audio previews
• Top 50 songs from each country
• Searching for countries using fuse.js
• Highlighting the selected country on the map in the background using react-map-gl

Preview

Running Locally

Prerequisites

Spotify

• Create an application on the Spotify Developer website.
• Copy the client ID and the client secret and add them to the environment file (SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET).

Mapbox

• Copy your public token from Mapbox, and add it to the environment file (NEXT_PUBLIC_MAPBOX_TOKEN).
• (Optional) Add a map style either from Mapbox Classic styles or from Mapbox Studio to the environment file (NEXT_PUBLIC_MAPBOX_STYLE).
  • The default style is mapbox://styles/mapbox/dark-v11.

Last Steps

• Rename .env.template to .env.local, and you're good to go.
• (Optional) pnpm package manager

Running

Note

This project uses pnpm as the package manager, but other package managers can be used as well.

To run this project locally, first install the required packages

pnpm install

Then, run the project in the development environment

pnpm dev

If you want to run the project in the production environment

pnpm build
pnpm start

License

GNU General Public License v3.0

---