VibeScribe

🧠 Inspiration

Music, memes, and mood boards are the Gen Z holy trinity. We wanted to create something that blends all three into a scroll-stopping experience—no signups, no overthinking. Just type what you're feeling, and boom, Gemini curates your vibe.

The idea came from late-night YouTube binges where we were like, “Why isn’t there a bot that just gets what I want to watch or feel right now?” So we built one.

💡 What it does

VibeScribe takes a natural language mood description (like “heartbroken but kinda slaying”) and turns it into a:

• 🔥 Custom playlist title
• 📺 3 YouTube video embeds
• 🐸 3 mood-matching meme GIFs
• ✨ Aesthetic quote to top it off

All styled in a smooth, glassy, dark mode React UI. It’s like a digital vibe capsule—auto-generated in seconds.

⚙️ How we built it

• Frontend: React (Vite) with TailwindCSS for styling
  
• AI Backbone: Gemini Pro API (via Google’s Generative Language API)
  
• State Management: Vanilla hooks with loading/error states
  
• Media Display: Responsive YouTube iframes and GIFs pulled from URLs
  
• Fallback Logic: Static JSON when API fails or exceeds quota
  
• Design Language: Gen Z aesthetic—neon gradients, Poppins font, animated buttons

We also used Framer Motion for some spicy transitions and responsiveness.

🧩 Challenges we ran into

• Parsing Gemini’s response into valid JSON (it loves to freestyle)
• Making the layout responsive across desktop and mobile in 30 minutes
• Keeping everything local and API-key safe without a backend
• Staying minimal without feeling boring

🏆 Accomplishments that we're proud of

• Shipped a working AI-generated content engine in under 30 minutes
• Integrated Gemini smoothly with clean UI
• Built something that actually feels fun to use and easy to extend
• Zero cost infra. Fully local. Hackathon-safe.

📚 What we learned

• How to prompt Gemini in a way that returns structured, parseable content
  
• Tailwind tricks to make fast responsive UIs
  
• How to make something small still feel magical
  
• That scoping a hackathon idea right is half the battle

🚀 What's next for VibeScribe

• Let users save and share their “vibe cards”
  
• Add Spotify API for personalized playlists
  
• Let people remix each other’s vibes with their own twist
  
• Community moodboard where people post, like, and explore vibes

Basically, we want to make VibeScribe the Pinterest + Spotify + Gemini fusion Gen Z never knew it needed.

✨ Thanks for vibing with us.

Built With

• aesthetic
• and
• animations
• api
• content
• css
• curated
• displaying
• embed
• fallback
• font
• for
• framer
• gemini
• generation
• gifs
• giphy
• google
• handling
• javascript
• json
• language
• llm
• local
• main
• meme
• modular
• mood-based
• mood-matching
• motion
• offline
• poppins
• programming
• rapid
• rate-limit
• react-(vite)-?-frontend-framework-for-fast
• smooth
• static
• styling
• tailwindcss
• transitions
• ui
• urls)
• utility-first
• video
• youtube