AeThex-Connect/packages/web/README.md

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

npm install --workspace=@aethex/web

Development

npm run dev -w @aethex/web

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

Building

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

npm run test -w @aethex/web

Deployment

Vercel

vercel deploy

Netlify

netlify deploy --prod --dir dist

Docker

docker build -t aethex-web .
docker run -p 3000:80 aethex-web

Contributing

See main CONTRIBUTING.md

License

MIT