153 lines
3.7 KiB
Markdown
153 lines
3.7 KiB
Markdown
# 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
|