SyncBridge : Real-Time Workflow Automation CRM
A high-performance, real-time workflow automation CRM built with React, Node.js, Framer Motion & Tailwind CSS. Features an AI-powered error resolution engine, live data sync streams with animated activity feeds, instant template-to-workflow deployment, Razorpay-integrated subscription architecture with INR pricing, multi-workspace team management, email notification system, audit logging, and secure AES-256 encrypted connection management.
Feature
Description
Real-time Dashboard Live stat cards, workflow health overview, and pending actions at a glance
Activity Feed Simulated real-time sync stream with animated entry transitions
Analytics Charts Recharts-powered bar & line charts for records synced, success rates, and time saved
Time Saved Calculator Auto-computes admin hours saved based on total records synced
Error Prevention Stats Tracks duplicates caught, missing fields flagged, and invoice mismatches stopped
Top Workflows Ranking Visual leaderboard of most active workflows by record volume
🔗 Connections & Integrations
Feature
Description
Multi-Platform Support Connect to HubSpot, Salesforce, Zoho, Google Sheets, Notion, Slack, Stripe, and more
AES-256 Encryption All API keys encrypted at rest using AES-256-CBC with per-workspace IV
Connection Health Ring SVG-based health score indicator derived from status + recency of last update
One-Click Test Verify connection health with instant feedback and toast notifications
Tier-Based Limits Connector limits enforced per subscription tier (Free: 2, Starter: 5, etc.)
Demo Mode Detection Keys prefixed with SBaiCrm auto-connect and activate demo data across all pages
Feature
Description
Visual Workflow Builder Drag-and-drop node editor with trigger, action, filter, delay, and output nodes
Template Marketplace 6 pre-built workflow templates with full node/edge configs ready for instant deployment
Workflow Status Toggle Activate or pause workflows with a single toggle switch
Clone & Delete Duplicate workflows instantly or delete with confirmation modal
Sortable Table Sort workflows by last run, node count, or error count
Cron Execution Background cron job polls active workflows every 15 minutes and executes via AI agent pipeline
AI Executor Agent LangChain + Groq-powered agent that processes workflow nodes intelligently
Auto-Pause Workflows auto-pause after 5 consecutive failures with email notification
Feature
Description
CSV/Excel Upload Drag-and-drop file upload with automatic header detection and row preview
AI Field Mapping LangChain agent auto-maps uploaded columns to CRM schema fields
Manual Override Drag-and-drop field remapping with visual connection lines
Schema Support Built-in schemas for Leads, Contacts, Deals, Invoices, Tickets, and Products
Row Limit Enforcement Tier-based row limits (Free: 1K, Starter: 10K, Growth: 100K, Agency: 1M)
Feature
Description
AI-Suggested Fixes Every error comes with an AI-generated suggested resolution
Bulk Actions Select multiple errors and resolve, retry, or ignore in one click
Grouping & Search Group errors by workflow, type, or date with real-time search filtering
Error Type Badges Color-coded badges for Duplicate Record, Missing Field, API Timeout, etc.
Feature
Description
Live Stream Animated real-time feed of sync events with status indicators
Expandable Logs Click any log row to see full record preview, error details, and AI fix suggestion
Duplicate Detection Side panel showing detected duplicates with merge/ignore actions
Missing Fields Alerts Real-time alerts for records with missing required fields
Feature
Description
JWT Authentication Secure HttpOnly cookie-based auth with bcrypt password hashing
Multi-Step Onboarding 4-step guided setup: profile → industry → tools → recommended template
Multi-Workspace System Create, switch, and delete workspaces with workspace-scoped data isolation
Role-Based Access Admin, Member, and Viewer roles with granular permissions
Email Invitations Invite team members via Resend transactional email with team code link
Team Management Add members, change roles, and remove users from workspace
Active Workspace Protection Cannot delete the currently active workspace — must switch first
🏢 Multi-Workspace Management
Feature
Description
Create Workspaces Spin up new workspaces with auto-generated team codes
Switch Workspaces Instantly switch active workspace — all data (team, billing, workflows) updates in context
Delete Workspaces Admin-only workspace deletion with confirmation (active workspace protected)
Workspace-Scoped Data Team members, connections, workflows, audit logs, and billing are all workspace-scoped
💳 Subscription & Payments
Feature
Description
4-Tier INR Pricing Free, Starter (₹4,999), Growth (₹9,999), and Agency (₹19,999) subscription plans
Razorpay Integration Dual-mode payment: simulated dummy flow when keys are empty, real Razorpay checkout when configured
Tier-Gated Pages Automatic redirection to upgrade page when accessing locked features
Feature Comparison Detailed feature matrix across all tiers on the pricing page
Dynamic Billing Tab Settings → Billing shows current tier, price, renewal date, and usage progress bars
Feature
Description
Sync Failure Alerts Email notification when a workflow run errors out completely
Duplicate Detection Alerts Email when SyncBridge spots and skips a duplicate record
Workflow Paused Alerts Email when a workflow auto-pauses due to repeated errors
Per-User Preferences Each user can independently toggle notification types on/off
Resend Integration Transactional emails sent via Resend with branded HTML templates
Feature
Description
Workspace-Scoped Trail Every significant action is logged per workspace
30-Day History Paginated audit log with timestamps, actors, actions, and targets
CSV Export One-click CSV download of the full audit trail
Tracked Events Login, signup, team invite, role change, workflow creation, and more
Feature
Description
Dark/Light Theme System-aware theme toggle with persistent preference
Framer Motion Animations Spring-physics page transitions, staggered card reveals, and micro-interactions
Responsive Design Fully adaptive layouts for desktop, tablet, and mobile
Collapsible Sidebar Navigation sidebar with collapse/expand and active route highlighting
Toast Notifications Rich toast system via Sonner for success, error, and info messages
Competitive Landing Page Marketing page with hero, features grid, competitor comparison, and CTA sections
Settings Hub 7-tab settings page: Profile & Team, Notifications, Workspaces, Billing, Audit Log, AI Model
Technology
Version
Purpose
React
19.2.6
UI Framework with Hooks & Context API
React Router DOM
7.16.0
Client-side Routing & Navigation
Tailwind CSS
3.2.0
Utility-first CSS Styling
Framer Motion
12.40.0
Spring-physics Animations & Transitions
Recharts
3.8.1
Data Visualization (Bar, Line Charts)
Lucide React
1.17.0
Modern SVG Icon Library
Sonner
2.0.7
Rich Toast Notification System
Radix UI
Various
Accessible Headless UI Primitives
Zod
4.4.3
Schema Validation (forms)
Axios
1.16.1
HTTP Client for API Calls
Vite
8.0.14
Next-gen Build Tool & Dev Server
Technology
Version
Purpose
Node.js
22.x
JavaScript Runtime
Express.js
5.2.1
Web Application Framework
MongoDB
Cloud
NoSQL Database
Mongoose
9.6.3
MongoDB ODM
LangChain
1.4.2
AI Agent Orchestration Framework
Groq SDK
1.2.1
LLM Inference (Llama Models)
Razorpay
2.9.6
Payment Gateway (INR)
Resend
4.2.0
Transactional Email (Invites & Notifications)
Zod
4.4.3
Request Body Validation
bcryptjs
3.0.3
Password Hashing
jsonwebtoken
9.0.3
JWT Authentication
Helmet
8.2.0
Security Headers
express-rate-limit
8.5.2
API Rate Limiting
Multer
2.1.1
File Upload Handling
PapaParse
5.5.3
CSV Parsing Engine
ExcelJS
4.4.0
Excel File Processing
node-cron
4.2.1
Background Job Scheduling
crypto (AES-256)
Built-in
API Key Encryption
syncbridge/
├── frontend/ # React Frontend Application
│ ├── src/
│ │ ├── components/ # Reusable UI Components
│ │ │ ├── AppLayout.jsx # Sidebar + Topbar app shell
│ │ │ ├── MarketingLayout.jsx # Landing page layout
│ │ │ ├── ProtectedRoute.jsx # Auth-guarded route wrapper
│ │ │ ├── ThemeToggle.jsx # Dark/Light mode switch
│ │ │ ├── Logo.jsx # Brand logo component
│ │ │ └── ui/ # Radix-based primitives (Button, Card, Sonner)
│ │ │
│ │ ├── constants/ # Static Data & Demo Content
│ │ │ ├── analytics.js # Demo analytics chart data
│ │ │ ├── apps.js # Supported integration apps
│ │ │ ├── competitors.js # Landing page competitor comparison
│ │ │ ├── dashboard.js # Demo stat cards & workflows
│ │ │ ├── errors.js # Demo error entries
│ │ │ ├── pricing.js # Subscription tier definitions (INR)
│ │ │ ├── settings.js # Settings page config
│ │ │ ├── syncLogs.js # Demo sync log entries
│ │ │ └── templates.js # Workflow templates with full node/edge configs
│ │ │
│ │ ├── lib/ # Context Providers & Utilities
│ │ │ ├── AuthContext.jsx # Authentication state & API fetch wrapper
│ │ │ ├── DemoContext.jsx # Demo mode detection & hasErrors state
│ │ │ ├── theme.jsx # Theme provider (dark/light)
│ │ │ ├── tierAccess.js # Subscription tier gate logic
│ │ │ └── utils.js # Shared utility functions (cn)
│ │ │
│ │ ├── pages/ # Application Pages
│ │ │ ├── Landing.jsx # Marketing landing page
│ │ │ ├── Settings.jsx # 7-tab settings hub (Profile, Notifications, Workspaces, Billing, Audit, AI Model)
│ │ │ ├── auth/
│ │ │ │ ├── Login.jsx # Login form with validation
│ │ │ │ ├── Signup.jsx # Registration form with team code support
│ │ │ │ └── Onboarding.jsx # 4-step guided onboarding
│ │ │ ├── crm/
│ │ │ │ ├── Dashboard.jsx # Main dashboard with stats & activity
│ │ │ │ ├── Connections.jsx # Integration management
│ │ │ │ ├── Sources.jsx # CSV/Excel file upload & parsing
│ │ │ │ ├── Mapper.jsx # AI-powered field mapping
│ │ │ │ ├── WorkflowsList.jsx # Workflow table with CRUD
│ │ │ │ ├── WorkflowBuilder.jsx # Visual node editor
│ │ │ │ ├── Templates.jsx # Pre-built workflow templates
│ │ │ │ ├── Monitor.jsx # Live sync monitor & logs
│ │ │ │ ├── Analytics.jsx # Charts & performance metrics
│ │ │ │ └── Errors.jsx # Error center with AI fixes
│ │ │ └── payment/
│ │ │ ├── Subscriptions.jsx # Pricing tier selection (INR)
│ │ │ ├── PaymentGateway.jsx # Razorpay checkout (dual dummy/real mode)
│ │ │ └── SubscriptionLockedPage.jsx # Upgrade prompt for locked features
│ │ │
│ │ ├── App.jsx # Root component with routing & TierGate
│ │ ├── main.jsx # Application entry point
│ │ ├── index.css # Global styles & Tailwind directives
│ │ └── App.css # App-specific styles & animations
│ │
│ ├── index.html # HTML template
│ ├── package.json # Frontend dependencies
│ ├── tailwind.config.js # Tailwind CSS configuration
│ ├── vite.config.js # Vite build configuration
│ └── vercel.json # Vercel SPA rewrite rules
│
├── backend/ # Node.js Backend Server
│ ├── src/
│ │ ├── config/
│ │ │ ├── db.js # MongoDB connection setup
│ │ │ ├── mailer.js # Resend email transporter (invites)
│ │ │ ├── notifications.js # Email notification engine (sync alerts)
│ │ │ ├── razorpay.js # Razorpay client initialization
│ │ │ └── validateEnv.js # Startup environment variable validator
│ │ │
│ │ ├── middleware/
│ │ │ ├── auth.middleware.js # JWT verify + role-based guards
│ │ │ ├── errorHandler.middleware.js # Global error & 404 handler
│ │ │ ├── rateLimiter.middleware.js # Express rate limiting
│ │ │ ├── validate.middleware.js # Zod schema validation middleware
│ │ │ └── validators.js # Zod schemas (auth, workflow, settings)
│ │ │
│ │ ├── modules/
│ │ │ ├── auth/
│ │ │ │ ├── auth.controller.js # Signup, login, logout, profile, onboarding
│ │ │ │ ├── auth.route.js # Auth API routes
│ │ │ │ ├── user.model.js # User mongoose schema (multi-workspace)
│ │ │ │ ├── workspace.model.js # Workspace mongoose schema (subscription)
│ │ │ │ └── invite.model.js # Team invite schema
│ │ │ │
│ │ │ ├── auditLog/
│ │ │ │ ├── auditLog.controller.js # Audit event logger + list + CSV export
│ │ │ │ ├── auditLog.model.js # AuditLog schema (workspace-scoped)
│ │ │ │ └── auditLog.route.js # Audit log API routes
│ │ │ │
│ │ │ ├── connection/
│ │ │ │ ├── connection.controller.js # CRUD + demo detection
│ │ │ │ ├── connection.model.js # Connection schema (encrypted keys)
│ │ │ │ └── connection.route.js # Connection API routes
│ │ │ │
│ │ │ ├── error/
│ │ │ │ ├── error.controller.js # Error CRUD + bulk actions
│ │ │ │ ├── error.model.js # Error schema
│ │ │ │ └── error.route.js # Error API routes
│ │ │ │
│ │ │ ├── mapping/
│ │ │ │ ├── mapping.controller.js # Save/load field mappings
│ │ │ │ ├── mapping.model.js # Mapping schema
│ │ │ │ ├── mapping.route.js # Mapping API routes
│ │ │ │ ├── fieldMappingAgent.js # LangChain field mapping AI
│ │ │ │ └── crmSchemas.js # Target CRM field schemas
│ │ │ │
│ │ │ ├── search/
│ │ │ │ ├── search.controller.js # Global search across entities
│ │ │ │ └── search.route.js # Search API routes
│ │ │ │
│ │ │ ├── settings/
│ │ │ │ ├── settings.controller.js # Workspace name + notification prefs
│ │ │ │ └── settings.route.js # Settings API routes
│ │ │ │
│ │ │ ├── subscription/
│ │ │ │ ├── subscription.controller.js # Razorpay checkout + tier upgrade
│ │ │ │ └── subscription.route.js # Subscription API routes
│ │ │ │
│ │ │ ├── syncLog/
│ │ │ │ ├── syncLog.controller.js # Sync log CRUD + stats
│ │ │ │ ├── syncLog.model.js # SyncLog schema
│ │ │ │ └── syncLog.route.js # Sync log API routes
│ │ │ │
│ │ │ ├── team/
│ │ │ │ ├── team.controller.js # Invite, remove, role change + audit
│ │ │ │ └── team.route.js # Team API routes
│ │ │ │
│ │ │ ├── workflow/
│ │ │ │ ├── workflow.controller.js # CRUD + clone + status toggle
│ │ │ │ ├── workflow.model.js # Workflow schema (nodes/edges)
│ │ │ │ ├── workflow.route.js # Workflow API routes
│ │ │ │ ├── workflow.cron.js # Scheduled execution + auto-pause + notifications
│ │ │ │ └── workflowExecutorAgent.js # LangChain AI executor
│ │ │ │
│ │ │ └── workspace/
│ │ │ ├── workspace.controller.js # Create, list, switch, delete workspaces
│ │ │ └── workspace.route.js # Workspace API routes
│ │ │
│ │ ├── routes/
│ │ │ └── apiRoutes.js # File upload + AI mapping endpoints
│ │ │
│ │ └── utils/
│ │ └── encryption.util.js # AES-256-CBC encrypt/decrypt
│ │
│ ├── server.js # Express server entry point
│ └── package.json # Backend dependencies
│
├── .gitignore # Git ignore rules
├── LICENSE # MIT License
└── README.md # Project documentation
Method
Endpoint
Description
POST/api/auth/signupRegister a new user (with optional team code)
POST/api/auth/loginLogin with email & password
GET/api/auth/meGet current authenticated user
POST/api/auth/logoutClear auth cookie
PUT/api/auth/profileUpdate name, email, or password
PUT/api/auth/onboardingSave onboarding preferences
Method
Endpoint
Description
GET/api/team/membersList workspace members
POST/api/team/inviteSend email invite (Admin only)
GET/api/team/invitesList pending invites (Admin only)
DELETE/api/team/invite/:idCancel a pending invite
PUT/api/team/member/:id/roleChange member role
DELETE/api/team/member/:idRemove member from workspace
Method
Endpoint
Description
GET/api/workspacesList all user workspaces
POST/api/workspacesCreate a new workspace
POST/api/workspaces/switchSwitch active workspace
DELETE/api/workspaces/:idDelete a workspace (Admin only)
Method
Endpoint
Description
GET/api/workflowsList workspace workflows
POST/api/workflowsCreate a new workflow
GET/api/workflows/:idGet workflow details
PUT/api/workflows/:idUpdate workflow
DELETE/api/workflows/:idDelete workflow
PATCH/api/workflows/:id/toggleToggle active/paused status
POST/api/workflows/:id/cloneClone a workflow
Method
Endpoint
Description
GET/api/connectionsList workspace connections
POST/api/connectionsAdd a new connection
DELETE/api/connections/:idRemove a connection
POST/api/connections/:id/testTest connection health
Method
Endpoint
Description
POST/api/subscription/checkoutCreate Razorpay order or dummy checkout
POST/api/subscription/verifyVerify Razorpay payment signature
Method
Endpoint
Description
GET/api/settings/workspaceGet workspace info
PUT/api/settings/workspaceUpdate workspace name (Admin only)
GET/api/settings/notificationsGet notification preferences
PUT/api/settings/notificationsSave notification preferences
Method
Endpoint
Description
GET/api/audit-logsPaginated audit log (30-day default)
GET/api/audit-logs/exportDownload audit log as CSV
Method
Endpoint
Description
POST/api/uploadUpload CSV/Excel file
POST/api/map-fieldsAI-powered field mapping
GET/api/searchGlobal search across entities
GET/api/sync-logsList sync logs
GET/api/sync-logs/statsSync log statistics
GET/api/errorsList errors
GET/api/errors/countError count
POST/api/errors/bulkBulk resolve/retry/ignore
Landing Page (Marketing / Login / Signup)
│
▼
Login / Signup (with optional team code)
│
▼
Onboarding (4 Steps)
(Profile → Industry → Tools → Template)
│
▼
Dashboard ◄──────────────────────────────────────────┐
(Stats, Activity Feed, Workflow Health) │
│ │
├──► Connections ──► Test / Demo Mode │
│ (Add API keys, health check) │
│ │
├──► Sources ──► Mapper │
│ (Upload CSV/Excel → AI Field Mapping) │
│ │
├──► Workflows ──► Workflow Builder │
│ (List → Visual Node Editor) │
│ └──► Cron Execution (every 15 min) │
│ └──► Email Notifications │
│ (Failure / Pause alerts) │
│ │
├──► Templates ──► Create Workflow │
│ (One-click deploy pre-built configs) │
│ │
├──► Monitor │
│ (Live sync stream, logs, duplicates) │
│ │
├──► Analytics │
│ (Charts, time saved, top workflows) │
│ │
├──► Errors │
│ (AI fixes, bulk actions, search) │
│ │
├──► Settings ─────────────────────────────────┘
│ ├── Profile & Team
│ ├── Notifications (Email toggles)
│ ├── Workspaces (Create / Switch / Delete)
│ ├── Billing (Dynamic tier + usage bars)
│ ├── Audit Log (30-day trail + CSV export)
│ └── AI Model (Groq API config)
│
└──► Subscriptions ──► Razorpay Checkout
(Free / Starter / Growth / Agency — INR)
💖 Sponsor
If you find SyncBridge helpful and would like to support its continued development, consider sponsoring!
Your support helps cover hosting costs, development time, and enables new features. Every contribution is greatly appreciated! ☕✨
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ using React, Node.js and LangChain AI by Arka Ghosh , Adrija Das , Arpan Paul , Ankita Roy and Abhimanyu Kumar
