FluxChat is a real-time no-code workflow builder that enables users to create, manage, and collaborate on custom workflows visually, without writing any code. I led the frontend architecture, designed modular components, implemented real-time updates, and optimized performance to deliver an intuitive, scalable, and responsive platform.

🌟 Overview: FluxChat allows teams to visually design workflows using drag-and-drop elements, connect steps, and automate processes. Users can collaborate in real-time, seeing changes instantly. This project demonstrates my experience in scalable UI design, real-time collaboration, and frontend performance optimization.

🛠️ Tech Stack:

Frontend:

• React.js & Next.js (SSR & routing)
• TypeScript (type safety)
• CSS Modules / Styled Components
• Real-time collaboration via WebSockets / Socket.io

Backend:

• Node.js / Express.js (API endpoints for workflow management)
• Optional FastAPI for automation or AI integration
• RESTful API architecture

Other Tools:

• Git & GitHub for version control
• Vercel / Render for deployment
• ESLint & Prettier for code quality
• CI/CD pipelines

🔑 Key Features:

• Drag-and-drop workflow builder
• Real-time collaboration for multiple users
• Modular, reusable frontend components
• Responsive design for desktop & mobile
• Workflow persistence and API integration
• Performance-optimized for complex workflows

⚡ Setup (Local Development):

Frontend:

cd frontend
npm install
npm run dev
Backend:
bash
Copy code
cd backend
# Node.js
npm install
npm start

FastAPI (optional):
pip install -r requirements.txt
uvicorn src.main:app --reload

🏗 Architecture & Folder Structure:
pgsql
Copy code
FluxChat/
├─ frontend/
│   ├─ src/
│   │   ├─ pages/
│   │   ├─ components/
│   │   ├─ hooks/
│   │   └─ styles/
│   ├─ package.json
│   └─ tsconfig.json
└─ backend/
    ├─ src/
    │   ├─ api/
    │   └─ utils/
    └─ package.json

📝 My Role:
Led frontend architecture and built modular, reusable components
Implemented real-time collaboration using WebSockets / Socket.io
Designed scalable folder structure and optimized UI performance
Integrated backend APIs for workflow persistence and automation
Ensured clean code, responsiveness, and production-ready deployment

📂 Portfolio & Contact:
GitHub: https://github.com/Achi-Vyshnavi
LinkedIn: https://linkedin.com/in/vyshnavi-achi

Built with ❤️ by Vyshnavi Achi – Frontend Engineer | React.js & Next.js Specialist