Oraclyn
Oraclyn reshapes tarot readings using AI for swift interpretations. The stylish design, drawing from celestial motifs, blends tradition and tech seamlessly. Oraclyn fuses tradition and innovation to guide users with clarity.
Next JS
Open AI API
Supabase
Tailwind
Resend
React
Figma
The Vision
Tarot cards have always been a guiding light for my wife and me when navigating life's challenges. While our trusty guidebook offered insights into individual cards, it lacked a holistic interpretation that considered the connections and synergy between them. This sparked a curious thought – could AI, like ChatGPT, channel the essence of a tarot reader and provide us with comprehensive interpretations?
The answer was a resounding 'yes.' ChatGPT emerged as our go-to tarot reader, offering eerily accurate readings with sound logic. However, the process of shuffling cards and consulting ChatGPT was less than seamless. To bridge this gap, I embarked on a journey to create Oraclyn, an app that streamlines the tarot reading experience. Users could now ask questions, draw cards from a shuffled deck, and receive instant interpretations from ChatGPT.
Crafting the Experience
From Wireframes to Design
My journey began with creating wireframes in Figma and gathering valuable feedback from my wife and friends. Their input, combined with a few refinements, paved the way for the app's design.
Drawing inspiration from the cosmic allure of tarot, I focused on celestial elements like stars and crystals. The colour palette harmonised a deep, mysterious night sky blue with a vibrant minty neon green. This choice symbolised the fusion of tradition with cutting-edge technology, employing Next JS 13, Supabase, Resend, Open AI, and Vercel for the app's development.
In typography, I selected Anko for headings, a modern transitional serif typeface, weaving the heritage and history of tarot into the design. For the body text, Clarika, a geometric sans-serif typeface, brought legibility and a contemporary contrast to the traditional serif headings.
The Journey of Development
Before delving into the design, I ran a litmus test for my idea by creating a basic, barebones app. Challenges arose when configuring a streaming response with GPT 3.5 and optimizing the communication between my Supabase database, the app, and GPT 3.5. Ultimately, I overcame these hurdles, propelling the project forward.
The Technology Behind Oraclyn
My choice of tools and technologies was a meticulous process:
- Vercel AI SDK: Enabled seamless streaming responses with GPT 3.5.
- Supabase: A robust database that facilitated user authentication through various OAuth social providers.
- Resend with React Email: Streamlined the dispatch of registration and password reset emails.
- Tailwind CSS: Swiftly styled components with finesse.
- Stripe: Empowered Oraclyn to collect donations from generous supporters.
- Typescript: Ensured type safety and autocompletion.
Oraclyn is more than just an app; it's a digital sanctuary for those seeking clarity and insight. Through the power of technology and a dash of cosmic inspiration, it stands as a testament to the fusion of tradition and innovation, guiding users on their unique journey.