mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-02 17:31:39 +00:00
Prad NukalaandGitHub
6f6a20922c
* chore: Add Homebrew Casks for snrd/hway * fix: Tag bump format for npm packages * chore: Remove plugin setup
Dashboard App
This is the user dashboard for Highway WebAuthn authentication gateway. It provides a comprehensive interface for user management, console interactions, and system monitoring, integrating with the Blockchain x/svc module.
Features
- User Management: Complete user account management and profile editing
- Console Interface: Interactive console for system operations
- System Monitoring: Real-time monitoring of service health and performance
- Blockchain Integration: Direct integration with Sonr Blockchain x/svc module
- Authentication: WebAuthn-based secure authentication
- Responsive Design: Mobile-first approach with modern UI/UX
Development
To start the development server:
pnpm dev
This will start the Next.js development server with hot reload at http://localhost:3001.
Testing
# Run tests
pnpm test
# Test dashboard functionality
# Visit http://localhost:3001 and test management features
Deployment
To deploy to Cloudflare Pages:
pnpm deploy
The app is configured for static export and optimized for Cloudflare Pages deployment.
Configuration
Environment Variables
# API endpoints
NEXT_PUBLIC_API_URL=https://api.yourdomain.com
NEXT_PUBLIC_BLOCKCHAIN_URL=https://blockchain.yourdomain.com
# Development
NEXT_PUBLIC_API_URL=http://localhost:8080
NEXT_PUBLIC_BLOCKCHAIN_URL=http://localhost:8080
Development Roadmap
🔮 Future Implementation (Planned)
- Dashboard Framework: Next.js 14 setup with TypeScript configuration
- User Management: User account creation, editing, and deletion
- Console Interface: Interactive console for system operations
- System Monitoring: Real-time service health and performance metrics
- Blockchain Integration: Direct integration with Sonr Blockchain x/svc module
- Authentication: WebAuthn-based secure authentication
- Responsive Design: Mobile-first approach with modern UI/UX
🚧 Production Readiness (Next)
- Performance Optimization: Code splitting and bundle optimization
- Testing Suite: Unit tests for components and hooks
- E2E Testing: Cypress or Playwright for full user flow testing
- Error Boundaries: React error boundaries for graceful error handling
- Analytics: User behavior tracking and conversion metrics
- Security: Role-based access control and audit logging
🔮 Future Enhancements
- Advanced Analytics: Detailed system analytics and reporting
- Multi-tenant Support: Organization-based dashboard isolation
- Advanced UI: Dark mode, animations, and enhanced UX
- Mobile App: React Native or native mobile applications
- API Management: Advanced API key management and monitoring
- Backup & Recovery: System backup and disaster recovery features
Architecture
The dashboard follows modern React patterns:
- App Router: Next.js 13+ app directory structure
- Custom Hooks: Reusable logic for dashboard operations
- Component Library: Shared UI components from
@sonr.io/ui - State Management: React hooks for local state management
- Styling: Tailwind CSS with custom dashboard styling
Security
- WebAuthn Authentication: Secure admin authentication
- Role-based Access: Different permission levels for dashboard features
- Input Validation: Client-side validation with server-side verification
- Audit Logging: Complete audit trail for dashboard operations
- Session Management: Secure session handling and timeout
Integration
The dashboard integrates with:
- API Gateway: Provides data for dashboard views
- Blockchain Service: Direct blockchain operations and monitoring
- Monitoring: System metrics and performance data
- Authentication: User authentication and session management