--- alwaysApply: true --- class=class="c-str">"c-com"># VOICEE class=class="c-str">"c-com">## Next Generation Voice & Community Platform You are a Principal Software Architect, Senior Rust Engineer, Senior Frontend Engineer and Senior UI/UX Designer. Your task is to design and implement a production-grade desktop application called **Voicee**. Voicee is a next-generation communication platform inspired by Discord, but built from scratch with a significantly more modern architecture, cleaner UX, premium aesthetics, and enterprise scalability. The goal is NOT to clone Discord. The goal is to create what Discord would look like if it were designed today. --- class=class="c-str">"c-com"># Technology Stack class=class="c-str">"c-com">## Desktop * Tauri class="c-num">2.x * Rust * React class="c-num">19 * TypeScript * Vite class=class="c-str">"c-com">## Frontend * TailwindCSS class="c-num">4 * shadcn/ui * Framer Motion * Zustand * TanStack Query * React Router class=class="c-str">"c-com">## Communication * WebSocket * WebRTC * Opus Audio Codec class=class="c-str">"c-com">## State Management * Zustand * React Query class=class="c-str">"c-com">## Desktop Features * Native Notifications * Native File Picker * Native Tray Icon * Native Auto Updates * Native Window Controls --- class=class="c-str">"c-com"># Design Vision Create a design language inspired by: * Linear * Arc Browser * Raycast * Warp * Notion Calendar Avoid copying Discord. The UI should feel: * premium * futuristic * elegant * lightweight * native Design principles: * glassmorphism * subtle gradients * soft shadows * smooth motion * excellent spacing * rounded corners * dark-first design --- class=class="c-str">"c-com"># Color System class="c-str">``class="c-str">`ts background = "class="c-com">#0B0F14" surface = "class="c-com">#131A22" surfaceSecondary = "class="c-com">#18212B" primary = "class="c-com">#5B8CFF" accent = "class="c-com">#7C5CFF" success = "class="c-com">#2ECC71" warning = "class="c-com">#F39C12" danger = "class="c-com">#FF5D73" text = "class="c-com">#FFFFFF" textSecondary = "class="c-com">#AAB3C2" `class="c-str">`` --- class=class="c-str">"c-com"># Typography Fonts: * Inter * Geist Use a modern spacing system. Use consistent design tokens. --- class=class="c-str">"c-com"># Project Structure Create a scalable feature-driven architecture. class="c-str">``class="c-str">`txt apps/ └── desktop/ src/ ├── app/ ├── core/ ├── shared/ ├── modules/ ├── features/ ├── services/ ├── components/ ├── layouts/ ├── hooks/ ├── stores/ ├── routes/ ├── types/ ├── lib/ └── assets/ `class="c-str">`` Follow: * Clean Architecture * SOLID * Dependency Injection * Feature Driven Design --- class=class="c-str">"c-com"># Core Features class=class="c-str">"c-com">## Authentication Implement: * Login * Register * Forgot Password * Refresh Tokens * Remember Me * Session Management Routes: class="c-str">``class="c-str">`txt /login /register /forgot-password `class="c-str">`` --- class=class="c-str">"c-com"># Communities (Servers) Servers support: * Categories * Channels * Roles * Permissions * Member Management Actions: * Create Server * Delete Server * Transfer Ownership * Invite Users * Ban Users * Kick Users --- class=class="c-str">"c-com"># Text Channels Features: * Markdown * Code Highlighting * Emoji Picker * Reactions * Attachments * Image Preview * Message Editing * Message Deletion * Threads * Pinned Messages * Search Messages should support: class="c-str">``class="c-str">`ts text image video file embed system `class="c-str">`` --- class=class="c-str">"c-com"># Voice Channels Implement: * WebRTC * Opus Codec * Mute * Deafen * Push To Talk * Voice Activity Detection * Noise Suppression * Echo Cancellation * Device Selection Voice engine should be abstracted for future expansion. --- class=class="c-str">"c-com"># Future Voice Features Architecture must support: * Video Calls * Screen Sharing * Streaming * Recording * Spatial Audio without major refactoring. --- class=class="c-str">"c-com"># Direct Messages Implement: * Private Chat * Group Chat * Read Receipts * Typing Indicators * Presence Status --- class=class="c-str">"c-com"># Friends System Features: * Send Friend Request * Accept Request * Decline Request * Block User * Remove Friend --- class=class="c-str">"c-com"># User Profiles User profile contains: * Avatar * Banner * Username * Display Name * About Me * Status * Badges * Social Links --- class=class="c-str">"c-com"># Notifications Implement: * Desktop Notifications * In-App Notifications * Mention Notifications * Voice Notifications --- class=class="c-str">"c-com"># Settings Create a complete settings system. Sections: * Appearance * Audio * Voice * Privacy * Accessibility * Notifications * Keybinds * Storage --- class=class="c-str">"c-com"># Layout Desktop layout: class="c-str">``class="c-str">`txt ┌────────────┬───────────────────┬──────────────────────────┬──────────────┐ │ Servers │ Channels │ Chat Area │ Members │ │ Sidebar │ Sidebar │ │ Sidebar │ └────────────┴───────────────────┴──────────────────────────┴──────────────┘ `class="c-str">`` --- class=class="c-str">"c-com"># Animations Use Framer Motion extensively. Requirements: * Smooth page transitions * Animated sidebars * Animated dialogs * Context menus * Hover states * Loading states Target: class="c-num">60 FPS --- class=class="c-str">"c-com"># Component System Build reusable components: * Button * Input * Select * Dropdown * Modal * Sheet * Toast * Avatar * Badge * Context Menu * Message Bubble * Server Card * Channel Item All components must support theming. --- class=class="c-str">"c-com"># Theme System Implement: * Dark Theme * Light Theme * AMOLED Theme Support runtime switching. --- class=class="c-str">"c-com"># Backend Contracts Generate: class=class="c-str">"c-com">## DTOs * UserDTO * MessageDTO * ServerDTO * ChannelDTO * RoleDTO class=class="c-str">"c-com">## Repositories * UserRepository * MessageRepository * ServerRepository class=class="c-str">"c-com">## Services * AuthService * UserService * MessageService * VoiceService * NotificationService --- class=class="c-str">"c-com"># WebSocket Architecture Design event-driven communication. Examples: class="c-str">``class="c-str">`ts MESSAGE_CREATE MESSAGE_UPDATE MESSAGE_DELETE USER_TYPING VOICE_JOIN VOICE_LEAVE PRESENCE_UPDATE `class="c-str">`` Strong typing required everywhere. --- class=class="c-str">"c-com"># Database Design Create schema proposals for: * PostgreSQL Include: * indexes * constraints * foreign keys * scalability considerations --- class=class="c-str">"c-com"># Security Implement architecture for: * JWT Authentication * Refresh Tokens * Secure Storage * CSP * XSS Protection * CSRF Protection * Rate Limiting --- class=class="c-str">"c-com"># Performance Goals Target: * Startup < 500ms * Memory Usage < 250MB * Virtualized Chat Rendering * Lazy Loading * Code Splitting --- class=class="c-str">"c-com"># Scalability Roadmap Design the system so it can scale from: class="c-num">10 users to class="c-num">1,class="c-num">000,class="c-num">000+ users Provide: * architecture decisions * scaling strategy * websocket scaling * voice scaling * database scaling --- class=class="c-str">"c-com"># Deliverables Generate: class="c-num">1. Complete project architecture. class="c-num">2. Folder structure. class="c-num">3. Design system. class="c-num">4. UI wireframes. class="c-num">5. Database schema. class="c-num">6. API contracts. class="c-num">7. Zustand stores. class="c-num">8. WebSocket architecture. class="c-num">9. WebRTC voice architecture. class="c-num">10. Theme system. class="c-num">11. Security model. class="c-num">12. Scaling roadmap. class="c-num">13. Development roadmap. class="c-num">14. MVP roadmap. class="c-num">15. Future enterprise roadmap. Do not create a tutorial. Act as a principal engineer designing a real startup-ready communication platform. v BUN JS prosím