React Condition Builder

A visual condition builder for creating complex logical expressions with nested groups and rules.

Features

✅ Nested Groups with AND/OR operators
✅ Add, edit, and delete rules
✅ Unlimited nesting depth
✅ Real-time validation
✅ JSON preview
✅ Built with React + TypeScript + Tailwind CSS

Quick Start

1. Install Dependencies

npm install

2. Run Development Server

npm run dev

Open http://localhost:5173 in your browser.

3. Build for Production

npm run build

The built files will be in the dist directory.

Usage

1. Add Rule: Click "+ Rule" to add a new condition
2. Add Group: Click "+ Group" to create a nested group
3. Toggle Operator: Click the AND/OR button to switch logical operators
4. Edit Rule:
   • Select a field (Price, Category, Rating)
   • Choose an operator (>, <, =, !=, >=, <=, contains)
   • Enter a value
5. Delete: Click the × button or "Delete Group" button

Project Structure

react-condition-builder/
├── src/
│   ├── components/
│   │   ├── ConditionBuilder.tsx    # Main container
│   │   ├── ConditionGroup.tsx      # Recursive group component
│   │   └── ConditionRule.tsx       # Rule component
│   ├── hooks/
│   │   └── useConditionTree.ts     # State management hook
│   ├── types.ts                     # TypeScript definitions
│   ├── utils.ts                     # Helper functions
│   ├── App.tsx                      # Root component
│   ├── main.tsx                     # Entry point
│   └── index.css                    # Tailwind CSS
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

Technologies

• React 18 - UI library
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling
• Vite - Build tool and dev server

Git Setup

# Initialize repository
git init
git add .
git commit -m "Initial commit: React Condition Builder"

# Push to GitHub
git remote add origin https://github.com/YOUR_USERNAME/react-condition-builder.git
git branch -M main
git push -u origin main

Deploy to GitHub Pages

Create .github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm run build
      - uses: actions/configure-pages@v3
      - uses: actions/upload-pages-artifact@v2
        with:
          path: './dist'
      - uses: actions/deploy-pages@v2

Then enable GitHub Pages in repository settings.

License

MIT