Mystic Night Cocktail

An AI-powered cocktail fortune teller that matches your mood with a spooky drink.

Comment

Inspiration

The idea came from a very simple moment: I was at an event, standing in front of a long cocktail menu, and had no idea what to choose. Everything looked good, but my brain was tired and I couldn’t decide which drink actually fit my mood.

Instead of randomly picking something, I thought: it would be so much nicer if a “mysterious bartender” could read my mood and choose a drink for me. For Kiroween, I turned that tiny decision problem into a spooky experience: an AI-powered ritual that matches tonight’s feelings with tonight’s cocktail.

What it does

Soul Cocktail turns your current mood into tonight’s drink.

  • Floating mood bubbles drift across the screen (e.g. Unstable energy, Introverted, Night owl revival).
  • You tap up to three bubbles that match how you feel right now – or just follow your intuition and tap three at random.
  • When you press Generate, the app “mixes your soul cocktail” with a short animation.
  • Finally, you get a personalized cocktail card:
    • a cocktail name (e.g. “Silver Pulse”)
    • “ingredients” made of your selected moods as percentages
    • a short explanation of why this cocktail fits you
    • a tiny “Daily Spark” message as tonight’s little blessing

Even if you don’t know what to order when the bartender asks, you can just play with the bubbles, let Soul Cocktail read your mood, and let it choose tonight’s drink for you.

The whole experience is wrapped in a dark, Halloween-themed UI: glowing accents, ghostly icons and a “midnight bar” atmosphere. That is why I’m submitting this project to the Costume Contest category.

How I built it (with Kiro)

Soul Cocktail was built almost entirely through Kiro’s vibe coding. Instead of starting from a blank editor, I treated Kiro like my pair-programmer and bartender at the same time.

  1. Scaffolding the app in chat I first described the experience I wanted: floating mood bubbles on a dark, starry background, a “Generate” button, and a final result card for tonight’s cocktail. Kiro generated the initial React layout, state management and basic styling directly from this conversation.

  2. Designing the bubble interaction
    Through several rounds of vibe coding, I asked Kiro to:

    • create a reusable bubble component with glow effects,
    • keep track of which bubbles are selected,
    • limit the selection to three moods,
    • and display the chosen moods as tags in the bottom bar.
      Each change was done by refining prompts instead of manually rewriting large chunks of code.

  3. Mixing screen & result card
    Next, I used Kiro to script the “Mixing your soul cocktail…” transition and the final result view:

    • a generated cocktail name,
    • mood-based “ingredients” percentages,
    • a short explanation of why this drink fits you,
    • and a “Daily Spark” message.
      I described the tone I wanted (“soft, slightly poetic, comforting”) and Kiro helped shape both the text templates and the component structure.

  4. Polishing the spooky UI I iterated with Kiro on gradients, shadows and spacing until the app felt like a neon-lit night bar: dark background, glowing text and gentle motion. Most visual tweaks were done by asking Kiro to adjust specific CSS values and animations.

  5. Final tweaks & docs

    After Kiro produced the core code, I did light manual adjustments and wired everything together for deployment. The main prompts, experiments and config files are stored in the project’s .kiro directory to document how vibe coding guided the whole build.

Challenges

  • Prompting for UI, not only logic It took a few iterations to learn how to describe layout, spacing and “vibe” clearly enough so Kiro could generate code that matched the spooky bar feeling while still being usable.

  • Balancing randomness and control
    Cocktail suggestions should feel magical and surprising, but not completely random. I had to tune the logic so that mood and taste still strongly influence the final drink.

  • Timeboxing experiments Vibe coding makes it very easy to try “one more idea”. I had to consciously stop exploring new directions and focus on polishing one coherent experience before the deadline.

What I learned

  • Thinking in terms of conversations and flows, not only functions and components, works very well with an AI-powered IDE like Kiro.
  • Vibe coding is powerful for quickly prototyping both logic and UI, especially when the project has a strong mood or theme.
  • Even in a small hackathon project, clearly documenting how I used Kiro (and saving prompts in .kiro) makes it much easier to explain the process to judges and future collaborators.

What’s next

In the future, I’d like to:

  • Pull in real-world data (weather, time, maybe location) to influence tonight’s cocktail.
  • Add shareable “fortune cards” so users can send their nightly cocktail reading to friends.
  • Explore more advanced Kiro features beyond vibe coding, such as specs or hooks, to automate more of the workflow around deploying and updating the app. ation

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Mystic Night Cocktail

Built With

Share this project:

Updates