-
-
A minimalistic design was created to invite pause, while the animation retains attention.
-
The immediate transition is to explain clearly what this is about and invite readers to draw a card (or three).
-
Mirroring an in-person reading, users are greeted with aesthetic cards first, then presented with the interpretation below.
-
The original and simpler card-draw built has been shifted to a second page that invites users to explore more of The Deck.
Oracle Deck Web App - About the Project
What Inspired Me
I was already designing a deck of oracle cards with AI when the hackathon was launched, so I thought to myself: Can I recreate the experience of oracle card reading in a digital format? Oracle cards have traditionally been an in-person, tactile experience, but I wanted to explore how it can be experienced online. If I'm using AI to create the cards, why not extend that into a complete digital experience?
What the Web App Does
The Echoes of Dawn web app showcases my oracle deck in an interactive digital format. Anyone can seek guidance by having cards drawn for them, with AI providing personalized interpretations of the readings. Users input their questions or intentions, the system algorithmically selects cards from the deck, and OpenAI generates meaningful, contextual guidance based on both the cards drawn and the user's specific situation. It transforms the traditional oracle card experience into an accessible, always-available digital companion for those seeking insight and direction.
How I Built It
The Core Functions
I started with two essential functions: The Card Draw System: Building "The Deck" - a feature that pulls cards from a Supabase database. Even this seemingly simple task taught me how backend systems work, from data flow to user interface integration. AI-Powered Readings: I integrated OpenAI to generate dynamic, personalized interpretations. The system combines algorithmically drawn cards with user input, sending both to the AI for meaningful, contextual readings.
Challenges I Faced and What I Learned
Traditional Development vs. AI-Assisted Development
For a completely non-technical person with no experience building websites except on drag-and-drop website builders, I went with what people recommended - ask Claude/ChatGPT to come up with the product specifications, and then pass it to Bolt to build. While this approach is a good start, there are still many challenges I've come to face given my non-technical background.
Challenge 1: Over-reliance Without Understanding At first, I left all the building to Bolt without reading through the implementation strategy (The Plan). When errors occurred, I'd screenshot them and ask for fixes, only to have Bolt create error pop-ups for my website instead of solving the underlying issues.
Challenge 2: Information Overload I tried cramming too many instructions into single prompts, leading to partial implementations where some parts worked while others failed. I had to constantly specify what was correct and what needed fixing.
Challenge 3: Backend Knowledge Gap I didn't understand how Supabase backend and Netlify deployment worked, which created frequent roadblocks. For example, I didn't know whether to change the environment variables on Bolt, Supabase, or Netlify when I wanted certain functions.
Learning to Work with AI Tools
These challenges taught me valuable lessons about AI-assisted development: Break Down Tasks: I learned to divide complex requests into smaller, specific tasks for Bolt to handle. This dramatically improved accuracy and reduced back-and-forth corrections. Further, whenever there was an error, I knew immediately what led to it and could address it immediately.
Use Discussion Mode: The discuss feature became invaluable for understanding concepts I didn't know. Instead of guessing, I could ask questions and get explanations. Occasionally, I questioned Bolt on its Plan and it either clarified itself or corrected itself.
Read Implementation Plans: The Plan feature helped me understand what would be changed before implementation, making it easier to identify and fix errors when they occurred.
Ask Questions: When I didn't understand backend processes or deployment, I used Discuss mode to learn, which helped me grow as a vibe coder. I'm now more confident of how the different systems work together.
What I'm Proud Of
Besides building a functional product, I'm most proud of what I've learned which I can carry forward into future vibe coding projects. This includes: Understanding Function Integration: Learning how functions are called and how they integrate with backend systems was a breakthrough moment. Seeing how the card draw system connects to Supabase, processes data, and delivers it to the frontend gave me a foundational understanding of full-stack development. Live AI Integration: Successfully integrating the OpenAI API to provide "live readings" was particularly rewarding. This wasn't just a static database lookup - it's dynamic AI interpretation that considers both the cards and user context. This achievement opens up immense possibilities for integrating AI into my future applications, from personalized content generation to intelligent user interactions.
The combination of these learnings means I now have the technical foundation to build AI-enhanced applications across different domains, not just oracle cards.
This project fundamentally changed how I think about building applications: AI Lowers the MVP Barrier: You don't need years of coding experience to validate concepts or create functional products. AI tools can bridge the gap between imagination and implementation. Validation First, Features Second: Instead of building complex features like user accounts or payment systems, I focused on the core value proposition. This allows me to test market demand before investing in advanced functionality. Iterative Learning: AI-assisted development isn't about replacing learning - it's about accelerating it. Each challenge taught me more about systems architecture, user experience, and strategic thinking.
My Takeaways on App Development
Immediate Focus: User Validation
I deliberately removed payment features like Stripe integration to keep the experience free-to-try. At this stage, getting people to experience digital oracle readings is more important than monetization. I've implemented rate limiting to prevent abuse while maintaining accessibility.
Future Development Opportunities
Based on user feedback and demand validation, I plan to explore:
Physical-Digital Integration: Creating the physical cards first, then unifying both experiences. Users who enjoy digital readings may want to collect physical cards. Enhanced Experiences: For users who find value in the basic readings:
- Journaling features for tracking insights and reading history
- Custom newsletter experiences with personalized guidance
- Expanded deck collections or themed reading experiences
Monetization Strategy: The paywall will make sense when users have experienced the value and want deeper engagement, not as a barrier to initial discovery.
The Bigger Picture
This project isn't just about oracle cards. It's proof that AI-assisted development can democratize creation, and anyone can transform ideas into functional products.
The oracle deck web app started as a simple question about extending a physical product into digital space and became a journey of learning how to effectively collaborate with AI in the development process.
Log in or sign up for Devpost to join the conversation.