IONFLOW Frontend
IONFLOW Frontend
Section titled “IONFLOW Frontend”The main platform for supercharging Gateway integrations through automation workflows
Overview
Section titled “Overview”IONFLOW Frontend is a modern Vue 3 application designed to provide:
- Flow Builder: Create and manage automation workflows visually
- Admin Portal: Manage tenants, apps, and configurations
- Gateway Integration: Enhance integrations through powerful flows
- Developer Experience: Best-in-class UX/UI and usability
Target Users
Section titled “Target Users”| User Type | Description |
|---|---|
| Administrators | Manage tenants, users, and system configurations |
| Developers | Build and configure integration flows |
| End Users | Execute and monitor automation workflows |
Main Features
Section titled “Main Features”- 🔄 Flow Management: Create, edit, and deploy automation flows
- 🔌 Integrations: Connect with external services and APIs
- 📊 Execution Monitoring: Track workflow executions in real-time
- 🔐 Authentication: Secure access with Keycloak SSO
- 🌐 Multi-tenant: Support for multiple organizations
Tech Stack
Section titled “Tech Stack”| Technology | Purpose |
|---|---|
| Vue 3 | Main framework (Composition API + <script setup>) |
| TypeScript | Strict typing |
| PrimeVue 4 | UI component library (unstyled mode + Volt) |
| Tailwind CSS 4 | Utility-first styles |
| Pinia | State management |
| TanStack Query | Data fetching and caching |
| Vue Router | Routing |
| Vite | Build tool |
| Vitest | Unit testing |
| Playwright | E2E testing |
| VeeValidate + Zod | Form validation |
| Monaco Editor | JSON code editor |
| Vue I18n | Internationalization (en/es) |
Quick Start
Section titled “Quick Start”# Install dependenciespnpm install
# Start development serverpnpm dev
# Run testspnpm test:unit
# Build for productionpnpm buildQuick Links
Section titled “Quick Links”- Getting Started - Installation and setup
- Architecture - System design and patterns
- Components - Reusable UI components
- Composables - Vue composables (hooks)
- Stores - Pinia state management
- API Client - Backend integration
- Guides - Development guidelines
Project Structure
Section titled “Project Structure”src/├── assets/ # Static resources├── components/ # Reusable Vue components├── constants/ # Application constants├── guards/ # Navigation guards├── helpers/ # Utilities and configurations├── hooks/ # Reusable composables├── interfaces/ # Service abstract classes├── lang/ # Translations (en/es)├── layouts/ # Application layouts├── lib/ # Utilities (cn, tailwind-merge)├── models/ # Types and data models├── router/ # Route configuration├── services/ # API services├── stores/ # Pinia stores└── views/ # Views/Pages