Timur Gordon b2ee21999f initial commit

2025-06-27 04:13:31 +02:00

7.2 KiB

Raw Blame History

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

Install Rust and WASM target:

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

Install Trunk:
```
cargo install trunk wasm-bindgen-cli
```
Clone and run:
```
cd zanzibar_freezone_app
trunk serve
```
Open browser: Navigate to http://localhost:8080

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)

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

🏠 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

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
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

7.2 KiB Raw Blame History