Flutterfy

A website that visualises a user's Spotify top tracks as butterflies. Written with Next.js and p5.js.

You can learn more about the process of building this website in PROCESS.md.

Why?

"Spotify" and "butterfly" sounded similar to me, so I thought a website with their portmanteau as its name would be nice. I was also inspired by Receiptify, which visualises your Spotify top tracks as a receipt, and generally interested in pursuing a data art / visualisation project. From there came the idea of visualising Spotify top tracks as butterflies!

Sadly, Spotify doesn't allow third-party apps to start with "Spot" or sound / look like "Spotify", so I had to go for a different name that doesn't sound like a portmanteau of "Spotify" and "butterfly". Stuck with the concept, though :)

Setup

1. Clone this repository.

   git clone https://github.com/valerietanhx/flutterfy.git

2. Navigate to the repository.

   cd flutterfy

3. Install the dependencies.

   npm install

4. Initialise a .env file.

   cp sample.env .env

5. Fill in the .env file with the necessary environment variables.

6. Start the development server.

   npm run dev

7. Open http://localhost:3000 in the browser.

Future enhancements

See this repository's GitHub issues for potential future enhancements.