A modern, maintainable autocomplete UI built with Yew (Rust WebAssembly framework).

• Real-time autocomplete with debounced API calls
• Modern UI with responsive design and accessibility features
• Input validation with character limits and visual feedback
• Error handling with user-friendly messages
• Loading states and visual feedback
• Modular architecture for easy maintenance and extension

This project follows a clean, modular architecture:

src/
├── lib.rs          # Main application entry point
├── api.rs          # HTTP API service layer
├── components.rs   # Reusable UI components
├── config.rs       # Configuration and constants
├── hooks.rs        # Custom React-style hooks
├── styles.rs       # CSS styles
├── types.rs        # Type definitions
└── validation.rs   # Input validation utilities

• Separation of Concerns: Each module has a single responsibility
• Type Safety: Strong typing throughout the application
• Reusability: Components and hooks can be easily reused
• Testability: Modules are designed for easy unit testing
• Maintainability: Clean interfaces and clear dependencies

• Rust (latest stable)
• Trunk for building and serving
• Node.js for the backend server

1. Clone the repository:

   git clone <repository-url>
   cd yew_autocomplete_ui

2. Install dependencies:

   # Install Rust dependencies
   cargo check
   
   # Install trunk (if not already installed)
   cargo install trunk
   
   # Add WASM target
   rustup target add wasm32-unknown-unknown
   
   # Install Node.js dependencies for backend
   npm install

1. Optiona Start the test backend server:

   npm start
   # Or using the Makefile:
   make start-backend

2. Start the frontend development server:

   trunk serve
   # Or using the Makefile:
   make serve

3. Open your browser to http://localhost:8080

trunk build --release
# Or using the Makefile:
make build-prod

A reusable text input component with validation and character counting.

<TextInput
    value={input_value}
    on_input={on_input_callback}
    placeholder={"Enter your text...".to_string()}
/>

Shows completion results with different states (loading, success, error).

<CompletionDisplay state={completion_state} />

All configuration is centralized in src/config.rs:

pub const MAX_PROMPT_LENGTH: usize = 10000;
pub const MIN_PROMPT_LENGTH: usize = 1;
pub const DEBOUNCE_DELAY_MS: u32 = 500;

The application uses a modern CSS design system with:

• Responsive layout
• Accessibility features
• Dark/light mode support
• Smooth animations
• Professional typography

The modular architecture makes testing straightforward:

cargo test

The application integrates with a simple Node.js backend that provides completion suggestions. The API service (src/api.rs) handles all HTTP communication with proper error handling and type safety.

• POST /complete - Get completion suggestions

• Refactoring Guide - Detailed explanation of the modular architecture
• Yew Documentation - Official Yew framework docs

1. Fork the repository
2. Create a feature branch
3. Make your changes following the established patterns
4. Ensure tests pass
5. Submit a pull request

This project is licensed under the MIT License.

• Yew - Modern Rust framework for creating multi-threaded front-end web apps
• Trunk - Build tool for Rust-generated WebAssembly
• Gloo - Modular toolkit for building fast, reliable Web applications