226 lines
7.2 KiB
Markdown
226 lines
7.2 KiB
Markdown
# 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**:
|
|
```bash
|
|
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
|
|
rustup target add wasm32-unknown-unknown
|
|
```
|
|
|
|
2. **Install Trunk**:
|
|
```bash
|
|
cargo install trunk wasm-bindgen-cli
|
|
```
|
|
|
|
3. **Clone and run**:
|
|
```bash
|
|
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
|
|
```bash
|
|
# 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)
|
|
- [x] Project structure and build system
|
|
- [x] Bootstrap 5.3.3 integration
|
|
- [x] Responsive layout components (Header, Sidebar, Footer)
|
|
- [x] Home view with 5 feature cards
|
|
- [x] Login form and authentication UI
|
|
- [x] Client-side routing
|
|
- [x] Mobile responsive design
|
|
- [x] 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](https://info.ourworld.tf/zdfz).
|
|
|
|
---
|
|
|
|
**Zanzibar Digital Freezone** - Convenience, Safety and Privacy |