Skip to main content

​
Overview

The GeoFlow App is the main user interface for the platform, built with modern React technologies. It provides a comprehensive environment for designing workflows, uploading data, monitoring executions, and visualizing results.

​
Technology Stack

  • Frontend Framework: React 19 with TypeScript
  • Routing: TanStack Router for file-based routing
  • Styling: Tailwind CSS with shadcn/ui components
  • State Management: Zustand for global state
  • Data Fetching: TanStack Query for server state
  • Build Tool: Vite for fast development and optimized builds
  • UI Components: Radix UI primitives with custom styling

​
Key Features

​
Workflow Designer

  • Visual Workflow Builder: Drag-and-drop interface for creating processing pipelines
  • Node-Based Editor: Connect processing steps with a node graph interface
  • Real-time Validation: Immediate feedback on workflow configuration errors
  • Template Library: Pre-built workflow templates for common use cases

​
Data Management

  • File Upload: Support for multiple geospatial formats (LAS, LAZ, GeoTIFF, SHP, etc.)
  • Data Browser: Browse and preview uploaded datasets
  • Metadata Viewer: Display dataset properties and statistics
  • Download Manager: Export processed results in various formats

​
Execution Monitoring

  • Live Execution Tracking: Real-time progress updates during workflow runs
  • Log Viewer: Detailed execution logs with error highlighting
  • Performance Metrics: Execution time, resource usage, and throughput statistics
  • Execution History: Browse past workflow runs and their results

​
User Interface

  • Responsive Design: Works on desktop and tablet devices
  • Dark/Light Mode: Theme switching with system preference detection
  • Keyboard Shortcuts: Productivity shortcuts for common actions
  • Contextual Help: Inline documentation and tooltips

​
Architecture

​
Component Structure

src/
├── components/
│   ├── global/          # Global UI components (Header, Sidebar, etc.)
│   ├── dialogs/         # Modal dialogs and forms
│   └── ui/              # Reusable UI components
├── routes/              # Page routes and layouts
├── hooks/               # Custom React hooks
├── stores/              # Zustand state stores
├── lib/                 # Utility functions and configurations
└── nodes/               # Workflow node components

​
State Management

The app uses multiple state management strategies:
  • Server State: TanStack Query for API data (workflows, executions, files)
  • Global State: Zustand stores for UI state (theme, user preferences)
  • Local State: React state for component-specific data
  • Form State: React Hook Form for complex form management

​
Routing Structure

  • /_authed/ - Authenticated routes (main app)
  • /api/ - API routes for external integrations
  • Public routes for authentication and landing pages

​
Development

​
Local Development

# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build

# Run tests
bun run test

​
Environment Variables

# Convex configuration
VITE_CONVEX_URL=http://localhost:3210

# API endpoints
VITE_API_BASE_URL=http://localhost:3210

# Feature flags
VITE_ENABLE_DEBUG=true

​
API Integration

The app communicates with backend services through:
  • Convex Client: Real-time data synchronization and mutations
  • REST APIs: Direct service communication for file operations
  • WebSockets: Real-time execution updates
  • File Upload: Direct uploads to storage services

​
Performance Optimizations

  • Code Splitting: Route-based and component-based splitting
  • Lazy Loading: Components and routes loaded on demand
  • Memoization: React.memo and useMemo for expensive operations
  • Virtual Scrolling: For large lists and data tables
  • Image Optimization: Automatic image compression and WebP conversion

​
Browser Support

  • Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
  • Mobile: Responsive design works on tablets (iPad, Android tablets)
  • Progressive Enhancement: Core functionality works without JavaScript

​
Accessibility

  • WCAG 2.1 AA Compliance: Screen reader support, keyboard navigation
  • High Contrast: Support for high contrast mode
  • Focus Management: Proper focus indicators and tab order
  • Semantic HTML: Proper ARIA labels and landmarks