The Flowlitics Frontend is a web application designed to interact with the Flowlitics Backend. It provides a user-friendly graphical interface for visually designing, managing, executing, and monitoring complex workflows.
The application aims to simplify workflow orchestration through intuitive controls and a responsive design, enabling efficient management of automated processes.
This project is currently under active development and is not ready for production use. Expect frequent and potentially breaking changes to the codebase, features, and APIs. Use with caution and be prepared for instability.
- Visual Workflow Designer:
- Create and modify workflows using a Mermaid.js powered graphical interface.
- Add, edit, and remove nodes within a flow.
- Define flow properties such as name, description, and tags.
- Flow Management Dashboard:
- View a list of all created flows.
- Search flows by name or description.
- Filter flows (e.g., by active status).
- Quickly create new flows or edit existing ones.
- Node Details and Configuration:
- Select individual nodes within a flow to view and edit their properties (e.g., name).
- (Future) Configure specific parameters for different node types.
- Flow Execution Viewing:
- Visualize the execution path of a flow, with nodes potentially styled by their status (e.g., pending, running, completed, failed).
- Inspect details of executed nodes.
- Responsive Design:
- The interface is designed to be usable across various screen sizes, from desktop to mobile.
- User-Friendly Notifications:
- Integrated toast notifications for system messages and feedback.
- Custom confirmation dialogs for critical actions.
- Vue.js 3 (Composition API,
<script setup>) - Tailwind CSS for styling
- Mermaid.js for rendering flow diagrams
- Vue Router for client-side routing
Details on setting up the development environment will be added here. This typically includes:
- Cloning the repository.
- Installing dependencies (e.g.,
npm installoryarn install). - Running the development server (e.g.,
npm run devoryarn dev). - Ensuring the Flowlitics Backend is running and accessible.
A brief overview of the project's directory structure:
src/: Contains the main source code.assets/: Static assets like CSS (if not fully Tailwind) and images.components/: Reusable Vue components (e.g.,AppHeader.vue,FlowCard.vue,GlobalToastNotifications.vue).composables/: Vue Composition API functions (e.g.,useApiClient.js,useNotifications.js).router/: Vue Router configuration.views/: Page-level components (e.g.,HomeView.vue,FlowView.vue).App.vue: The main application component.main.js: The application's entry point.
public/: Static assets that are directly served.index.html: The main HTML file.package.json: Project dependencies and scripts.
This project is in early development. Contribution guidelines will be established as the project matures. For now, feel free to open issues for bugs or feature suggestions.
This project is licensed under the MIT License - see the LICENSE file for details.