Architecture
Project structure, design patterns, and system architecture
Directory Structure
CryptArtistStudio/
├── v1/ # Main application
│ ├── src/ # Frontend (React + TypeScript)
│ │ ├── pages/ # Page components
│ │ ├── components/ # Reusable components
│ │ ├── utils/ # Utility functions
│ │ ├── hooks/ # Custom React hooks
│ │ ├── styles/ # Global styles
│ │ └── App.tsx # Root component
│ ├── src-tauri/ # Backend (Rust)
│ │ ├── src/ # Rust source code
│ │ │ ├── main.rs # Tauri commands
│ │ │ ├── state.rs # Application state
│ │ │ └── lib.rs # Library code
│ │ └── Cargo.toml # Rust dependencies
│ ├── public/ # Static assets
│ ├── package.json # Node dependencies
│ ├── tsconfig.json # TypeScript config
│ ├── vite.config.ts # Vite config
│ └── tauri.conf.json # Tauri config
├── website/ # Marketing website
│ └── A1/ # Website files
├── prompts/ # AI prompt documentation
├── README.md # Main documentation
└── LICENSE # License file
Frontend Architecture
Technology Stack
- React 18 - UI framework
- TypeScript - Type-safe JavaScript
- Tauri v2 - Desktop integration
- TailwindCSS - Utility-first styling
- Vite - Build tool and dev server
- Monaco Editor - Code editor component
Component Structure
Components are organized by feature and responsibility:
- Pages/ - Full-page components (one per program)
- Components/ - Reusable UI components
- Hooks/ - Custom React hooks for logic
- Utils/ - Utility functions and helpers
State Management
- React Context - Global state (workspace, theme, user)
- Local State - Component-level state with useState
- localStorage - Persistent client-side storage
- Tauri State - Backend state management
Communication with Backend
Frontend communicates with Rust backend via Tauri commands:
// Frontend
const result = await invoke('command_name', { param1: 'value' });
// Backend (Rust)
#[tauri::command]
fn command_name(param1: String) -> String {
// Implementation
}
Backend Architecture
Technology Stack
- Rust 1.70+ - Systems programming language
- Tauri - Desktop app framework
- Tokio - Async runtime
- Serde - Serialization/deserialization
- FFmpeg - Media processing
Command Handlers
Tauri commands are the main interface between frontend and backend:
- File Operations - Read, write, list files
- Media Processing - Encode, decode, transcode
- Project Management - Create, open, save projects
- System Integration - File dialogs, notifications
Error Handling
Errors are propagated to frontend with descriptive messages:
#[tauri::command]
fn risky_operation() -> Result {
operation()
.map_err(|e| format!("Operation failed: {}", e))
}
Async Operations
Long-running operations use async/await with Tokio:
#[tauri::command]
async fn async_operation() -> Result {
// Async code here
Ok("result".to_string())
}
State Management
Frontend State
- User State - Current user, API keys, preferences
- Workspace State - Open projects, active workspace
- UI State - Theme, layout, sidebar visibility
- Program State - Program-specific data
Backend State
- AppState - Shared application state
- File State - Open files, pending operations
- Cache - Cached data for performance
Data Flow
User Action
↓
React Component
↓
Tauri Command
↓
Rust Backend
↓
File System / External API
↓
Response to Frontend
↓
Update State
↓
Re-render Component
Design Patterns
Component Patterns
- Container/Presentational - Logic in containers, UI in presentational components
- Custom Hooks - Reusable logic in custom hooks
- Context Providers - Global state via React Context
Error Handling
- Result Types - Rust Result for error handling
- Error Boundaries - React error boundaries for UI errors
- Try/Catch - JavaScript try/catch for async operations
Performance Optimization
- Memoization - React.memo for component memoization
- Code Splitting - Lazy loading with React.lazy
- Caching - Backend caching for expensive operations
Architecture Philosophy: CryptArtist Studio follows a clean separation of concerns with a thin frontend layer communicating with a robust Rust backend. This ensures security, performance, and maintainability.
