Lamorinda Fencing Academy - Waitlist Platform

# Lamorinda Fencing Academy - Waitlist Platform

## Overview

This is a full-stack web application for Lamorinda Fencing Academy, designed to collect waitlist registrations for their upcoming youth fencing program. The application serves as a landing page with comprehensive program information and a waitlist form system.

## System Architecture

### Frontend Architecture
- **Framework**: React 18 with TypeScript
- **Styling**: Tailwind CSS with custom Olympic-themed color scheme
- **UI Components**: Radix UI primitives via shadcn/ui component library
- **Routing**: Wouter for lightweight client-side routing
- **State Management**: React Query (TanStack Query) for server state management
- **Form Handling**: React Hook Form with Zod validation

### Backend Architecture
- **Runtime**: Node.js with Express.js
- **Language**: TypeScript with ESM modules
- **Database**: PostgreSQL via Neon Database (serverless)
- **ORM**: Drizzle ORM for type-safe database operations
- **Session Management**: In-memory storage for development (can be extended to PostgreSQL)

### Build System
- **Bundler**: Vite for frontend development and building
- **Server Build**: ESBuild for production server bundling
- **Development**: Hot module replacement via Vite middleware

## Key Components

### Database Schema
- **Users Table**: Basic user authentication structure (username, password)
- **Waitlist Entries Table**: Stores waitlist registrations with fields:
  - Parent name and email
  - Child name and age
  - Fencing experience level
  - Timestamp for registration tracking

### API Endpoints
- `POST /api/waitlist` - Create new waitlist entry with duplicate email checking
- `GET /api/waitlist` - Retrieve all waitlist entries (admin functionality)
- `POST /api/create-payment-intent` - Create Stripe payment intent for $25 deposit

### Frontend Pages
- **Home Page**: Single-page application with sections:
  - Hero section with call-to-action
  - Program details and benefits
  - Why Fencing benefits section
  - Elite coaches section featuring Olympic-trained instructors
  - Tournament highlights showcase
  - Equipment showcase
  - Waitlist registration form with priority deposit option
  - Footer with contact information
- **Checkout Page**: Stripe payment integration for $25 refundable deposit
- **Payment Success Page**: Confirmation page after successful payment

### UI Components
- Custom Olympic-themed design system
- Responsive layout optimized for mobile and desktop
- Form validation with real-time feedback
- Toast notifications for user feedback
- Loading states and error handling

## Data Flow

1. **User Registration Flow**:
   - User fills out waitlist form on homepage
   - Form validation occurs client-side using Zod schemas
   - API request sent to backend with form data
   - Backend validates data and checks for duplicate emails
   - Database stores new entry with timestamp
   - Success/error feedback displayed to user

2. **Development Workflow**:
   - Vite dev server serves frontend with HMR
   - Express server handles API requests
   - Shared schema definitions ensure type safety
   - Database operations handled via Drizzle ORM

## External Dependencies

### Core Dependencies
- **Database**: Neon Database (PostgreSQL serverless)
- **UI Library**: Radix UI primitives for accessible components
- **Validation**: Zod for runtime type checking and validation
- **Styling**: Tailwind CSS for utility-first styling
- **Icons**: Lucide React for consistent iconography

### Development Tools
- **TypeScript**: Full type safety across frontend and backend
- **ESLint/Prettier**: Code formatting and linting
- **Drizzle Kit**: Database migrations and schema management

## Deployment Strategy

### Production Build
- Frontend built as static assets via Vite
- Backend compiled to single JavaScript file via ESBuild
- Shared types compiled for both client and server

### Environment Configuration
- Database connection via `DATABASE_URL` environment variable
- Production/development environment detection
- Session storage configurable for production scaling

### Hosting Requirements
- Node.js runtime environment
- PostgreSQL database (Neon Database recommended)
- Static asset serving capability
- Environment variable configuration

## User Preferences

Preferred communication style: Simple, everyday language.

## Changelog

Changelog:
- July 05, 2025. Initial setup
- July 05, 2025. Added coaches section featuring Gabriel Sinkin and Steve Gerberman with Olympic training backgrounds and college fencing records
- July 06, 2025. Updated location to "TBD, but in Orinda, Lafayette, or Moraga, CA" and corrected coach name to Steve Gerberman
- July 06, 2025. Implemented Stripe payment integration for $25 refundable deposits with priority waitlist placement, checkout flow, and payment success page