Mystic Arcana

Overview

Mystic Arcana turns a 78-card Rider–Waite deck into a full product. A visitor can pull a free card with no account at all, step up to an AI-interpreted three-card or Celtic Cross spread, book a live chat consultation billed by the minute, or buy decks and ritual tools from the emporium. I built the App Router frontend and wired it to a separate Node REST API — auth, readings, readers, cart, and orders — and designed the whole occult-luxe visual language: midnight gradients, drifting starfield, gold leaf accents, and a serif display face that makes the interface feel like an object rather than a dashboard.

Key features

• Free single-card draw with no sign-up required
• AI-guided three-card and Celtic Cross spreads ($4.99 / $14.99)
• Live one-to-one reader consultations, billed by the minute
• Tarot emporium with cart and order history
• Authenticated dashboard for readings, consultations, and orders
• Animated starfield hero with layered, parallaxed tarot cards

Challenges & solutions

• Four very different surfaces — free draw, paid spreads, live chat, storefront — had to feel like one product. A single token layer (Tailwind v4 + oklch) and a shared card/section vocabulary keep the ritual tone intact from the hero all the way to checkout.

• The free draw is the top of the funnel, so it cannot be gated. Readings are anonymous until a visitor chooses to sign in, and the premium spreads swap their CTA to a sign-in prompt instead of hiding behind a wall.

• Client-side data comes from a separate Node API on another origin. TanStack Query handles caching, loading skeletons, and retries, and every list renders a designed empty state so the page still reads well when the API is cold.