ClientHub — AI-Powered Agency Client & Project Management Portal

Built by Suryakanta Pradhan (MCA, Full-Stack Web Development)

ClientHub is a SaaS-style portal for a freelance agency/studio. It unifies client & project management, a multi-tenant role-based dashboard, and invoicing with online payments — plus an AI weekly progress report powered by the Groq API (Llama 3.3).

🔗 Live demo: add your deployed URL here · 🎥 Demo video: add your video/GIF link here

---

📸 Screenshots

Login	Admin Dashboard

Kanban Board	Invoice + AI Report

Screenshots live in docs/screenshots/. Replace the placeholders with your own captures (light and dark mode look great side by side).

---

✨ Key Features

• 🔐 Auth & RBAC — JWT + bcrypt, three roles (Admin / Team Member / Client)
• 👥 Clients — CRUD, logo upload (ImageKit), search & filter
• 📁 Projects — budget, timeline, auto-calculated progress %
• 🗂️ Kanban tasks — drag & drop (@dnd-kit), comments, time tracking, activity log
• 🧾 Invoicing & payments — PDF export, Razorpay test mode, webhook-verified status
• 🔔 Real-time notifications — Socket.io + email fallback
• 📊 Analytics — Recharts dashboards with KPI tiles for admin & client
• 🤖 AI progress summary — Groq API weekly report + risk flag, with graceful fallback
• 🌙 Dark mode — system-aware theme toggle, persisted per user
• 🔔 Toast notifications — instant success/error feedback on every action
• 🛡️ Security — Helmet headers, rate limiting, Zod validation, env-var checks

🛠️ Tech Stack

Frontend: React, Tailwind CSS, Recharts, @dnd-kit, Axios, React Router Backend: Node.js, Express, Prisma, PostgreSQL, Socket.io, JWT, bcrypt, Helmet Integrations: Groq API (Llama 3.3), Razorpay, ImageKit, Nodemailer, node-cron

🏗️ Architecture

          ┌────────────┐        HTTPS / WebSocket        ┌──────────────┐
          │  React SPA │  ───────────────────────────▶   │  Express API │
          │  (Vite)    │  ◀───────────────────────────   │  + Socket.io │
          └────────────┘         JSON / events           └──────┬───────┘
                                                                 │ Prisma
                                     ┌───────────────────────────┼───────────────────────┐
                                     ▼               ▼           ▼           ▼            ▼
                               ┌──────────┐    ┌─────────┐  ┌────────┐  ┌──────────┐  ┌──────┐
                               │PostgreSQL│    │ Groq AI │  │Razorpay│  │ ImageKit │  │ SMTP │
                               │ (Prisma) │    │  (LLM)  │  │  (pay) │  │ (logos)  │  │(mail)│
                               └──────────┘    └─────────┘  └────────┘  └──────────┘  └──────┘

📂 Folder Structure

clienthub/
├── client/   # React frontend (Vite)
├── server/   # Node/Express backend
└── docs/     # Project report, presentation, Postman collection, screenshots

See docs/ and the project report for the full file-by-file breakdown.

🚀 Quick Start

Option A — Docker (one command)

Spins up PostgreSQL + API + frontend together. Needs Docker Desktop.

docker compose up --build
# Frontend → http://localhost:5173 · API → http://localhost:5000

Set secrets (JWT_SECRET, GROQ_API_KEY, etc.) in a .env next to docker-compose.yml, or use the safe demo defaults. The backend builds the DB schema (prisma db push) and seeds demo data automatically on first boot.

Option B — Local dev

# Backend
cd server
cp .env.example .env        # fill in values
npm install
npx prisma db push          # create the schema (no migration files needed)
npm run seed                # demo data + demo accounts
npm run dev

# Frontend (new terminal)
cd client
cp .env.example .env        # set VITE_API_URL
npm install
npm run dev

🧪 Quality & Tooling

Command	What it does
npm test	Run the unit/component test suite (Vitest) — server & client
npm run lint	Lint with ESLint (flat config) — server & client
npm run format	Auto-format with Prettier
npm run build (client)	Production build with vendor code-splitting

CI: every push/PR to main runs lint + tests + build for both apps via GitHub Actions (.github/workflows/ci.yml).

🔑 Demo Credentials

All demo accounts share the password Demo@1234. (For a clean demo, these are kept out of the login UI — the full list lives in DEMO_LOGINS.txt.)

Role	Email
Admin	admin@demo.com
Team Member	team@demo.com · priya@demo.com · arjun@demo.com · sana@demo.com
Client	client@demo.com · globex@demo.com · initech@demo.com · stark@demo.com

📦 Deployment

Frontend → Vercel · Backend → Render/Railway · Database → Neon/Supabase See docs/best free way to live this project for free.txt for a step-by-step free deploy guide.

📄 License

MIT © Suryakanta Pradhan