Mystika
AI-Powered Tarot & Astrology
Overview
Mystika is a full-featured, AI-powered tarot reading and esoteric guidance web application. Users receive personalised tarot readings across eight unique spreads, daily horoscopes, birth-chart analyses and an interactive encyclopedia of all 78 tarot cards.
The platform is fully internationalised (English, Spanish, Portuguese, German), GDPR-compliant, and monetised through Stripe subscriptions, one-off credit purchases, and gift vouchers.
As the sole designer and developer, I was responsible for every layer — from brand identity, UI/UX design and front-end development to back-end architecture, AI integration, database design and deployment.
Architecture & Technologies
Built with Next.js 15 (App Router), React 19 and TypeScript on a serverless Vercel deployment. The UI is styled with Tailwind CSS 4 and enriched with Framer Motion animations — from card-flip reveals to themed confetti celebrations.
The back-end relies on PostgreSQL via Prisma ORM for relational data and NextAuth for authentication. AI-generated readings are powered by Groq's Llama 3.1 models, while astronomical calculations use the astronomy-engine library for precise natal chart computations.
Payments are handled end-to-end by Stripe (subscriptions, one-off purchases, gift vouchers). Emails are sent through Resend, bot protection uses Cloudflare Turnstile, and the app ships with PDF export of readings via jsPDF.
Brand Identity & Visual Language
The brand palette pairs deep indigo (#1c1c84) with rich gold (#ce8901) — evoking a sense of mysticism, trust and premium quality. Glassmorphism cards, subtle backdrop blurs and element-based colour coding (fire, earth, air, water) create a cohesive and immersive experience.
Typography is carefully layered: Cormorant Garamond for elegant headings, Eagle Lake for brand marks, Inter for clean UI text, and Lora for reading content — each font reinforcing the mystical yet approachable personality of the brand.
Typography
Mystika's typographic system layers four complementary families: Cormorant Garamond for elegant display headings, Eagle Lake for brand marks and decorative accents, Inter for clean interface text, and Lora for immersive reading content.
Colour Palette
Deep indigo paired with rich gold forms the brand's core identity — evoking mysticism, trust and premium quality. Element-based colour coding (fire, earth, air, water) extends the palette across tarot spreads and zodiac content.
App Screens
A selection of key screens from the Mystika application — showcasing the tarot reading experience, horoscope pages, birth-chart analyses and the overall visual identity.
Eight Tarot Spreads
Mystika offers eight distinct reading types: Yes/No (free entry point), Daily Tarot, Love Tarot, Celtic Cross, Career & Prosperity, Shadow Work, Past Life, and Life Purpose. Each spread features interactive card-flip animations with desktop row layouts and responsive mobile carousels.
Every reading is interpreted in real-time by an LLM fine-tuned on Rider-Waite-Smith symbolism, delivering personalised insights grounded in authentic tarot tradition.
Horoscopes & Birth Charts
Daily horoscopes are generated for all 12 zodiac signs, each with its own detailed page. The birth-chart module uses the astronomy-engine library to compute exact planet positions, houses and aspects based on the user's date, time and place of birth.
AI-generated birth-chart analyses are available as a premium purchase, giving users deep personality insights rooted in their unique natal configuration.
Internationalisation & Monetisation
The application supports four languages — English, Spanish, Portuguese and German — with locale detection via geo-IP and cookie-based persistence. All UI text, reading content and SEO metadata are fully translated.
Revenue streams include Stripe-managed monthly and yearly subscriptions, one-off credit purchases for individual readings, gift vouchers that can be bought and redeemed, and premium birth-chart analyses. A free reading gate encourages trial before purchase.