What I Built

I built a music app where you place monsters on the scene and record custom audio for each of them. The recordings can be anything—mouth beats, hand-made noises, or whatever sound you can think of. Each monster loops its sound, turning the scene into a lively messy audio experience!

All visual assets were created using ComfyUI.

Tech used:

PixiJs

ToneJs

Vue

ComfyUI (SDXL & Flux Dev)

Pinata

Node for the backend API

Pinata Challenge

This Repo is my submission to the dev.to challenge: https://dev.to/challenges/pinata.

Demo: https://noisy-monsters.onrender.com

More Details

The app uses Pinata to store and share the state of the scene along with the user-recorded audio. When you click "Share" all recorded audio is uploaded to Pinata's IPFS, along with the app's state (the monster positions, and which sound is associated with each monster) in JSON format. The CID is embedded in the URL as ?share=cid.

When someone opens the app with a ?share=cid link, the app fetches the JSON data from IPFS and reconstructs the scene with all the monsters and sounds intact, allowing users to share their creations easily!

Notes

I only discovered this challenge two days before the submission deadline, so I had to finish the app as quickly as possible. As a result, there are several features I'd like to improve or add, such as:

Intro screens and clearer instructions on how to play.

Hover states for better UI feedback.

Some feedback when user starts recording.

Error handling.

Various code optimizations.

Add different audio effects / modifiers for each monster.

Rewrite the code, Vue was totally not necessary.

Despite the time crunch, I'm excited to share this project and plan to keep improving it!