airiot-frontend

The AIRIOT Frontend development skill serves as a comprehensive framework guide for engineers and AI agents tasked with building high-performance, real-time industrial applications. By leveraging a React and TypeScript architecture, this skill simplifies the complex integration requirements of the AIRIOT platform into manageable, modular hooks and components. Developers can utilize pre-configured shadcn/ui styling to maintain professional design standards while accessing a robust set of utilities for state management, data binding, and API communication. This tool is intended for front-end developers, full-stack engineers, and IoT application architects who need to interface with the AIRIOT backend efficiently, handle real-time WebSocket subscriptions, and implement complex CRUD operations with minimal boilerplate code.

• Streamlined API Client: Provides high-level abstractions like createAPI to handle RESTful operations, pagination, filtering, and data transformation effortlessly.

• Integrated Authentication: Built-in hooks such as useLogin, useLogout, and useUser manage user sessions and platform security context seamlessly.

• Advanced Form Handling: Integrates with react-hook-form and JSON Schema to facilitate dynamic form building, validation, and field state management.

• Jotai-based State Management: Utilizes Model and TableModel patterns to keep application state synchronized across complex dashboard components.

• Real-time Subscriptions: Features WebSocket-based data updates via useTag and useTableData, enabling live monitoring for IoT dashboards and event systems.

• Comprehensive Page Hooks: Manages page-level variables and data sources, including usePageVar and useDatasourceValue for reactive UI updates.

• Event System: Implements an event-driven architecture using useEvents and useEvent to decouple business logic from UI interactions.

• Ensure the AIRIOT CLI is configured with the correct base URL and project ID before initializing the development environment.

• Follow the defined project structure (src/pages, src/blocks, src/components) to maintain scalability and consistency within team-based projects.

• Utilize the provided TypeScript interfaces for all data models to ensure type safety across API responses and state objects.

• Always invoke useSubscribeContext when implementing real-time data streaming to ensure clean memory management and proper lifecycle handling.

• The tool requires node environment setup with support for Vite, and is optimized for React 18/19 compatibility.