Final Project: Flower

How Flower Came Together

Flower started as a way to help people learn the ropes of audio and video tech. Built with Next.js, React, and TypeScript, my main goal was to let users practice connecting virtual gear, just like they would in the real world. It's all about getting hands-on with signal flow, without needing to always have actual equipment on hand.

Making this happen involved a few key pieces. First, I needed to bring the equipment to life on screen, think virtual consoles, mics, and cameras with clickable ports. Then, there's the logic behind the scenes to manage all those connections and check if they're correct for whatever scenario the user is in. Each scenario itself is like a mini-challenge, with its own set of gear and setup goals. And, of course, I used Tailwind CSS and shadcn/ui to pull together a clean and user-friendly interface. I also used the React Flow library initially to create the virtual equipment and cables, but ended up doing it myself instead due to several issues I had with the library.

Rolling With The Punches

Like any project, Flower had its share of twists and turns. For instance, I initially wanted to have visible virtual cables that users could drag and plug into the equipment ports, making it feel super realistic. But actually making that work smoothly and look good across different screen sizes (desktops, tablets, and phones) turned out to be a real headache, so I had to pivot from that idea. I also initially dreamed big with other complex simulations but had to narrow my focus to nail the core experience of connecting gear.

Did It Work? And What's Next?

So, the big question: did Flower hit the mark? My original idea was pretty straightforward: create a virtual playground for learning A/V skills, focusing on getting cables and connections right. I wanted to mimic real-world tasks, like wiring up a StudioLive 32R, patching drums to a stage box, or connecting cameras to a video switcher.

I got to a solid MVP stage where the core concept is alive and kicking. You can actually jump in and start connecting virtual gear, which was my main goal. It's a good starting point for anyone wanting to practice without actual hardware. While I haven't ticked off every single dream scenario yet (like that ATEM setup or diving into Dante), the groundwork is definitely there.

And I'm not stopping here. My plan is to keep building on this. Think user accounts to save your progress, more interactive setups like the ATEM software, Dante Controller, and more, and (this is the exciting part) letting users cook up their own scenarios and equipment to share. That should hopefully open things up and make Flower an even better learning hub.