Inspiration

We were inspired by Hotel Transylvania, a hotel built just for monsters where every guest has their own quirks. Dracula can’t see himself in a mirror, Wayne has a huge pack of pups, Murray has been asleep for centuries, Griffin is invisible, Blobby speaks blob, and Johnny is the one human who keeps wandering off. We wanted to build the app that hotel would actually use, with a room and tools made for each monster.

What it does

BooNb is a monster hotel app where you check in as yourself. Each of seven guests gets a recommended room and their own set of tools: Dracula: a mirrorless closet. Photograph your clothes, then get outfits built only from what you own, plus a sunset countdown. Wayne: a pack tracker for meal check-ins, a hotel map, and a full moon countdown. Murray: a “catch me up” assistant that explains modern things in plain language and summarizes notes you upload. Frankenstein: snap something broken and get repair and upcycling ideas, then turn it into a maintenance request. Griffin: a full-screen heartbeat “I’m here” mode, plus a camera check that counts how many people are around so he can announce himself before approaching. Blobby: a translator with quick phrases and read-aloud. Johnny: a food safety camera check and a haunted forest trail tracker that can guide him back to the hotel.

How we built it

Framework: Next.js with TypeScript UI: Tailwind CSS with accessible UI components, and Lucide icons Animation: Motion for page transitions and character animations AI: Gemini, called through server-side API routes so the API key never reaches the browser Validation: Zod checks every structured AI response before the app uses it

Challenges we ran into

Original 3D characters: We modeled our own monster designs from basic shapes so they feel playful without copying existing characters. Messy AI responses: Gemini didn’t always return clean, structured data. We used Zod to check every response and show a “try again” message instead of letting the app crash. No double bookings. The room matching had to filter out rooms that were too small or already booked for overlapping dates, and free them up again when someone cancelled. Time. With six hours, we had to get the core booking flow working first and save the fun extras like scroll animations for the end.

Accomplishments that we're proud of

Seven guests that each feel like their own mini app, sharing one booking system. Booking logic that never double-books a room or recommends one that’s too small. Requests flow from guest to staff dashboard and back with live status updates.

What we learned

3D in the browser is doable. Building characters out of simple shapes turned out to be a fast way to get interactive figures that look polished, without needing any outside models or assets. A fallback is part of the feature. Camera access, AI calls and permissions can all fail, so every tool needed a backup path like photo upload or a labeled demo mode.

What's next for BooNb

Real accounts. Add guest and staff logins so the staff dashboard is secure and each guest only sees their own stay. Live forest tracking. Use the phone’s GPS for Johnny’s tracker so it follows real trails instead of a simulated map. Real presence detection for Griffin. A native mobile app could use Bluetooth to sense nearby phones, replacing the current radar simulation. Shared pack locations. Let Wayne’s pups opt in to share their location from their own devices, so the pack map shows where everyone actually is. More monsters. Add new guests with their own rooms and tools, like a ghost who needs help with doors or a witch who needs a broom parking spot. Voice everywhere. Expand voice input and read-aloud to every tool, not just Murray and Blobby.