# Lightning Lottery Frontend

Next.js-based frontend for the Lightning Lottery system.

## Features

- **Responsive Design**: Mobile-first, works on all devices
- **Real-time Updates**: Live countdown and automatic status polling
- **Lightning Payments**: QR code invoice display
- **Nostr Authentication**: Optional user login via NIP-07
- **User Dashboard**: View tickets, wins, and statistics

## Tech Stack

- **Framework**: Next.js 14 (App Router)
- **Language**: TypeScript
- **Styling**: TailwindCSS
- **State Management**: Redux Toolkit
- **QR Codes**: qrcode.react

## Setup

### Prerequisites

- Node.js 18+
- Backend API running

### Installation

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

2. Configure environment:
```bash
cp .env.example .env.local
# Edit .env.local with your configuration
```

3. Run development server:
```bash
npm run dev
```

Open [http://localhost:3001](http://localhost:3001)

### Production Build

```bash
npm run build
npm start
```

## Environment Variables

- `NEXT_PUBLIC_API_BASE_URL` - Backend API URL
- `NEXT_PUBLIC_APP_BASE_URL` - Frontend public URL

## Pages

- `/` - Home page with current jackpot
- `/buy` - Buy lottery tickets
- `/tickets/[id]` - Ticket status page (public)
- `/dashboard` - User dashboard (Nostr auth required)
- `/dashboard/tickets` - User's ticket history
- `/dashboard/wins` - User's wins

## Components

### Reusable Components

- `TopBar` - Navigation header
- `Footer` - Site footer
- `JackpotCountdown` - Live countdown timer
- `JackpotPotDisplay` - Pot amount display
- `LightningInvoiceCard` - Invoice QR code and copy
- `TicketList` - Display ticket serial numbers
- `PayoutStatus` - Payout status indicator
- `NostrLoginButton` - Nostr authentication

## Deployment

### Vercel

```bash
vercel
```

### Netlify

```bash
netlify deploy --prod
```

### Docker

```bash
docker build -t lightning-lotto-frontend .
docker run -p 3001:3000 lightning-lotto-frontend
```

## License

MIT