pi-pm3/app/frontend

Dangerous Pi Frontend

Modern, lightweight web interface for Proxmark3 management built with Remix.js.

Features

• Cyberpunk Theme - Dark mode default with light mode support
• Responsive Design - Mobile-first, works on all screen sizes
• Real-time Updates - SSE integration for live status
• Lightweight - Optimized for Pi Zero 2 W (< 150KB bundle)
• Progressive Enhancement - Works without JavaScript

Tech Stack

• Framework: Remix v2 (React Router)
• Styling: Vanilla CSS (no framework, ~15KB)
• Build: Vite
• TypeScript: Full type safety

Development

Prerequisites

• Node.js 18+
• npm or yarn
• Backend running on http://localhost:8000

Install Dependencies

npm install

Start Development Server

npm run dev

Frontend will be available at http://localhost:3000

The dev server proxies API requests to the backend (http://localhost:8000).

Build for Production

npm run build

Start Production Server

npm start

Project Structure

app/
├── routes/              # Page routes
│   ├── _index.tsx       # Dashboard (/)
│   ├── commands.tsx     # PM3 Commands (/commands)
│   ├── settings.tsx     # Settings (/settings)
│   └── logs.tsx         # Command Logs (/logs)
├── root.tsx             # Root layout
├── styles.css           # Global styles
└── entry.*.tsx          # Client/Server entry points

Pages

Dashboard (/)

• System status (CPU, memory, disk)
• PM3 connection status
• Quick actions
• Real-time SSE updates

Commands (/commands)

• Execute PM3 commands
• Quick command buttons
• Terminal-style output
• Command history with ↑/↓ navigation

Settings (/settings)

• General settings (auth, HTTPS)
• Wi-Fi configuration
• Advanced options (PM3 device, BLE)
• System actions (restart, shutdown)

Logs (/logs)

• Command history table
• Export functionality (planned)
• System logs (planned)

Design System

Colors (Cyberpunk)

• Primary: Cyan (#00ffff)
• Secondary: Magenta (#ff00ff)
• Accent: Green (#00ff88)
• Background: Dark Blue (#0a0e1a)

Typography

• Sans: System font stack (zero download)
• Mono: SF Mono, Monaco, Cascadia Code, etc.

Components

• Buttons (primary, secondary, danger)
• Cards with hover effects
• Status badges with pulse animation
• Terminal-style code blocks
• Toast notifications
• Form inputs with focus states

Theme System

Supports three modes:

• dark - Cyberpunk dark theme (default)
• light - Clean light theme
• auto - Follow system preference

Theme persisted in localStorage, toggled via header button.

API Integration

REST Endpoints

// System
GET  /api/health
GET  /api/system/info
POST /api/system/session/create
GET  /api/system/config

// PM3
GET  /api/pm3/status
POST /api/pm3/command
GET  /api/pm3/commands/history

SSE Events

GET /sse/events

// Events:
- connected
- pm3_status
- update_available
- backup_complete
- ups_battery

Performance Optimization

Targets

• First Contentful Paint: < 1.5s
• Time to Interactive: < 3s
• Bundle Size: < 150KB gzipped

Techniques

• Server-side rendering (SSR)
• CSS-only animations
• System fonts (no web fonts)
• Code splitting by route
• Minimal dependencies

Accessibility

• WCAG 2.1 AA compliant
• Keyboard navigation
• Focus indicators
• ARIA labels
• Screen reader tested

Testing Checklist

• Works without JavaScript
• Mobile responsive (320px+)
• Dark/light mode toggle
• SSE connection
• Command execution
• Session management
• Keyboard shortcuts
• Touch targets (44x44px)

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS 14+, Android 10+)

Deployment

With Backend

The frontend should be built and served by the backend in production:

# Build frontend
cd app/frontend
npm run build

# Backend serves from build/client/

Standalone (Development)

For development, run separately:

# Terminal 1: Backend
python -m app.backend.main

# Terminal 2: Frontend
cd app/frontend
npm run dev

Contributing

See UI_GUIDELINES.md for design principles and best practices.

License

Part of the Dangerous Pi project. Built for Dangerous Things.