Mall Explorer

A premium dark-themed mall discovery web app for Abu Dhabi malls. Browse stores, events, deals, and navigate indoors with interactive maps.

Tech Stack

• React 19 + TypeScript
• Vite 7 — fast dev server & bundler
• Tailwind CSS 4 — utility-first styling (OKLCH color system)
• Wouter — lightweight client-side routing
• Framer Motion — animations & transitions
• Firebase — Auth, Firestore, Analytics
• Lucide React — icon set

Getting Started

# Install dependencies
npm install

# Create .env.local with Firebase config (see .env.local.example)

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Environment Variables

Create a .env.local file with the following Firebase config:

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=

Project Structure

src/
├── main.tsx                 # React entry point
├── index.css                # Global styles, design tokens
├── App.tsx                  # Routes + AuthProvider
├── components/
│   ├── Layout.tsx           # Header + bottom tabs
│   └── SearchOverlay.tsx    # Full-screen search modal
├── config/
│   └── firebase.ts          # Firebase init
├── contexts/
│   └── AuthContext.tsx       # Auth state machine
├── lib/
│   ├── data.ts              # Mall/store/event/deal data + helpers
│   ├── userSchema.ts        # Firestore user doc helpers + coupon logic
│   ├── scannedReceipts.ts   # Receipt verification pipeline
│   └── utils.ts             # cn() utility
└── pages/
    ├── Home.tsx             # Hero, mall cards, categories, new stores
    ├── MallDetail.tsx       # Store directory, filters, map CTA
    ├── Events.tsx           # Events with category filters
    ├── Deals.tsx            # Deals with category filters
    ├── SearchPage.tsx       # Standalone search with URL query
    ├── IndoorMap.tsx        # Full-screen iframe navigation
    └── NotFound.tsx         # 404 page

Design

"Midnight Luxe" — dark editorial commerce aesthetic with navy backgrounds and teal accent color. Mobile-first with frosted glass cards, staggered entrance animations, and a bottom tab navigation pattern.