An e-commerce platform with augmented reality try-on capabilities for wigs and head accessories. Professional, casual, fashion, and costume styles - all with a hauntingly beautiful shopping experience.

"If it's not on mobile, it doesn't exist."

This application is built mobile-first, optimized for phone cameras (which are typically superior to webcams). The AR try-on experience works beautifully on smartphones with touch gestures, photo upload, and responsive design throughout.

Quick Mobile Test: Start the dev server, get your computer's IP address, and access from your phone on the same WiFi: http://YOUR_IP:3000

See Mobile Testing Guide for details.

spooky-styles-ar-store/
├── frontend/          # React + TypeScript frontend with Vite
├── backend/           # Node.js + Express backend API
├── docker-compose.yml # Local PostgreSQL and Redis setup
└── package.json       # Monorepo workspace configuration

• Node.js 18+ and npm
• Docker and Docker Compose (for local database)
• Git

# Install root dependencies and workspace dependencies
npm install

# Copy example environment files
cp .env.example .env
cp frontend/.env.example frontend/.env

# Edit .env files with your configuration

# Start PostgreSQL and Redis with Docker Compose
docker-compose up -d

# Verify services are running
docker-compose ps

# Run both frontend and backend concurrently
npm run dev

# Or run them separately:
npm run dev:frontend  # Frontend on http://localhost:3000
npm run dev:backend   # Backend on http://localhost:5000

• npm run dev - Run both frontend and backend in development mode
• npm run build - Build both workspaces for production
• npm run lint - Lint all workspaces
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

• npm run dev --workspace=frontend - Start Vite dev server
• npm run build --workspace=frontend - Build for production
• npm run preview --workspace=frontend - Preview production build

• npm run dev --workspace=backend - Start backend with hot reload
• npm run build --workspace=backend - Compile TypeScript
• npm run start --workspace=backend - Run compiled backend

1. Start dev server: npm run dev
2. Get your IP: ipconfig (Windows) or ifconfig (Mac/Linux)
3. Access from phone: http://YOUR_IP:3000

• Superior Camera Quality: Phone cameras > webcams
• Touch Gestures: Drag to position, tap to select
• Photo Upload: Alternative to live camera
• Responsive Design: Optimized for all screen sizes
• Portrait Mode: 9:16 AR canvas for phones
• Auto-Fit: One-tap wig positioning

See Mobile Testing Quick Reference for complete guide.

• React 18 with TypeScript
• Vite for build tooling
• Three.js + React Three Fiber for 3D rendering
• TensorFlow.js with MediaPipe for face tracking
• Zustand for state management
• TailwindCSS for styling (mobile-first)
• Stripe for payments
• Mobile-optimized: Touch events, responsive breakpoints, PWA-ready

• Node.js with Express
• TypeScript
• PostgreSQL for data storage
• Redis for caching and sessions
• Stripe API for payment processing
• JWT for authentication

• ESLint for code linting
• Prettier for code formatting
• Husky for Git hooks
• lint-staged for pre-commit checks

The docker-compose.yml provides:

• PostgreSQL 15: Database on port 5432
• Redis 7: Cache and session store on port 6379

See .env.example and frontend/.env.example for required configuration.

MIT