Magnetic Board

This is how website looks on big screens
This is how website looks on phones

Inspiration

My inspiration came from a toy I used to play with all the time as a kid, the magnetic drawing board. I was always fascinated by how it worked and how shaking it could instantly clear the screen. For DubHacks, I wanted to recreate that experience as a web app.

What it does

MagnoBoard is a digital magnetic board that works similar to the original toy. You can draw freely, clear the board by shaking your phone, and even use multiple colors, something the real toy could not do. There is also a feature powered by Gemini AI that generates random ideas for what to draw when you are out of inspiration.

How I built it

I used Next.js and Tailwind CSS to build the site’s structure and design. The main drawing functionality was created using react-sketch-canvas, and I integrated the Gemini API to generate drawing ideas.

Challenges I ran into

Working with Gemini and reading motion gestures were both completely new for me. It took me around 30 to 40 minutes to figure out the Gemini integration, style it properly, and publish. For the shake detection, I tried several resources before realizing (thanks to ChatGPT) that JavaScript has a built-in motion detection event. Once I found that, I implemented it successfully.

Accomplishments that I am proud of

Getting the shake-to-clear feature working was a huge win. It feels just like the real magnetic board. I even made the sensitivity adjustable. I am also proud that I learned and implemented the Gemini API for the first time in a real project.

What I learned

How to use the Gemini API
How to handle phone gestures in JavaScript
How to build more responsive layouts in Next.js

What’s next for MagnoBoard

I would like to add features like a color history bar so users can switch between colors easily, and maybe an online collaboration mode where multiple users can draw together in real time.