Back to Blog
    AI & Automation

    How We Built an AI Fortune Teller with React & Groq

    A deep dive into building tanyaperamal.com's Peramal Oracle: React frontend, Express backend, Groq AI, token credits, and session management.

    AI oracle concept with mystical digital interface
    KayFreyTech Editorial TeamApr 20269 min read

    What happens when you combine modern AI with ancient fortune telling traditions? You get Tanya Peramal (tanyaperamal.com) -- a platform where users consult an AI Oracle powered by Groq's lightning-fast inference for Ba Zi, Tarot, I Ching, and Gui Bu readings.

    The brief sounded simple on paper: build a fortune telling website. In practice it sat at the intersection of four different disciplines -- traditional divination knowledge, conversational AI prompt design, real-time backend engineering, and SEO for one of the most competitive niches in Indonesia. This article breaks down the architecture, the design decisions that actually mattered, and the mistakes we would not repeat on the next AI product.

    The Problem We Were Solving

    Most 'AI fortune teller' demos online are a thin wrapper around a chat model: a text box, a generic system prompt, and a wall of text back. That works fine for a novelty page, but it falls apart as a product. The Tanya Peramal brief called for something that felt like consulting an actual practitioner -- fast, in character, with real domain knowledge of Ba Zi, Tarot, I Ching, and Gui Bu -- and commercially sustainable through a token system instead of banner ads.

    The Tech Stack

    Frontend: React + TypeScript + Tailwind CSS

    The frontend is a standard React SPA built with Vite for fast builds and hot reload during development. We styled it with Tailwind CSS using a mystical dark purple and gold palette that fits the fortune telling theme without tipping into cliche. The site has grown to 62 pages covering the different divination methods, zodiac content, and educational articles, all sharing the same component library so a new page can ship in an afternoon.

    Backend: Express.js + SQLite

    The backend runs on Express.js with SQLite for user data and token management. We chose SQLite over PostgreSQL deliberately: the data model is simple (users, tokens, sessions), traffic is read-heavy rather than write-heavy, and a single-file database means one less server to patch, monitor, and pay for. If the platform outgrows SQLite's write throughput later, migrating to PostgreSQL is a known, well-documented path -- we did not want to pay that complexity tax on day one.

    AI Engine: Why Groq Over a Direct OpenAI or Anthropic Call

    For the AI Oracle itself, we route through Groq as the primary provider, with OpenRouter as a fallback. Groq runs open models on custom LPU hardware instead of GPUs, and the difference shows up directly in the product: where a typical GPT or Claude call can take 4-8 seconds for a long response, Groq streams the same length in under 2 seconds. For most SaaS features that gap does not matter much. For an oracle, it is the entire experience -- a fortune teller who makes you stare at a loading spinner for ten seconds stops feeling mystical and starts feeling like a broken app. OpenRouter sits behind Groq as a fallback: if Groq rate-limits during a traffic spike or has an outage, the request routes to an equivalent model through OpenRouter instead of the user seeing an error.

    System Prompt Engineering

    The most critical part of the project was the system prompt, not the frontend. The model needs to respond as a mystical fortune teller, not a helpful assistant with bullet points and disclaimers. Here is what we focused on:

  1. **Persona**: The Oracle speaks in a wise, slightly mysterious tone. No corporate language, no 'As an AI language model' hedging, no numbered lists inside a reading.
  2. **Domain expertise**: Deep, specific knowledge of Ba Zi (Chinese astrology based on birth date and time), Tarot card meanings and spread positions, I Ching hexagrams and changing lines, and Gui Bu (turtle shell divination).
  3. **Cultural sensitivity**: Respecting the traditions the content draws from while making them accessible to a modern Indonesian audience that may be encountering some of these methods for the first time.
  4. **Safety guardrails**: The Oracle refuses to give medical advice, legal counsel, or financial predictions dressed up as fate. A keyword filter blocks the riskiest queries before they even reach the model.
  5. We rewrote the prompt more than a dozen times, mostly by reading real transcripts and flagging any line that sounded like a chatbot rather than a fortune teller. A phrase like 'Based on the information provided' had to go; 'The stars whisper of a change coming in the second month' had to stay. That kind of editing does not show up in a diff of lines changed, but it is the difference between a product people trust and one they close after one message.

    Token Credit System Design

    We implemented a credit-based system instead of a subscription. Subscriptions make sense for daily-use tools; fortune telling is closer to an occasional, high-intent purchase, so pay-per-use fits the actual usage pattern better. Here is how it works:

  6. New users get 3 free tokens upon registration via Google OAuth, enough to try every divination method once.
  7. Each oracle consultation costs 1 token, deducted only after a successful AI response.
  8. Additional tokens can be purchased in bundles, with the per-token price dropping at higher tiers.
  9. Token balance is tracked in SQLite and validated server-side before every AI call, so a user cannot bypass the check by editing frontend state.
  10. This is simpler to build and audit than a full subscription/billing integration, and it gives users direct control over their spending instead of a recurring charge they forget about. The Google OAuth integration also means zero password reset flows, zero forgotten-password support tickets, and one less place for credentials to leak.

    Session Management: Progressive Answer Depth

    Each oracle session allows up to 3 follow-up questions within a 5-minute window, and the answer depth decreases progressively:

  11. **Question 1**: Detailed, comprehensive reading (long response).
  12. **Question 2**: Focused clarification (medium response).
  13. **Question 3**: Brief final guidance (short response).
  14. This design does two things at once. It nudges users to ask their most important question first instead of drip-feeding trivial follow-ups, and it naturally caps AI compute cost per session without a hard word limit that would feel arbitrary to the user. After 5 minutes or 3 questions, the session expires and a new token is required to start again.

    Keyword Filtering for Safety

    Before any query reaches the model, it passes through a keyword filter that checks for medical terms (symptoms, diseases, medication names), financial terms (stock tickers, specific investment advice), legal terms (lawsuits, contract disputes), and harmful content (self-harm, violence). Blocked queries return a gentle in-character redirect -- the Oracle explains it cannot see that domain of the future and suggests consulting a professional instead. That framing matters: a hard 'This request violates our policy' message breaks immersion and reads like a corporate bot, which is exactly what the persona is built to avoid.

    Divination Methods We Had to Get Right

    None of these methods can be faked with generic prompting. Each one has real rules, and users who know the tradition will notice immediately if the AI gets them wrong.

    Ba Zi (Four Pillars of Destiny)

    Ba Zi maps a birth date and time to four pairs of Heavenly Stems and Earthly Branches, then reads the balance of the five elements across them. Getting the pillar calculation right is a deterministic date/time problem, not something to leave to the language model's arithmetic -- we compute the pillars in code and pass the structured result into the prompt, so the AI only has to interpret, not calculate.

    Tarot

    The Oracle draws from a full 78-card deck, tracks upright versus reversed orientation, and respects spread position (past/present/future, or a Celtic Cross layout) when interpreting a card. The interpretation changes meaningfully depending on which position a card lands in, and the prompt has to carry that context explicitly.

    I Ching

    We simulate the traditional three-coin toss method to generate one of the 64 hexagrams, including any changing lines that produce a second, transforming hexagram. The AI then interprets the hexagram text and the changing lines together, which is closer to how a real I Ching reading works than just picking a hexagram at random and summarizing it.

    Gui Bu (Turtle Shell Divination)

    This is the method with the thinnest coverage in general AI training data, since it is a much older and less globally documented practice than Tarot or Ba Zi. We had to source additional reference material on the crack patterns and their traditional interpretations and fold that into the domain knowledge section of the prompt so the Oracle does not just improvise when a user picks this method.

    SEO for a Fortune Telling Site

    Fortune telling is a competitive niche in Indonesia. We optimized for long-tail keywords like 'ramalan online gratis', 'kalkulator Ba Zi Indonesia', and 'tarot reading AI' rather than fighting for the single highest-volume head term. Each of the 62 pages has a unique meta title, description, and schema markup, and we implemented FAQ schema for common questions about each divination method, which helped several pages earn featured snippets within the first few weeks of indexing.

    Keeping the Oracle Fast Under Real Traffic

    Sub-2-second responses on a quiet server are easy. Keeping that number steady when multiple users hit the Oracle at once required a few deliberate choices: streaming the AI response token by token instead of waiting for the full completion, so the user sees the reading appear progressively rather than staring at a blank screen; setting an aggressive timeout on the Groq call so a slow request fails over to OpenRouter instead of hanging; and keeping the system prompt itself lean, since every token in the prompt is a token of latency before the model starts generating the parts the user actually reads.

    Lessons Learned

    1. AI persona consistency matters more than feature count

    Users notice within one message if the Oracle breaks character. We spent more time rewriting the system prompt than building the entire frontend, and that time was well spent.

    2. Speed is non-negotiable for this category of product

    A fortune teller that makes you wait 10 seconds loses all mystique before it says a word. Groq's sub-2-second responses are not a nice-to-have here, they are the product.

    3. Simple auth wins

    Google OAuth eliminated the majority of auth-related support requests compared to email/password registration, and it removed an entire category of security surface (password storage, reset flows, credential stuffing) we did not have to build defenses against.

    4. Deterministic calculation plus AI interpretation beats AI doing everything

    Anywhere the method has hard rules -- Ba Zi pillars, I Ching hexagram generation, card draws -- we compute the deterministic part in code and hand the AI a clean, structured result to interpret. Letting the model both calculate and interpret invited small arithmetic errors that undermined trust with anyone who actually knew the method.

    Conclusion

    Building an AI fortune teller taught us that the best AI products are not about the technology -- they are about the experience. The React frontend, Express backend, and Groq inference are just tools. What makes Tanya Peramal work is the carefully crafted persona, the progressive session design, the deterministic-plus-AI split for each divination method, and the respect for traditional divination practices most AI wrappers ignore.

    Building something similar for your own niche? [Get a free quote](/get-quote/) and we will map out what an AI-powered product would look like for your business.

    KayFreyTech Editorial Team
    AI Automation & Web Development Specialists · Indonesia · Sejak 2023

    Tim editorial KayFreyTech menulis berdasarkan pengalaman langsung membangun lebih dari 20 website production untuk klien e-commerce, skincare, dan jasa profesional di Indonesia. Spesialisasi: n8n workflow, WhatsApp chatbot, React/Next.js, OWASP-compliant security, PageSpeed 95+ optimization.

    Frequently Asked Questions

    What's the tech stack behind Tanya Peramal?

    React + TypeScript + Vite on the frontend with Tailwind CSS for styling, Express.js with SQLite on the backend, and Groq as the primary AI provider with OpenRouter as a fallback. The whole site is a static SPA with server-side token validation, not a heavy framework.

    Why Groq instead of calling OpenAI or Anthropic directly?

    Speed. Groq runs open models on custom LPU hardware and streams responses in under 2 seconds where a typical GPT or Claude call can take 4-8 seconds. For a product where the entire value is feeling like an instant, mystical response, that gap is the difference between the app feeling magical and feeling broken.

    How much does it cost to run an AI app like this?

    Less than most people assume. Groq's per-token pricing is low, SQLite removes the cost of a managed database server, and the token credit system means AI spend scales directly with paying usage instead of running up a flat subscription bill regardless of traffic.

    Can KayFreyTech build a similar AI-powered app for my business?

    Yes. The same pattern -- React frontend, lightweight backend, fast AI inference, token or credit-based monetization -- applies to a lot of niches beyond fortune telling: customer support agents, personalized recommendation tools, content generators. Get in touch and we will scope what it would take for your use case.

    How fast are the Oracle's responses, and why does that matter?

    Average response time is under 2 seconds thanks to Groq, and we stream the answer token by token so it visibly appears rather than loading all at once. For a fortune telling product specifically, speed is not just a performance metric, it is part of the illusion -- a slow response breaks the mystique the entire product depends on.

    Tags:

    AI
    React
    Groq
    Fortune Telling
    Oracle
    Express.js

    Need Help Implementing This?

    Let our experts help you build and automate your digital presence

    Get Free Consultation
    Chat dengan kami!