gridpilot.gg/apps/website/README.md

# GridPilot Landing Page

Pre-launch landing page for GridPilot with email signup functionality.

## Features

- **Mode Switching**: Toggle between pre-launch (landing page only) and alpha (full platform) modes
- **Email Capture**: Collect email signups with validation and rate limiting
- **Production Ready**: Configured for Vercel deployment with KV storage

## Local Development Setup

### Prerequisites

- Node.js 20+
- npm or pnpm

### Installation

1. Clone the repository and navigate to the website directory:
```bash
cd apps/website
```

2. Install dependencies:
```bash
npm install
```

3. Copy environment variables:
```bash
cp .env.example .env.local
```

4. Configure environment variables in `.env.local`:
```bash
# Application Mode (pre-launch or alpha)
NEXT_PUBLIC_GRIDPILOT_MODE=pre-launch

# Vercel KV (required for email signups)
KV_REST_API_URL=your_kv_rest_api_url_here
KV_REST_API_TOKEN=your_kv_rest_api_token_here

# Site URL
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```

5. Start the development server:
```bash
npm run dev
```

Visit `http://localhost:3000` to see the landing page.

## Environment Variables

### Required Variables

| Variable | Description | Example |
|----------|-------------|---------|
| `NEXT_PUBLIC_GRIDPILOT_MODE` | Application mode (pre-launch or full platform) | `pre-launch` or `alpha` |

### Optional Variables

| Variable | Description | Example |
|----------|-------------|---------|
| `FEATURE_FLAGS` | Feature override (comma-separated) | `driver_profiles,wallets` |
| `KV_REST_API_URL` | Vercel KV REST API endpoint | From Vercel Dashboard |
| `KV_REST_API_TOKEN` | Vercel KV authentication token | From Vercel Dashboard |
| `NEXT_PUBLIC_SITE_URL` | Public site URL | `https://gridpilot.com` |

### Getting Vercel KV Credentials

