FlowProof Studio

FlowProof is a comprehensive n8n workflow validation platform that provides static analysis, webhook testing, and automated quality reporting with shareable badges.

Features

• Workflow Analysis: Static code analysis for n8n workflows with detailed lint results
• Webhook Testing: Test n8n webhooks with custom headers, authentication (Basic Auth, Bearer Token, API Key), and payload configuration
• Client Reports: Automated quality reports for client delivery
• Quality Badges: Shareable badges showcasing workflow quality
• Badge Verification: Public verification system for badge authenticity
• Light/Dark Theme: Full theme support with smooth transitions

Tech Stack

This project is built with:

• Frontend: Vite + React + TypeScript
• UI Components: shadcn-ui + Tailwind CSS
• State Management: Zustand
• Backend: Express.js
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js & npm installed - install with nvm

Installation

# Clone the repository
git clone <YOUR_GIT_URL>

# Navigate to the project directory
cd flowproof-studio

# Install dependencies
npm i

# Start the development server
npm run dev

The application will be available at http://localhost:8080

Development

Running the Dev Server

npm run dev

This starts both the frontend (Vite) and backend (Express) servers concurrently.

Building for Production

npm run build

Running Tests

npm run test

Environment Variables

Create a .env.local file in the root directory with the following variables:

VITE_API_BASE_URL=http://localhost:3001
# Add other environment variables as needed

Project Structure

flowproof-studio/
├── public/           # Static assets (icons, images)
├── server/           # Express backend
│   ├── routes/       # API route handlers
│   └── api/          # API utilities
├── src/
│   ├── components/   # React components
│   ├── hooks/        # Custom React hooks
│   ├── lib/          # Utilities and helpers
│   ├── pages/        # Page components
│   └── store/        # Zustand state management
└── ...

Authentication

FlowProof supports multiple authentication methods for webhook testing:

• Basic Auth: Username/password with automatic Base64 encoding
• Bearer Token: JWT or API tokens
• API Key: Custom header-based authentication
• Custom Headers: Fully customizable header configuration

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Contact

For questions or support, please open an issue on GitHub.