# AeThex Connect - Web PWA

Progressive Web App for AeThex Connect built with React, TypeScript, and Vite.

## Features

- **Real-time Messaging** - End-to-end encrypted conversations
- **Voice & Video Calls** - WebRTC-powered calls with crystal-clear quality
- **Offline Support** - Service worker enables offline messaging and call history
- **Dark Gaming Theme** - Modern, dark UI optimized for long sessions
- **Progressive Enhancement** - Works on desktop and mobile with native app-like experience
- **Responsive Design** - Tailwind CSS for mobile-first design

## Project Structure

```
packages/web/src/
├── index.tsx                # App entry point with PWA registration
├── App.tsx                  # Main router and layout
├── pages/
│   ├── LoginPage.tsx       # Authentication
│   ├── HomePage.tsx        # Dashboard
│   ├── ChatPage.tsx        # Messaging interface
│   ├── CallsPage.tsx       # Voice/video calls
│   └── SettingsPage.tsx    # User preferences
├── layouts/
│   └── MainLayout.tsx      # Sidebar + header layout
├── components/             # Reusable UI components
├── hooks/                  # Custom React hooks
├── utils/
│   ├── serviceWorker.ts    # PWA registration
│   └── webrtc.ts          # WebRTC signaling
└── styles/
    ├── global.css         # Tailwind + custom styles
    └── app.css           # Component styles
```

## Installation

```bash
npm install --workspace=@aethex/web
```

## Development

```bash
npm run dev -w @aethex/web
```

Open http://localhost:5173 in your browser.

## Building

```bash
npm run build -w @aethex/web
npm run preview -w @aethex/web
```

## PWA Features

### Service Worker
- **Cache First**: Static assets cached for instant loading
- **Network First**: API requests fetch fresh data with cache fallback
- **Background Sync**: Offline messages synced when connection restored

### Manifest
- **Installable**: Add to homescreen on mobile devices
- **Standalone**: Runs as full-screen app without browser UI
- **Icons**: Adaptive icons for modern devices

### Offline Support
- Browse offline messages and call history
- Compose messages while offline (synced automatically)
- Works without internet connection

## Redux State Management

- **Auth Slice**: User authentication, tokens, profile
- **Messaging Slice**: Conversations, messages, read receipts
- **Calls Slice**: Active calls, call history, voice state

## WebRTC Integration

- **Peer Connections**: Manage multiple simultaneous calls
- **Signaling**: Socket.IO-based call negotiation
- **Media Streams**: Audio/video track control
- **ICE Candidates**: Automatic NAT traversal

## Styling

Uses **Tailwind CSS** with custom configuration:
- Dark gaming theme (purple/pink accents)
- Responsive breakpoints
- Smooth animations and transitions
- Custom components (@layer directives)

## Environment Variables

Create `.env.local`:

```
VITE_API_URL=http://localhost:3000
VITE_SOCKET_URL=ws://localhost:3000
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_KEY=your_supabase_key
```

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers with Service Worker support

## Performance Optimizations

- Code splitting with React Router
- Lazy component loading
- Image optimization
- CSS purging with Tailwind
- Service worker caching strategies

## Testing

```bash
npm run test -w @aethex/web
```

## Deployment

### Vercel
```bash
vercel deploy
```

### Netlify
```bash
netlify deploy --prod --dir dist
```

### Docker
```bash
docker build -t aethex-web .
docker run -p 3000:80 aethex-web
```

## Contributing

See main [CONTRIBUTING.md](../../CONTRIBUTING.md)

## License

MIT