1. Go to [Vercel Dashboard](https://vercel.com/dashboard)
2. Navigate to **Storage** → **Create Database** → **KV**
3. Create a new KV database (free tier available)
4. Copy the `KV_REST_API_URL` and `KV_REST_API_TOKEN` from the database settings
5. Add them to your environment variables

## Application Modes

### Pre-Launch Mode (Default)
```bash
NEXT_PUBLIC_GRIDPILOT_MODE=pre-launch
```
- Landing page only
- Email signup functionality
- No navigation or footer
- All platform features disabled

### Alpha Mode (Full Platform)
```bash
NEXT_PUBLIC_GRIDPILOT_MODE=alpha
```
- Full platform access
- **All features automatically enabled**
- Navigation and footer visible
- Discovery section on landing page

### Available Feature Flags
When in alpha mode, these features are automatically enabled:
- `driver_profiles` - Driver profile pages and features
- `team_profiles` - Team profile pages and features
- `wallets` - All wallet functionality (driver/team/league/sponsor)
- `sponsors` - Sponsor management features
- `team_feature` - Complete team functionality
- `alpha_features` - Landing page discovery section

### Custom Feature Selection (Optional)
If you need fine-grained control, use `FEATURE_FLAGS`:
```bash
NEXT_PUBLIC_GRIDPILOT_MODE=alpha
FEATURE_FLAGS=driver_profiles,wallets
```

## Configuration Examples

### Basic Alpha Setup (Recommended)
```bash
# .env.local
NEXT_PUBLIC_GRIDPILOT_MODE=alpha
# All features enabled automatically - no FEATURE_FLAGS needed
```

### Pre-Launch Setup
```bash
# .env.local
NEXT_PUBLIC_GRIDPILOT_MODE=pre-launch
# Landing page only
```

### Custom Feature Selection
```bash
# .env.local
NEXT_PUBLIC_GRIDPILOT_MODE=alpha
FEATURE_FLAGS=driver_profiles,wallets
# Only driver profiles and wallets enabled
```

## How It Works

1. **Mode Detection**: `NEXT_PUBLIC_GRIDPILOT_MODE` sets overall platform access
2. **Feature Bundling**: Alpha mode automatically enables all features via `FeatureFlagService`
3. **Override**: `FEATURE_FLAGS` can selectively enable/disable features
4. **Component Usage**: Components check feature flags using `FeatureFlagService.fromEnv().isEnabled('feature_name')`

## Migration Guide

### From Manual Feature Flags
**Before**:
```bash
NEXT_PUBLIC_GRIDPILOT_MODE=alpha
FEATURE_FLAGS=alpha_features,driver_profiles,team_profiles,wallets,sponsors,team_feature
```

**After**:
```bash
NEXT_PUBLIC_GRIDPILOT_MODE=alpha
# FEATURE_FLAGS not needed - everything automatic!
```

### No Code Changes Required
Your existing code continues to work:
```typescript
const featureService = FeatureFlagService.fromEnv();
const isAlpha = featureService.isEnabled('alpha_features');
// Works in both old and new system
```

## Email Signup API

### Endpoint

`POST /api/signup`

### Request Body

```json
{
  "email": "user@example.com"
}
```

### Response

**Success (200):**
```json
{
  "success": true,
  "message": "Successfully added to waitlist"
}
```

**Error (400/409/429/500):**
```json
{
  "error": "Error message here"
}
```

### Features

- **Validation**: Email format validation using Zod
- **Rate Limiting**: Max 5 submissions per IP per hour
- **Duplicate Prevention**: Prevents duplicate email submissions
- **Disposable Email Detection**: Blocks common disposable email services
- **Storage**: Emails stored in Vercel KV with timestamp and IP

### Accessing Submitted Emails

Submitted emails are stored in Vercel KV under the key `signups:emails`.

**Option 1: Vercel KV Dashboard**
1. Go to [Vercel Dashboard](https://vercel.com/dashboard)
2. Navigate to **Storage** → Your KV Database
3. Browse the `signups:emails` hash

**Option 2: CLI (with Vercel KV SDK)**
```typescript
import { kv } from '@vercel/kv';

// Get all signups
const signups = await kv.hgetall('signups:emails');
console.log(signups);
```

## Deployment

### Vercel Deployment (Recommended)

1. **Connect Repository**
   - Go to [Vercel Dashboard](https://vercel.com/new)
   - Import your Git repository
   - Select the `apps/website` directory as the root

2. **Configure Build Settings**
   - Framework Preset: Next.js
   - Build Command: `npm run build`
   - Output Directory: `.next`
   - Install Command: `npm install`

3. **Set Environment Variables**
   
   In Vercel Dashboard → Project Settings → Environment Variables:
   
   **Production:**
   ```
   NEXT_PUBLIC_GRIDPILOT_MODE=pre-launch
   KV_REST_API_URL=<your_vercel_kv_url>
   KV_REST_API_TOKEN=<your_vercel_kv_token>
   NEXT_PUBLIC_SITE_URL=https://gridpilot.com
   ```
   
   **Preview (optional):**
   Same as production, or use different values for testing

4. **Deploy**
   - Click "Deploy"
   - Vercel will automatically deploy on every push to main branch

### Switching to Post-Launch Mode

When ready to launch the full platform:

1. Go to Vercel Dashboard → Project Settings → Environment Variables
2. Update `NEXT_PUBLIC_GRIDPILOT_MODE` to `alpha`
3. Redeploy the application (automatic if you save changes)

### Custom Domain Setup

1. Go to Vercel Dashboard → Project Settings → Domains
2. Add your domain (e.g., `gridpilot.com`)
3. Follow DNS configuration instructions
4. Update `NEXT_PUBLIC_SITE_URL` environment variable to match your domain

## Build & Test

### Build for Production

```bash
npm run build
```

This creates an optimized production build in `.next/` directory.

### Start Production Server

```bash
npm run start
```

### Lint

```bash
npm run lint
```

## Testing Email Signup

### Test Locally

1. Start the development server
2. Navigate to `http://localhost:3000`
3. Scroll to "Want Early Access?" section
4. Enter an email and click "Join Waitlist"

### Test Scenarios

- ✅ Valid email submission
- ✅ Invalid email format rejection
- ✅ Duplicate email prevention
- ✅ Rate limiting (5 submissions per hour)
- ✅ Loading states
- ✅ Error messages
- ✅ Success confirmation

### Test Rate Limiting

Submit the same email 5 times within an hour. The 6th submission should return a 429 error.

## Troubleshooting

### Email Signup Not Working

**Issue**: API returns 500 error

**Solution**: Check that `KV_REST_API_URL` and `KV_REST_API_TOKEN` are correctly set in environment variables

### Mode Switching Not Working

**Issue**: Routes still show 404 in alpha mode

**Solution**:
1. Ensure `NEXT_PUBLIC_GRIDPILOT_MODE` is set to `alpha`
2. Restart the development server or redeploy to Vercel
3. Clear browser cache

### Rate Limiting Issues

**Issue**: Rate limiting not working in development

**Solution**: Vercel KV may need to be properly configured. Check KV dashboard for errors.

## Project Structure

```
apps/website/
├── app/
│   ├── api/
│   │   └── signup/
│   │       └── route.ts          # Email signup API endpoint
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx                  # Landing page
├── components/
│   ├── landing/
│   │   ├── EmailCapture.tsx      # Email signup form
│   │   ├── FAQ.tsx
│   │   ├── FeatureGrid.tsx
│   │   ├── Hero.tsx
│   │   └── RatingExplainer.tsx
│   ├── mockups/                  # UI mockups
│   ├── shared/
│   │   └── ModeGuard.tsx         # Client-side mode guard
│   └── ui/                       # Reusable UI components
├── lib/
│   ├── email-validation.ts       # Email validation utilities
│   ├── mode.ts                   # Mode detection utilities
│   └── rate-limit.ts             # Rate limiting utilities
├── middleware.ts                 # Next.js middleware for route protection
├── .env.example                  # Environment variables template
└── README.md                     # This file
```

## Tech Stack

- **Framework**: Next.js 15 (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **Validation**: Zod
- **Storage**: Vercel KV (Redis)
- **Deployment**: Vercel

## Support

For issues or questions, contact the development team or open an issue in the repository.