🚀 AI Workflow Automation Platform

A full-stack AI-powered workflow automation platform that allows users to create, connect, and execute intelligent workflows using a visual drag-and-drop interface.

---

🧠 Overview

This project enables users to:

• Interact with an AI assistant 🤖
• Build workflows visually (like n8n / Zapier)
• Automate tasks using AI + APIs
• Manage and execute workflows efficiently

---

✨ Features

🔐 Authentication

• User Signup & Login (JWT-based)
• Secure password handling

🤖 AI Chat

• Real-time AI interaction
• Integrated with Groq / OpenAI APIs
• Error handling & loading states

⚡ Workflow Builder

• Drag & drop nodes using React Flow
• Connect nodes visually
• Custom nodes:
  • AI Node 🤖
  • API Node 🌐
  • Condition Node 🔀
  • Delay Node ⏳

📊 Dashboard

• Clean UI with sidebar navigation
• Responsive design (mobile + desktop)

---

🛠 Tech Stack

Frontend

• Next.js 16
• React 19
• Tailwind CSS
• React Flow

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)

AI Integration

• Groq API / OpenAI API

DevOps & Tools

• Git & GitHub
• Vercel (Frontend)
• Render (Backend)

---

📂 Project Structure

🚀 AI Workflow Automation Platform (HIPO)

A full-stack AI-powered workflow automation platform that allows users to create, connect, and execute intelligent workflows using a visual drag-and-drop interface.

---

🧠 Overview

This project enables users to:

• Interact with an AI assistant 🤖
• Build workflows visually (like n8n / Zapier)
• Automate tasks using AI + APIs
• Manage and execute workflows efficiently

---

✨ Features

🔐 Authentication

• User Signup & Login (JWT-based)
• Secure password handling

🤖 AI Chat

• Real-time AI interaction
• Integrated with Groq / OpenAI APIs
• Error handling & loading states

⚡ Workflow Builder

• Drag & drop nodes using React Flow
• Connect nodes visually
• Custom nodes:
  • AI Node 🤖
  • API Node 🌐
  • Condition Node 🔀
  • Delay Node ⏳

📊 Dashboard

• Clean UI with sidebar navigation
• Responsive design (mobile + desktop)

---

🛠 Tech Stack

Frontend

• Next.js 16
• React 19
• Tailwind CSS
• React Flow

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)

AI Integration

• Groq API / OpenAI API

DevOps & Tools

• Git & GitHub
• Vercel (Frontend)
• Render (Backend)

---

📂 Project Structure

ai-workflow-platform/ │ ├── client/ (Next.js frontend) │ ├── src/app/ │ ├── components/ │ └── styles/ │ ├── server/ (Node.js backend) │ ├── controllers/ │ ├── routes/ │ ├── models/ │ └── middleware/ │ └── README.md

---

⚙️ Setup Instructions

🔹 1. Clone Repo

git clone https://github.com/your-username/ai-workflow-platform.git

cd ai-workflow-platform

---

🔹 2. Backend Setup

cd server npm install

Create .env file:

MONGO_URI=your_mongodb_uri JWT_SECRET=your_secret GROQ_API_KEY=your_api_key

Run server:

npm run dev

---

🔹 3. Frontend Setup

cd client npm install npm run dev

---

🌐 Deployment

Service	Platform
Frontend	Vercel
Backend	Render
Database	MongoDB Atlas

---

📌 Future Improvements

• 🔥 Workflow execution engine
• 💾 Save & load workflows
• 📊 Analytics dashboard
• 🧠 AI memory (chat history)
• 🔐 Role-based access

---

🌐 Deployment

Service	Platform
Frontend	Vercel
Backend	Render
Database	MongoDB Atlas

---

📌 Future Improvements

• 🔥 Workflow execution engine
• 💾 Save & load workflows
• 📊 Analytics dashboard
• 🧠 AI memory (chat history)
• 🔐 Role-based access

---

🧠 Learnings

• Full-stack architecture design
• Real-world API debugging
• State management in React
• Backend authentication & security
• Visual workflow systems

---