Skip to content

Conversation

konard
Copy link
Member

@konard konard commented Sep 11, 2025

πŸ”— Web Demo Playground

This PR implements issue #16 by adding an interactive WebAssembly-powered web playground for doublets-rs.

✨ Features

  • Create Links: Build custom doublets with specified source and target values
  • Create Points: Generate self-referencing links (where source equals target)
  • Delete Links: Remove links by ID with confirmation feedback
  • Search & Filter: Find links by source and/or target criteria
  • Real-time Display: Live table view of all links in the store
  • Operations Log: Complete history of all operations performed
  • Modern UI: Responsive design with gradients, animations, and mobile support

🎯 Demo Link

Once deployed, the demo will be available at: https://linksplatform.github.io/doublets-rs/

πŸ› οΈ Technical Implementation

WebAssembly Core

  • Built with wasm-bindgen for seamless JavaScript interoperability
  • Simplified doublets store implementation for demonstration purposes
  • Efficient serialization using serde and serde-wasm-bindgen
  • Error handling with proper Rust Result types

Frontend Interface

  • Pure HTML/CSS/JavaScript with no external dependencies
  • Modern CSS with gradients, shadows, and responsive grid layout
  • Real-time state management and DOM updates
  • Mobile-first responsive design

Deployment

  • GitHub Actions workflow for automatic deployment to GitHub Pages
  • Builds WebAssembly module and deploys static files
  • Triggered on pushes to main branch that affect the web demo

πŸ“ Structure

web-demo/
β”œβ”€β”€ src/lib.rs          # WebAssembly bindings and doublets logic
β”œβ”€β”€ index.html          # Main web interface
β”œβ”€β”€ Cargo.toml          # Rust dependencies and configuration
β”œβ”€β”€ package.json        # Build scripts and metadata
β”œβ”€β”€ build.sh            # Build script for local development
└── README.md           # Documentation and usage instructions

πŸ§ͺ Local Testing

To test the demo locally:

cd web-demo
./build.sh
python3 -m http.server 8000
# Open http://localhost:8000

🎨 UI Preview

The demo features:

  • Header: Gradient background with project branding
  • Status Bar: Live link count and system status
  • Operations Panel: Interactive controls for all doublets operations
  • Links Table: Real-time display of current links
  • Operations Log: Scrollable history of all actions

⚑ Performance

  • WebAssembly provides near-native performance for doublets operations
  • Minimal bundle size with optimized WASM output
  • Efficient DOM updates with targeted element modifications
  • Client-side processing with no server dependencies

πŸ”„ Future Enhancements

This demo provides a foundation for:

  • Integration with the full doublets-rs library (when stable target support is available)
  • Visual graph representation of link relationships
  • Import/export functionality for link data
  • Advanced query and filtering capabilities
  • Real-time collaboration features

πŸ“‹ Testing Checklist

  • WebAssembly compilation succeeds
  • All doublets operations work correctly
  • UI responds properly to user interactions
  • Mobile responsive design functions
  • Error handling provides clear feedback
  • Operations log tracks all activities
  • Search and filtering work as expected
  • GitHub Actions workflow configured

πŸŽ‰ Impact

This web demo makes doublets-rs more accessible by:

  • Providing an immediate, interactive way to explore the library
  • Demonstrating core concepts without requiring Rust knowledge
  • Offering a testing playground for experimentation
  • Showcasing the potential of WebAssembly for complex data structures

Fixes #16

πŸ€– Generated with Claude Code

Adding CLAUDE.md with task information for AI processing.
This file will be removed when the task is complete.

Issue: #16
@konard konard self-assigned this Sep 11, 2025
konard and others added 2 commits September 11, 2025 09:01
Implements issue #16 by creating an interactive WebAssembly-powered
web playground that demonstrates doublets operations in the browser.

Features:
- Create and manage doublets (links between source and target)
- Create points (self-referencing links)
- Delete links by ID
- Search and filter links
- Real-time operations log
- Interactive web interface with modern UI

Technical implementation:
- WebAssembly bindings using wasm-bindgen
- Simplified doublets store for demonstration
- Responsive HTML/CSS interface
- GitHub Actions workflow for automatic deployment
- Self-contained demo that works without backend

The web demo provides an accessible way for users to explore
doublets concepts directly in their browser, making the library
more approachable for new users and providing a testing ground
for experimenting with doublets operations.

πŸ€– Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@konard konard changed the title [WIP] Add web demo playground Add web demo playground for doublets-rs Sep 11, 2025
@konard konard marked this pull request as ready for review September 11, 2025 06:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add web demo playground

1 participant