Rust-Cameroon · chojuninengu · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026
diff --git a/.gitignore b/.gitignore
@@ -1 +1,7 @@
 /target
+.claude
+/web-ui/target
+/web-ui/node_modules
+/web-ui/.env
+/web-ui/.env.local
+/web-ui/dist
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -10,3 +10,7 @@ tokio = { version = "1.0", features = ["sync"] }
 serde = { version = "1.0", features = ["derive", "rc"] }
 serde_json = "1.0"
 anyhow = "1.0.97"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+async-tungstenite = { version = "0.28", features = ["async-std-runtime"] }
+futures-util = "0.3"
diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
@@ -0,0 +1,186 @@
+# 🎨 Feature Request: Beautiful Web UI with Yew Framework
+
+## 📋 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**
+```rust
+// 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](https://yew.rs/)
+- [WebAssembly Book](https://rustwasm.github.io/docs/book/)
+- [Trunk Build Tool](https://trunkrs.dev/)
+- [TailwindCSS](https://tailwindcss.com/)
+
+## 🎯 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
diff --git a/docs/yew-ui-setup.md b/docs/yew-ui-setup.md
@@ -0,0 +1,108 @@
+# 🎨 Yew UI Setup Guide
+
+## 🚀 Quick Start for Yew Frontend Development
+
+### Prerequisites
+```bash
+# Install Rust if not already installed
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+# Add WebAssembly target
+rustup target add wasm32-unknown-unknown
+
+# Install Trunk (build tool for Yew)
+cargo install trunk
+
+# Install wasm-bindgen-cli
+cargo install wasm-bindgen-cli
+```
+
+### Project Structure (Proposed)
+```
+async-chat/
+├── server/                 # Existing server code
+├── web-ui/                # New Yew frontend
+│   ├── src/
+│   │   ├── components/
+│   │   │   ├── app.rs
+│   │   │   ├── chat_room.rs
+│   │   │   ├── message.rs
+│   │   │   └── mod.rs
+│   │   ├── services/
+│   │   │   ├── websocket.rs
+│   │   │   └── mod.rs
+│   │   ├── styles/
+│   │   │   └── main.css
+│   │   └── main.rs
+│   ├── static/
+│   │   └── index.html
+│   ├── Cargo.toml
+│   └── Trunk.toml
+└── README.md
+```
+
+### Initial Cargo.toml for web-ui
+```toml
+[package]
+name = "async-chat-web"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew = { version = "0.21", features = ["csr"] }
+yewdux = "0.10"
+gloo = "0.11"
+gloo-net = "0.5"
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+web-sys = "0.3"
+js-sys = "0.3"
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+log = "0.4"
+wasm-logger = "0.2"
+
+[dependencies.web-sys]
+version = "0.3"
+features = [
+  "console",
+  "WebSocket",
+  "MessageEvent",
+  "CloseEvent",
+  "ErrorEvent",
+]
+```
+
+### Development Commands
+```bash
+# Navigate to web-ui directory
+cd web-ui
+
+# Start development server with hot reload
+trunk serve
+
+# Build for production
+trunk build --release
+
+# Run server (in separate terminal)
+cd ../server
+cargo run --release --bin server -- localhost:8000
+```
+
+### Getting Started Steps
+
+1. **Create the web-ui directory structure**
+2. **Set up basic Yew app with WebSocket connection**
+3. **Implement message sending/receiving**
+4. **Add styling with TailwindCSS**
+5. **Create responsive chat interface**
+
+### Useful Resources
+- [Yew Examples](https://github.com/yewstack/yew/tree/master/examples)
+- [WebSocket Example](https://github.com/yewstack/yew/tree/master/examples/websocket)
+- [Trunk Configuration](https://trunkrs.dev/#configuration)
+- [TailwindCSS with Trunk](https://trunkrs.dev/assets/#tailwind-css)
+
+---
+
+This will be an exciting project showcasing Rust's full-stack capabilities! 🦀✨