A Visual Tool for Building AI Agents - Frontend Documentation
InnoFlow's frontend provides an intuitive, drag-and-drop interface for designing, configuring, and deploying AI agent workflows. Built with React, Next.js, and Tailwind CSS, the frontend offers a seamless experience for creating complex AI systems without coding.
- Framework: Next.js (React)
- Styling: Tailwind CSS
- State Management: React Context API & useState
- UI Components: Radix UI
- Icons: Lucide React
- Routing: Next.js App Router
-
Clone the repository
git clone https://github.com/your-org/Innoflow-FrontEnd.git cd Innoflow-FrontEnd -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
cp .env.example .env.local # Edit .env.local with your API endpoint and other configurations -
Start the development server
npm run dev # or yarn dev # or pnpm run dev
-
Open your browser Navigate to http://localhost:3000
- Development:
npm run dev - Build:
npm run build - Start Production:
npm start - Lint:
npm run lint - Type Check:
npm run type-check - Format Code:
npm run format - Run Tests:
npm run test
Follow the same commitlint and Conventional Commits standard as the backend:
<type>: <description>
| Type | Meaning |
|---|---|
feat |
New feature (component, page, hook) |
fix |
Bug fix |
docs |
Documentation changes |
style |
CSS/styling changes (no logic changes) |
refactor |
Code changes with no feature/bug changes |
revamp |
Major UI/UX redesign or component overhaul |
perf |
Performance improvements |
test |
Adding/modifying tests (Jest, React Testing Library) |
chore |
Routine tasks, dependency updates |
| Test Type | What to Test? | Tools |
|---|---|---|
| Unit Tests | Hooks, Utilities, State Transformations | Jest, React Testing Library |
| Component Tests | UI Components, Rendering Logic | React Testing Library |
| Integration Tests | Component Interactions, User Flows | Cypress |
| E2E Tests | Full User Journeys | Cypress |
Run tests with:
npm run test # Run all tests
npm run test:watch # Run tests in watch mode
npm run test:coverage # Generate coverage report
npm run test:e2e # Run E2E tests with Cypress- Design in Figma (if applicable)
- Create component file in appropriate directory
- Build the component using shadcn/ui base components
- Write tests for the component
- Document component with JSDoc comments
- Create a Storybook story (if using Storybook)
- Use Tailwind CSS utility classes
- Follow project color themes defined in
tailwind.config.js - Use responsive design patterns for all components
- Ensure accessibility compliance (WCAG 2.1 AA)
- Use React Context for global state (authentication, theme, etc.)
- Use useState/useReducer for component-level state
- Consider using React Query for server state management
- Use consistent patterns for loading, error, and success states
InnoFlow supports the following breakpoints:
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
Test your components thoroughly at each breakpoint.
- All API calls should be centralized in services
- Use React Query for data fetching when possible
- Handle loading and error states consistently
- Implement proper authentication token management
- Login/Register: Via forms at
/auth - Token Storage: Secure storage in HTTP-only cookies
- Protected Routes: HOC wrapper for authenticated routes
- Token Refresh: Automatic token refresh mechanism
- Logout: Clear tokens and redirect to login
The frontend can be deployed using:
- Vercel (recommended for Next.js)
- Netlify
- AWS Amplify
- Docker (for custom deployments)
CI/CD pipeline is configured via GitHub Actions.
Please refer to the main CONTRIBUTING.md file in the project root for contribution guidelines.
By following these guidelines, your contributions to InnoFlow's frontend will maintain a high standard of quality and consistency! 🚀