Axon Web - Privacy-First Social Platform

A React-based web application for the Axon decentralized social network, featuring privacy-preserving interactions, creator economy, and governance participation.

🌟 Features

Privacy-First Design

• Zero-Knowledge Proofs: All social interactions protected by zk-STARKs
• Anonymous Posting: Full anonymity with differential privacy
• Pseudonymous Mode: Balance between privacy and identity
• Public Mode: Traditional social media experience when desired

Social Features

• Privacy-Preserving Feed: Chronological, trending, and algorithmic feeds
• Voting System: "Every like is like a vote" with quadratic voting mechanics
• Content Creation: Rich text posts with polls, images, and tags
• Advanced Search: Privacy-preserving content and user discovery

Creator Economy

• Anonymous Subscriptions: Support creators while maintaining privacy
• Multiple Tiers: Flexible subscription models with Nym token payments
• Privacy Analytics: Engagement tracking without user profiling
• Revenue Dashboard: Track earnings and subscriber growth

Governance

• Community Voting: Participate in protocol governance
• Proposal Creation: Submit proposals for network improvements
• Quadratic Voting: Prevent whale dominance in decision-making
• Privacy-Preserving Participation: Vote without revealing identity

Domain System

• .quid Domains: Social media profiles (one per QuID identity)
• .axon Domains: General content domains (multiple per identity)
• Domain Management: Easy registration and management interface

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• NixOS environment (recommended)

Installation

1. Enter Nix Shell (if using NixOS):

cd /home/wao/lyra/proj/nymverse
nix-shell

2. Install Dependencies:

cd axon-web
npm install

3. Environment Setup:

cp .env.example .env.local
# Edit .env.local with your configuration

4. Start Development Server:

npm start

The application will open at http://localhost:3000

Building for Production

npm run build

🏗️ Architecture

Frontend Stack

• React 18 with TypeScript
• Material-UI for component library
• Redux Toolkit for state management
• React Query for data fetching
• React Router for navigation

Privacy Technologies

• QuID Integration: Universal quantum-resistant authentication
• Zero-Knowledge Proofs: Anonymous interactions and voting
• Differential Privacy: Anonymous analytics and search
• End-to-End Encryption: Private messaging and content

Backend Integration

• Nym Network: Blockchain for payments and governance
• Axon Protocol: Social networking and content distribution
• NymCompute: Distributed processing for recommendations
• IPFS: Decentralized content storage

🎨 UI/UX Design

Dark Theme

• Privacy-focused dark UI reducing eye strain
• Cyan (#00bcd4) primary color for trust and technology
• High contrast ratios for accessibility

Privacy Indicators

• Anonymous Mode: Red privacy badge
• Pseudonymous Mode: Default blue privacy badge
• Public Mode: Green privacy badge

Navigation

• Sidebar Navigation: Quick access to main features
• Header Controls: Privacy mode switching and notifications
• Responsive Design: Mobile-first responsive layout

🔐 Privacy Features

Interaction Privacy

• Anonymous Likes: Zero-knowledge proof verification
• Private Voting: Quadratic voting with privacy preservation
• Encrypted Messaging: End-to-end encrypted communications
• Anonymous Subscriptions: Support creators privately

Data Protection

• Local Storage: Minimal data stored locally
• No Tracking: No user behavior tracking or profiling
• Differential Privacy: Anonymous aggregate analytics
• Right to Deletion: Complete data removal on request

🛠️ Development

Available Scripts

• npm start - Development server
• npm build - Production build
• npm test - Run tests
• npm run lint - Code linting
• npm run format - Code formatting

Project Structure

src/
├── components/          # Reusable UI components
│   ├── feed/           # Feed and post components
│   └── layout/         # Layout components
├── pages/              # Page components
├── services/           # API service layers
├── store/              # Redux store and slices
├── hooks/              # Custom React hooks
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

Key Components

• Feed System: PostList, PostItem, CreatePost
• Authentication: QuID integration with privacy modes
• Navigation: Header with privacy controls, responsive sidebar
• Governance: Proposal voting with quadratic mechanics
• Creator Tools: Dashboard with privacy-preserving analytics

🌐 Deployment

Environment Variables

REACT_APP_API_URL=http://localhost:8080/api
REACT_APP_NYM_NODE_URL=ws://localhost:9944
REACT_APP_AXON_GATEWAY=http://localhost:8081
REACT_APP_QUID_AUTH_URL=http://localhost:8082

Production Deployment

1. Build the application: npm run build
2. Deploy to static hosting (Vercel, Netlify, IPFS)
3. Configure backend API endpoints
4. Set up domain and SSL certificates

🤝 Contributing

Development Guidelines

• Follow TypeScript best practices
• Maintain privacy-first design principles
• Write comprehensive tests for components
• Document privacy implications of new features

Privacy Considerations

• Never store sensitive user data
• Always use zero-knowledge proofs for verification
• Implement differential privacy for analytics
• Provide clear privacy controls to users

📄 License

This project is part of the Nymverse ecosystem and is licensed under MIT OR Apache-2.0.

🔗 Related Projects

• QuID: Universal quantum-resistant authentication
• Nym: Privacy-first cryptocurrency and smart contracts
• Axon: Decentralized social networking protocol
• NymCompute: Privacy-preserving distributed computing

---

Built with privacy, security, and user empowerment at its core.