Inspiration

So, when I participated in this, i wanted to make something which is a little different, more fun, not just matching your taste but like a game. _ _I was kind of inspired by both harry potter fan made website and Horoscope and obviously i had to use the feature of Qloo taste based API. So, I came up with this cultural zodiac idea.

What it does

An immersive web application that uses AI to reveal your true internet-self based on your cultural tastes

Features

  • Mystical AI Sign Generation: Leverages the Google Gemini API to analyze user tastes and assign one of 16 unique, poetic "Cultural Zodiac" signs.
  • Immersive Reveal Experience: Features a dramatic tarot card flip animation, a deep voice-over proclaiming "The stars have spoken...", and a glowing, mystical UI.
  • The Oracle's Offering: For users unsure what to input, the "Let the Oracle Choose" feature provides a curated, high-quality cultural artifact to start their journey.
  • Deep Taste Analysis: The results screen includes a "Vibe Check" to show the core tags of your taste and a "Taste Twin" to reveal a personality that matches your cultural soul.
    • Note on API Status: The backend integration for the Qloo API (which powers the Vibe Check & Taste Twin) is fully implemented. For thee qloo llm hackathon demo, we are using high-quality fallback data to ensure a stable and consistent user experience, as the live API endpoint was not performing as expected.
  • Interactive Constellation Map: Explore the full cosmos of signs in a beautiful, animated night sky. Discover your sign's constellation and check your "Cosmic Kinship" with other signs.
  • The Background Color Change:When the oracle reveals its prophecy, the background changes color with the zodiac sign you have got .It matches the vibe.

How we built it

So, the vision(fun and mysterious) was already there, i just had to apply it. We engineered a full-stack application using a modern, efficient tech stack designed for a rich user experience and powerful AI integration. Frontend: The immersive user interface was built with React. All the complex, fluid animations—from the tarot card flip to the Constellation Map transitions—were orchestrated using Framer Motion. The beautiful, responsive styling was handled by Tailwind CSS. Backend: We chose Python for our backend, using the high-performance FastAPI framework to create a robust and speedy server. AI & Data Layer: The core of the Oracle is the Google Gemini API, which analyzes the user's taste profile and selects the most fitting Zodiac sign. The "Vibe Check" and "Taste Twin" features were designed to be powered by the Qloo API for its rich cultural data, with a stable fallback system implemented for the demo.

Challenges we ran into

The first major hurdle was technical. The very problem was the Qloo API integration itself. I tried really hard, went through the developer's guide, and spent hours on Discord, but I couldn't get a perfect connection. Even though the API was returning a "200 OK" status for requests, the response was always empty. This was incredibly frustrating, as it left the Gemini AI with very few inputs to work with, weakening the core of the app's analysis. Then came the design part. I really wanted to create an immersive design, a lore that pulls you in, a feast for the user's eyes. But making this with the help of an AI was hard, because it just couldn't seem to grab the specific artistic vision I was looking for. This was my second hackathon. My first one took me just 4 days. This one took me 20. I was so exhausted at one point that I was going to give up because nothing was going my way. But then I thought, I have to at least make a demo to get my vision across to the judges. Even with the challenges, the code is designed so that if the Qloo API does start working, the app will seamlessly begin using the live data exactly as we want it to.

Accomplishments that we're proud of

Honestly, after a journey this long and difficult, the fact that I finished it and am submitting it right now is the biggest achievement. It's proof that I didn't give up.

What we learned

Oh, I learned a lot of things. First and foremost, I learned not to give up, even when a project feels like it's fighting you every step of the way. On a technical level, my skills grew immensely. I had never used React before this project, but now I'm comfortable building dynamic components with it. I moved beyond basic CSS and learned how to style a beautiful, responsive application with Tailwind CSS. And in fact, there were so many small but important things. I've had a GitHub account for a while, but I never really knew how to use Git to add my local projects from my desktop. I learned that with this project, and trust me, it did not take just 5 minutes.

What's next for Cultural Zodiac

I vision for Cultural Zodiac extends far beyond this prototype. I aim to build it into a deeply personal and social cultural discovery engine.

  • The Oracle's Library: Evolve the "Let the Oracle Choose" feature into a dynamic, database-driven system. The Oracle would pull from a vast, curated library of high-quality cultural artifacts, ensuring every suggestion is unique and leads to a great result.

  • Personalized Cultural Recommendations: Your Cultural Zodiac sign would become a key to unlock a universe of recommendations. If you're an "Abandoned Arcade Heartthrob," the app would suggest synthwave playlists on Spotify, retro-futuristic movies on Netflix, and indie games that match your nostalgic vibe.

  • Animated "Reveal Story" Generator: Replace the static "Download Image" button with a feature that generates a 15-second, shareable video story of your reveal, perfectly formatted for TikTok, Instagram, or YouTube Shorts, turning every user into a potential marketer.

  • Social Constellations & True Taste Twins: Allow users to connect with friends to see their signs and compatibility on the same Cosmic Map. The "Taste Twin" feature would evolve to match you with other real users who share your unique cultural fingerprint.

Built With

Share this project:

Updates