George KhayatSoftware Engineer
← The ArchiveGK-002 — archive file

GK-002 · E-commerce · Frontend · UX

MysteryPersona

Digital personality experience

An AI-powered digital personality experience featuring interactive card decks, cinematic storytelling and guided self-discovery.

Year
—
Status
Live
Context
Live brand project
Stack
HTML · CSS · JavaScript · Stripe · Node.js · Firebase
Links
mysterypersona.me ↗
01

Problem

The brand needed an e-commerce experience that matched its mystical identity — standard platforms felt generic and broke immersion.

02

What was built

A custom-built storefront with interactive product reveals, tiered draw mechanics (single, triple and lifetime), persona-card reveal animations, responsive motion and one consistent brand experience from landing page to checkout.

03

System

checkoutClientStorefrontProcessDraw mechanicsExternalStripeEdge / APINode.jsDataFirebase
Hover or tab through the nodes to trace each pathway.
  1. Stage 01
    • StorefrontHTML / CSS / JS with custom animations
    • Draw mechanicsSingle · triple · lifetime; persona-card reveals
  2. Stage 02
    • StripePayment processing
  3. Stage 03
    • Node.jsBackend
  4. Stage 04
    • FirebaseUser data and order tracking
Storefront → payments → backend → data
04

Technical decisions

  1. D01

    Custom, not templated

    The storefront is designed and built from scratch so the purchase flow never breaks the atmosphere of the brand.

  2. D02

    Tiered draws

    Purchases are modelled as draws — single, triple or lifetime — each ending in an animated persona-card reveal.

  3. D03

    Payments & data

    Stripe handles payment; a Node.js backend and Firebase store user data and track orders.

05

Outcome

  • Launched as a production-ready e-commerce platform with integrated payment processing, responsive design and a scalable frontend architecture.