freezone/platform

Zanzibar Digital Freezone - Yew WASM App

A modern web application built with Yew and WebAssembly, porting the Zanzibar Digital Freezone platform from Actix MVC to a client-side WASM application.

🎯 Project Overview

Motto: "Convenience, Safety and Privacy"

This project is a UI-first port of the Zanzibar Digital Freezone platform, focusing on replicating the exact visual design and user experience of the original Actix MVC application while leveraging modern WASM technology.

✨ Features

Core Platform Features

• Home Dashboard - 5 feature cards showcasing platform benefits
• Governance - Proposal management and voting system
• Flows - Business process management
• Contracts - Digital contract management and signatures
• Digital Assets - Asset tokenization and management
• DeFi Platform - 7-tab DeFi interface (Overview, Providing/Receiving, Liquidity, Staking, Swap, Collateral, Lending/Borrowing)
• Companies - Entity management and registration
• Marketplace - Asset trading platform
• Calendar - Event management system

Technical Features

• Responsive Design - Mobile-first Bootstrap 5.3.3 layout
• Authentication - Session-based login system
• Client-side Routing - Browser history integration
• Local Storage - Persistent authentication state
• Component Architecture - Modular Yew components

🏗️ Architecture

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Header        │    │   Sidebar        │    │   Main Content  │
│   - Logo        │    │   - Navigation   │    │   - Views       │
│   - User Menu   │    │   - Active State │    │   - Components  │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                           Footer                                │
│              "Convenience, Safety and Privacy"                  │
└─────────────────────────────────────────────────────────────────┘

🚀 Quick Start

Prerequisites

• Rust (latest stable)
• Trunk (WASM build tool)
• Modern web browser

Installation

1. Install Rust and WASM target:

   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   rustup target add wasm32-unknown-unknown
   

2. Install Trunk:

   cargo install trunk wasm-bindgen-cli
   

3. Clone and run:

   cd zanzibar_freezone_app
   trunk serve
   

4. Open browser: Navigate to http://localhost:8080

Demo Login

• Email: admin@zanzibar.tf
• Password: admin123

📁 Project Structure

zanzibar_freezone_app/
├── src/
│   ├── app.rs                    # Main application component
│   ├── lib.rs                    # WASM entry point
│   ├── components/               # Reusable UI components
│   │   ├── layout/              # Header, Sidebar, Footer
│   │   ├── forms/               # Login and other forms
│   │   └── cards/               # Feature cards
│   ├── views/                   # Main application views
│   │   ├── home_view.rs         # Dashboard with 5 cards
│   │   ├── login_view.rs        # Authentication
│   │   └── placeholder_view.rs  # Placeholder for other sections
│   └── routing/                 # Client-side routing
├── static/
│   └── css/
│       └── main.css             # Custom styles + Bootstrap
├── index.html                   # HTML template
├── Cargo.toml                   # Rust dependencies
└── Trunk.toml                   # Build configuration

🎨 UI Components

Layout Components

• Header: Fixed top navigation with user menu
• Sidebar: Collapsible navigation with active states
• Footer: Three-column layout with links

Feature Cards (Home Page)

1. 🤝 Frictionless Collaboration (Primary Blue)
2. 💱 Frictionless Banking (Success Green)
3. 📈 Tax Efficiency (Info Blue)
4. 🌍 Global Ecommerce (Warning Yellow)
5. 🛡️ Clear Regulations (Danger Red)

Navigation Items

• 🏠 Home
• 👥 Governance
• 📊 Flows
• 📄 Contracts
• 🪙 Digital Assets
• 🏦 DeFi Platform
• 🏢 Companies
• 🛒 Marketplace
• 📅 Calendar

🔧 Development

Build Commands

# Development server with hot reload
trunk serve

# Production build
trunk build --release

# Clean build artifacts
trunk clean

Code Organization

• Components: Reusable UI elements following Yew patterns
• Views: Page-level components for each section
• Routing: Client-side navigation with browser history
• Styling: Bootstrap 5.3.3 + custom CSS for exact visual fidelity

📱 Responsive Design

Desktop (≥768px)

• Fixed sidebar (240px width)
• Full header with navigation links
• Three-column footer layout

Mobile (<768px)

• Collapsible sidebar with slide animation
• Hamburger menu in header
• Stacked footer layout
• Touch-friendly navigation

🔐 Authentication

Current Implementation

• Simple mock authentication for demo
• Session persistence via LocalStorage
• Automatic redirect to login when not authenticated

Future Enhancements

• Integration with backend authentication API
• JWT token management
• Role-based access control
• Multi-factor authentication

🎯 Implementation Status

✅ Completed (Phase 1)

• Project structure and build system
• Bootstrap 5.3.3 integration
• Responsive layout components (Header, Sidebar, Footer)
• Home view with 5 feature cards
• Login form and authentication UI
• Client-side routing
• Mobile responsive design
• Navigation state management

🚧 In Progress (Phase 2)

• Business logic for each section
• API integration
• Data models and services
• Form validation and error handling
• Advanced state management

📋 Planned (Phase 3)

• Real backend integration
• Database connectivity
• File upload and management
• Real-time updates
• Advanced DeFi functionality

🌐 Browser Support

• Chrome/Chromium 80+
• Firefox 74+
• Safari 13.1+
• Edge 80+

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📞 Support

For questions or support, please contact the development team or visit our documentation at info.ourworld.tf/zdfz.

---

Zanzibar Digital Freezone - Convenience, Safety and Privacy