Constantin
139 lines
3.4 KiB
Markdown
139 lines
3.4 KiB
Markdown
# Personal Internet Cell - Web UI
|
|
|
|
A modern React-based web interface for managing your Personal Internet Cell.
|
|
|
|
## Features
|
|
|
|
- **Dashboard**: Overview of cell status and services
|
|
- **Peer Management**: Add, remove, and configure WireGuard peers
|
|
- **Network Services**: DNS, DHCP, and NTP management
|
|
- **WireGuard**: VPN configuration and status
|
|
- **Email Services**: Postfix and Dovecot management
|
|
- **Calendar Services**: Radicale CalDAV/CardDAV management
|
|
- **File Storage**: WebDAV file storage management
|
|
- **Routing**: Advanced VPN gateway and routing configuration
|
|
- **Logs**: System logs and monitoring
|
|
- **Settings**: Cell configuration and security settings
|
|
|
|
## Tech Stack
|
|
|
|
- **React 19**: Modern React with hooks
|
|
- **Vite**: Fast build tool and dev server
|
|
- **Tailwind CSS**: Utility-first CSS framework
|
|
- **Lucide React**: Beautiful icons
|
|
- **React Router**: Client-side routing
|
|
- **Axios**: HTTP client for API communication
|
|
|
|
## Development
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 18+ and npm
|
|
- Personal Internet Cell backend running on port 3000
|
|
|
|
### Setup
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
bun install
|
|
```
|
|
|
|
2. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Open your browser to `http://localhost:5173`
|
|
|
|
### Development Features
|
|
|
|
- **Hot Reload**: Changes reflect immediately
|
|
- **API Proxy**: Requests to `/api/*` are proxied to `http://localhost:3000`
|
|
- **TypeScript Support**: Full TypeScript support available
|
|
- **ESLint**: Code linting and formatting
|
|
|
|
## Building for Production
|
|
|
|
### Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
This creates a `dist/` directory with optimized production files.
|
|
|
|
### Preview
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
This serves the built files locally for testing.
|
|
|
|
## API Integration
|
|
|
|
The Web UI communicates with the Personal Internet Cell backend API:
|
|
|
|
- **Base URL**: `http://localhost:3000` (development)
|
|
- **Health Check**: `/health`
|
|
- **API Endpoints**: `/api/*`
|
|
|
|
### Environment Variables
|
|
|
|
Create a `.env` file to customize the API URL:
|
|
|
|
```env
|
|
VITE_API_URL=http://localhost:3000
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # Reusable UI components
|
|
│ └── Sidebar.jsx # Navigation sidebar
|
|
├── pages/ # Page components
|
|
│ ├── Dashboard.jsx # Main dashboard
|
|
│ ├── Peers.jsx # Peer management
|
|
│ ├── NetworkServices.jsx
|
|
│ ├── WireGuard.jsx # VPN configuration
|
|
│ ├── Email.jsx # Email services
|
|
│ ├── Calendar.jsx # Calendar services
|
|
│ ├── Files.jsx # File storage
|
|
│ ├── Routing.jsx # Routing configuration
|
|
│ ├── Logs.jsx # System logs
|
|
│ └── Settings.jsx # Cell settings
|
|
├── services/ # API services
|
|
│ └── api.js # API client and endpoints
|
|
├── App.jsx # Main app component
|
|
├── main.jsx # App entry point
|
|
└── index.css # Global styles
|
|
```
|
|
|
|
## Styling
|
|
|
|
The Web UI uses Tailwind CSS with custom components:
|
|
|
|
- **Cards**: `.card` for content containers
|
|
- **Buttons**: `.btn`, `.btn-primary`, `.btn-secondary`, etc.
|
|
- **Inputs**: `.input` for form fields
|
|
- **Status Indicators**: `.status-indicator`, `.status-online`, etc.
|
|
|
|
## Browser Support
|
|
|
|
- Chrome 90+
|
|
- Firefox 88+
|
|
- Safari 14+
|
|
- Edge 90+
|
|
|
|
## Contributing
|
|
|
|
1. Follow the existing code style
|
|
2. Use TypeScript for new components
|
|
3. Add tests for new features
|
|
4. Update documentation as needed
|
|
|
|
## License
|
|
|
|
Part of the Personal Internet Cell project.
|