🎨 Feature Request: Beautiful Web UI with Yew Framework

[chojuninengu]

📋 Summary

Transform the current CLI-based async-chat into a modern, beautiful web application using Yew (Rust + WebAssembly) for the frontend while keeping the existing Rust server backend.

🎯 Motivation

• Better User Experience: Move from CLI to intuitive web interface
• Full Rust Stack: Showcase Rust's capabilities for both frontend and backend
• Modern Chat Experience: WhatsApp/Discord-like interface
• Learning Opportunity: Demonstrate Yew + WebAssembly in a real project
• Community Showcase: Highlight Rust-Cameroon's technical capabilities

🚀 Proposed Solution

Tech Stack

• Frontend: Yew + WebAssembly (WASM)
• Backend: Keep existing async-std Rust server
• Communication: WebSocket for real-time messaging
• Styling: TailwindCSS + CSS modules
• Build Tool: Trunk for WASM bundling
• State Management: Yewdux or built-in Yew state
• Icons: Lucide icons or similar
• WebSocket Client: gloo-net for browser APIs

Architecture

┌─────────────────────┐    WebSocket     ┌──────────────────┐
│   Yew Frontend      │ ◄─────────────► │   Rust Server    │
│   (WebAssembly)     │   (JSON msgs)   │  (async-std)     │
│                     │                 │                  │
│ ┌─────────────────┐ │                 │ ┌──────────────┐ │
│ │ Chat Component  │ │                 │ │ Group Table  │ │
│ │ Group Component │ │                 │ │ Connections  │ │
│ │ Message List    │ │                 │ │ Broadcasting │ │
│ └─────────────────┘ │                 │ └──────────────┘ │
└─────────────────────┘                 └──────────────────┘

🎨 UI/UX Features

Core Features

• Modern Chat Interface: Clean, responsive design
• Real-time Messaging: Live message updates via WebSocket
• Group Management: Create, join, and switch between groups
• Message Bubbles: Proper chat bubble styling with timestamps
• User Identification: Display usernames/IDs for messages
• Responsive Design: Works on desktop, tablet, and mobile

Enhanced Features

• Dark/Light Theme: Toggle between themes
• Message History: Scroll through previous messages
• Typing Indicators: Show when someone is typing
• Online Status: Show active users in groups
• Notifications: Browser notifications for new messages
• Emoji Support: Basic emoji picker and rendering
• Search Functionality: Search messages and groups

Advanced Features (Future)

• File Sharing: Drag & drop file uploads
• Voice Messages: Audio message support
• Message Reactions: React to messages with emojis
• User Profiles: Avatar and profile management
• Message Threading: Reply to specific messages
• PWA Support: Installable web app

🏗️ Implementation Plan

Phase 1: Foundation (Week 1-2)

• Set up Yew project structure with Trunk
• Create basic components (App, ChatRoom, MessageList)
• Implement WebSocket connection to existing server
• Basic message sending and receiving
• Simple styling with TailwindCSS

Phase 2: Core Features (Week 3-4)

• Group management UI (join/create groups)
• Message bubble styling and timestamps
• Responsive layout for different screen sizes
• Error handling and connection status
• Message input with Enter key support

Phase 3: Enhanced UX (Week 5-6)

• Dark/light theme implementation
• Message history and scrolling
• User identification and display
• Notifications and browser integration
• Loading states and animations

Phase 4: Polish & Deploy (Week 7-8)

• Performance optimizations
• Cross-browser testing
• Documentation and setup guides
• Deployment configuration
• Demo deployment

🛠️ Technical Details

Project Structure

async-chat/
├── server/           # Existing Rust server
│   ├── src/
│   └── Cargo.toml
├── web-ui/          # New Yew frontend
│   ├── src/
│   │   ├── components/
│   │   ├── services/
│   │   ├── styles/
│   │   └── main.rs
│   ├── static/
│   ├── Cargo.toml
│   └── Trunk.toml
└── README.md

Key Components

// Main app component
#[function_component(App)]
fn app() -> Html {
    html! {
        <div class="app">
            <Header />
            <main class="chat-container">
                <GroupSidebar />
                <ChatRoom />
            </main>
        </div>
    }
}

// Chat message component
#[function_component(ChatMessage)]
fn chat_message(props: &MessageProps) -> Html {
    html! {
        <div class={classes!("message", props.is_own.then(|| "own"))}>
            <div class="message-bubble">
                <span class="sender">{&props.sender}</span>
                <p class="text">{&props.content}</p>
                <span class="timestamp">{&props.timestamp}</span>
            </div>
        </div>
    }
}

WebSocket Integration

• Extend existing server to handle WebSocket connections
• Implement JSON message protocol for web clients
• Maintain compatibility with existing CLI clients
• Real-time bidirectional communication

📚 Learning Resources

• Yew Official Guide
• WebAssembly Book
• Trunk Build Tool
• TailwindCSS

🎯 Success Criteria

• Functional web UI that matches CLI functionality
• Real-time messaging works smoothly
• Responsive design on all devices
• Clean, modern, and intuitive interface
• Good performance (fast loading, smooth interactions)
• Well-documented code and setup process

🤝 Contributing

This is a great opportunity for:

• Rust developers wanting to learn frontend development
• Web developers interested in Rust and WebAssembly
• UI/UX designers to contribute design ideas
• Anyone interested in modern web technologies

📝 Additional Notes

• Keep the existing CLI interface working alongside the web UI
• Ensure the server can handle both CLI and web clients simultaneously
• Focus on code quality and documentation for educational value
• Consider this as a showcase project for the Rust-Cameroon community

---

Labels: enhancement, frontend, yew, webassembly, ui/ux, good first issue, help wanted

Assignees: TBD

Milestone: v2.0 - Web UI Release

[Christiantyemele]

NIce @chojuninengu