.fm Collage Creator

Create cover collages of your top albums from last.fm. Check it out yourself!

This app creates collages entirely on the client side and only uses the server to retrieve data from last.fm without leaking the API key. So the speed of collage creation depends on the performance of the user's hardware and their internet speed. For this reason, the cost of hosting this site is very low.

Created using: Next.js + TailwindCSS + Mantine + Phosphor Icons, and hosted for free on Vercel.

Build and host it by yourself

Note

You will need a last.fm API key which you can easily get here.

There are three main ways how to achieve this:

Deploy on Vercel

Standard node.js hosting or your own server

git clone 'https://github.com/patryk-ku/fm-collage'
cd fm-collage
mv .env.example .env

Now insert your last.fm API key into .env file. Then install all dependencies and build files.

npm install --omit=dev
npm run build

Finally run server.

npm run start

Standalone export and Node.js hosting without acces to terminal/script execution (e.g. Phusion Passenger)

Important

The export script is written in bash, so it requires a UNIX-like system or WSL.

When building applications using the standard method, the app folder will be over ~700 MB in size. This is a lot and can easily be reduced to a reasonable ~20 MB using Next.js standalone export option. Using this method also allows the site to be served using hosting that use Phusion Passenger or other similar solutions.

Do everything as for a normal installation but instead of the npm run build use:

npm run export

The built app files will be waiting for you in the dist folder, and additionally, the packed files will be in a zip archive in the export folder. To start server simply run:

node app.js

Development

Run the development server on http://localhost:3000:

npm run dev