A modern React template for building professional workflow applications with React Flow integration, floating panels, dark mode, and comprehensive node configuration.
- Node.js 18+
- npm or yarn
- Git
# Clone the repository
git clone <your-repo-url>
cd workflow-boilerplate-2
# Install dependencies
npm install
# Start development server
npm startOpen http://localhost:3000 to view the application.
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe development
- Create React App - Zero-config React setup
- React Flow - Interactive node-based workflow builder
- Custom Node Types - Start, End, Action, Decision, Loop nodes
- Node Configuration - Real-time node property editing
- Workflow Management - Add, delete, duplicate, reset workflows
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - High-quality React components
- Bootstrap Icons - Professional icon set
- Dark Mode Default - Modern dark theme with light mode toggle
- Floating Panels - 12px spacing with rounded corners and shadows
- Responsive Design - Auto-collapse panels on mobile
- Global Header - 48px height with branding and user menu
- Three-Panel Layout - Left controls, center canvas, right configuration
- ESLint - Code linting and formatting
- TypeScript - Type checking and IntelliSense
- PostCSS - CSS processing
- Hot Reload - Development experience
src/
├── components/
│ ├── ui/ # shadcn/ui components
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ └── ...
│ ├── GlobalHeader.tsx # Header with branding and user menu
│ ├── Layout.tsx # Main layout orchestrator
│ ├── Panel.tsx # Collapsible side panels
│ ├── WorkflowBuilder.tsx # React Flow workflow builder
│ ├── WorkflowControls.tsx # Left panel workflow controls
│ ├── NodeConfiguration.tsx # Right panel node configuration
│ └── Canvas.tsx # Main content area
├── lib/
│ └── utils.ts # Utility functions
├── types/
│ └── workflow.ts # TypeScript definitions
├── App.tsx # Main application component
├── index.tsx # React entry point
└── index.css # Global styles and dark mode
Create a .env file in the root directory (optional):
REACT_APP_API_URL=your_api_url_here
REACT_APP_VERSION=1.0.0# Start development server
npm start
# Build for production
npm run build
# Run tests
npm test
# Run linting
npm run lint
# Type checking
npm run type-check# Create production build
npm run build
# Serve production build locally
npx serve -s build- Interactive Canvas - Full-screen React Flow workflow builder
- Node Types - Start, End, Action, Decision, Loop nodes
- Drag & Drop - Intuitive node creation and positioning
- Node Connections - Visual edges with proper handles
- Zoom & Pan - Built-in navigation controls
- MiniMap - Overview of entire workflow
- Floating Design - 12px spacing from browser edges
- Rounded Corners - Modern card-like appearance
- Shadows - Subtle depth and elevation
- Collapsible - 300px expanded, 32px collapsed
- Responsive - Auto-collapse on mobile devices
- Click to Configure - Click any node to open configuration
- Real-time Updates - Changes apply immediately
- Type-specific Fields - Different options per node type
- Visual Hierarchy - Node type above label display
- Theme Aware - Adapts to dark/light mode
- Default Theme - Dark mode by default
- Light Mode Toggle - Switch in user menu
- Theme Persistence - Remembers user preference
- Icon Colors - White icons in dark mode
- Node Styling - Theme-aware node colors
- Create a new node component in
WorkflowBuilder.tsx - Add the node type to the node factory
- Update the node configuration panel
- Add type-specific styling
- Modify
src/index.cssfor global styles - Use Tailwind classes for component styling
- Customize dark mode colors in CSS variables
- Update panel spacing and shadows
- Update colors in
tailwind.config.js - Modify dark mode variables in
index.css - Customize component themes
- Add new color schemes
- Automatic code splitting
- Asset optimization
- Bundle analysis
- Performance monitoring
- Connect your GitHub repository
- Set build command:
npm run build - Set publish directory:
build - Deploy automatically
- Import your GitHub repository
- Set framework preset to Create React App
- Deploy automatically
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]- Desktop (1024px+) - Full panel layout
- Tablet (768px-1023px) - Collapsed panels
- Mobile (<768px) - Auto-collapsed panels
- Always Visible - Panels never completely hidden
- Auto-collapse - Collapse when browser < 1024px
- Manual Control - Users can toggle panels
- Floating Design - Consistent spacing on all devices
// Example workflow execution
const executeWorkflow = async (nodes: Node[], edges: Edge[]) => {
const response = await fetch('/api/workflow/execute', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nodes, edges })
});
return response.json();
};// Example node configuration
const updateNode = (nodeId: string, updates: Partial<Node>) => {
setNodes(nodes => nodes.map(node =>
node.id === nodeId ? { ...node, ...updates } : node
));
};The template includes a pre-built e-commerce order processing workflow:
- Start - Customer places order
- Action - Validate order details
- Decision - In stock? (Yes/No paths)
- Action - Process & ship (Yes path)
- Action - Notify out of stock (No path)
- End - Complete
- React Documentation
- React Flow Documentation
- Tailwind CSS Documentation
- Bootstrap Icons
- shadcn/ui Components
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
Ready to build professional workflows? Start with npm start and create amazing workflow applications! 🚀