🔺 Project Triangle — AI-Powered Freelancer Ecosystem

Solving the Triple Constraint of Scope, Time & Cost with intelligent AI-driven project management.

Project Triangle is a full-stack, AI-enhanced freelance project management platform built on the MERN stack. It addresses the classic Project Management Triangle — balancing Scope, Time, and Cost — using Google Gemini AI for intelligent scoping, Socket.io for real-time collaboration, and Twilio for SMS and voice notifications. Clients can post projects, freelancers can bid, and both parties can track progress through a live visual dashboard.

✨ Features

Feature	Description	Status
🤖 AI Scope Generator	Gemini automatically breaks project descriptions into milestones, timelines, and budget estimates	✅ Active
💬 Real-Time Chat	Instant client-freelancer messaging powered by Socket.io	✅ Active
📊 Triple Constraint Tracker	Live visual monitoring of Scope, Time, and Cost against project targets	✅ Active
🔐 JWT Authentication	Secure role-based login for clients and freelancers	✅ Active
📑 AI Project Summarizer	Gemini-generated summaries of long project discussions and timelines	✅ Active
📋 Bidding System	Freelancers submit competitive proposals with cost estimates and portfolios	✅ Active
📲 Twilio Notifications	SMS and voice call alerts for bid updates, milestone completions, and deadlines	✅ Active
📱 Responsive UI	Fully optimized dashboard for desktop and mobile browsers	✅ Active

🗂️ Project Structure

Final_Project_Triangle/
│
├── backend/                        # Node.js + Express — REST API & AI logic
│   ├── controllers/                # Route handlers (projects, bids, chat, AI)
│   ├── models/                     # MySQL schema models
│   ├── middleware/                  # JWT authentication & request validation
│   ├── routes/                     # API route definitions
│   ├── config/                     # DB connection & environment setup
│   └── server.js                   # Express + Socket.io server entry point
│
├── client/                         # React (Vite) — primary frontend app
│   └── src/
│       ├── components/             # Reusable UI (Chat, Dashboard, Navbar, Bid cards)
│       ├── pages/                  # Home, Project View, Freelancer Profile, Login
│       ├── context/                # Auth context & global state management
│       └── main.jsx                # App entry point
│
├── project-triangle-frontend/      # Alternate / staging frontend build
│
├── node_modules/                   # Root-level Node dependencies
│
├── Dump20251007 (2).sql            # MySQL database dump — import to seed DB
├── package.json                    # Root dependencies (Tailwind, Twilio)
├── .gitignore
└── README.md

🛠️ Tech Stack

Frontend

React.js with Vite — fast, modern UI build tool
Tailwind CSS v4 — utility-first styling
Socket.io Client — real-time bidirectional communication

Backend

Node.js + Express.js — RESTful API server
Socket.io — real-time event-driven messaging
JWT — stateless authentication and authorization
Twilio — SMS and voice call notifications

Database

MySQL — relational database for users, projects, bids, and messages
SQL dump file included: Dump20251007 (2).sql

Google Gemini API — AI scoping, summarization, and project review

🤖 Google Gemini AI Integration

Gemini is the intelligence engine behind Project Triangle's most powerful features. It is called entirely from the backend (Express API routes) — keeping the API key secure and off the client.

What Gemini Does

AI Scope Generator — A client describes their project in plain language. Gemini analyzes it and generates a structured breakdown: deliverables, recommended milestones, estimated timeline, and a realistic budget range.

AI Project Summarizer — On long-running projects, Gemini reads through the chat history and milestone logs and generates a concise plain-language progress summary for both parties.

Scope Compliance Review — When a freelancer marks a milestone as complete, Gemini compares the deliverables against the original project scope and flags any discrepancies.

API Flow

Client submits project description
        │
        ▼
  Express API route receives request
        │
        ▼
  Prompt built with project context
        │
        ▼
  Gemini API called (server-side only)
        │
        ▼
  Structured JSON response parsed
        │
        ▼
  Milestones, timeline & budget saved to MySQL
        │
        ▼
  Dashboard updated with AI-generated plan

Getting Your Gemini API Key

Visit https://ai.google.dev/ and sign in with your Google account
Click "Get API Key" → "Create API Key in new project"
Copy the key and add it to your backend/.env file as GEMINI_API_KEY

⚠️ Always call Gemini from your Express backend routes — never expose the API key in React/frontend code.

💬 Real-Time Features — Socket.io

Project Triangle uses Socket.io for instant, bidirectional communication between clients and freelancers without page refreshes.

Real-time events include:

Live chat messages between client and freelancer
Instant bid notifications when a new proposal arrives
Milestone status updates reflected immediately on both sides
Dashboard constraint meters (Scope/Time/Cost) updating in real time

The Socket.io server runs alongside Express on the same port using http.createServer().

📲 Twilio Integration

Twilio handles all out-of-app communications so users never miss critical project updates.

Notification	Trigger	Channel
New bid received	Freelancer submits a proposal	SMS
Bid accepted / rejected	Client responds to proposal	SMS
Milestone completed	Freelancer marks deliverable done	SMS
Deadline approaching	24 hours before a milestone due date	SMS + Voice Call
Payment released	Client approves milestone	SMS

Setting Up Twilio

Create a free account at https://www.twilio.com/
Get your Account SID, Auth Token, and a Twilio Phone Number from the console
Add these to your backend/.env (see Environment Configuration)

⚙️ Installation

Prerequisites

Node.js 18 or higher
MySQL 8.0 or higher
A Google Gemini API key (free tier)
A Twilio account (free trial)

Step 1 — Clone the Repository

git clone https://github.com/Lucky-939/Final_Project_Triangle.git
cd Final_Project_Triangle

Step 2 — Backend Setup

cd backend
npm install

Step 3 — Frontend Setup

cd ../client
npm install

Step 4 — Configure Environment Variables

Create .env files for both backend and frontend (see Environment Configuration below).

Step 5 — Import the Database

mysql -u your_mysql_user -p your_database_name < "Dump20251007 (2).sql"

Step 6 — Start Both Servers

In one terminal (backend):

cd backend
npm run dev

In another terminal (frontend):

cd client
npm run dev

Backend API: http://localhost:5000
Frontend Dashboard: http://localhost:5173

🔑 Environment Configuration

Backend — `backend/.env`

# ── Server ───────────────────────────────────────────
PORT=5000
NODE_ENV=development

# ── MySQL Database ────────────────────────────────────
DB_HOST=localhost
DB_PORT=3306
DB_USER=your_mysql_username
DB_PASSWORD=your_mysql_password
DB_NAME=project_triangle

# ── Authentication ────────────────────────────────────
JWT_SECRET=your_super_secret_jwt_key_here
JWT_EXPIRES_IN=7d

# ── Google Gemini AI ──────────────────────────────────
GEMINI_API_KEY=your_google_gemini_api_key_here

# ── Twilio (SMS & Voice) ──────────────────────────────
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_PHONE_NUMBER=+1XXXXXXXXXX

Frontend — `client/.env`

# ── Backend API URL ───────────────────────────────────
VITE_API_URL=http://localhost:5000/api

# ── Socket.io Server ──────────────────────────────────
VITE_SOCKET_URL=http://localhost:5000

⚠️ Add both .env files to .gitignore. Never commit credentials to GitHub.

💡 Generate a strong JWT secret with:
node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"

🗄️ Database Setup

A complete MySQL dump is included in the repository (Dump20251007 (2).sql). Import it to get the full schema with sample data:

# Create the database first
mysql -u root -p -e "CREATE DATABASE project_triangle;"

# Import the dump
mysql -u root -p project_triangle < "Dump20251007 (2).sql"

Core tables include: users, projects, bids, milestones, messages, notifications

🚀 Usage

Once both servers are running:

Register as a Client or Freelancer on the sign-up page
Clients — Post a new project; Gemini AI will auto-generate a scope breakdown, milestones, and budget estimate
Freelancers — Browse open projects and submit competitive proposals with custom bids
Clients — Review proposals and accept the best fit; the freelancer gets an SMS notification via Twilio
Both parties — Use the real-time chat to collaborate; the Triple Constraint dashboard tracks Scope, Time, and Cost live
Freelancers — Mark milestones complete; Gemini reviews the deliverables against the original scope
Clients — Approve completed milestones; payment release triggers an SMS confirmation

🌐 API Overview

Method	Endpoint	Description	Auth Required
`POST`	`/api/auth/register`	Register a new user	No
`POST`	`/api/auth/login`	Login and get JWT token	No
`GET`	`/api/projects`	List all open projects	Yes
`POST`	`/api/projects`	Create a new project	Yes (Client)
`GET`	`/api/projects/:id`	Get project details	Yes
`POST`	`/api/projects/:id/bids`	Submit a bid on a project	Yes (Freelancer)
`PUT`	`/api/bids/:id/accept`	Accept a freelancer's bid	Yes (Client)
`POST`	`/api/ai/scope`	Generate AI project scope	Yes
`POST`	`/api/ai/summary`	Generate AI project summary	Yes
`GET`	`/api/chat/:projectId`	Get chat history	Yes
`POST`	`/api/milestones/:id/complete`	Mark milestone complete	Yes (Freelancer)

🛣️ Roadmap

Planned features for upcoming releases:

Stripe integration — automated milestone-based payment releases
GitHub sync — pull repository commits directly into project milestones
AI-powered freelancer ranking — Gemini scores proposals based on relevance and past ratings
Voice commands — use Gemini for voice-activated project updates
Email notifications alongside Twilio SMS
Admin panel — platform-wide user and project management
Deployed production version (Render + PlanetScale)

🤝 Contributing

Contributions are welcome! Here's how to get involved:

# 1. Fork the repository on GitHub

# 2. Clone your fork
git clone https://github.com/YOUR-USERNAME/Final_Project_Triangle.git

# 3. Create a feature branch
git checkout -b feature/your-feature-name

# 4. Make your changes and commit
git add .
git commit -m "feat: describe your change here"

# 5. Push and open a Pull Request
git push origin feature/your-feature-name

Guidelines

Keep backend and frontend concerns separated in their respective folders
Comment Gemini prompt logic clearly — it helps collaborators tune AI output
Test API routes with Postman or Thunder Client before submitting a PR
For major changes, open an issue first to discuss the approach

🐛 Reporting Issues

Open an issue with:

A clear description and steps to reproduce
Expected vs. actual behaviour
Relevant error logs or screenshots

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

Made with ❤️ by Lucky-939 — Reimagining freelance project management with AI.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔺 Project Triangle — AI-Powered Freelancer Ecosystem

📌 Table of Contents

✨ Features

🗂️ Project Structure

🛠️ Tech Stack

🤖 Google Gemini AI Integration

What Gemini Does

API Flow

Getting Your Gemini API Key

💬 Real-Time Features — Socket.io

📲 Twilio Integration

Setting Up Twilio

⚙️ Installation

Prerequisites

Step 1 — Clone the Repository

Step 2 — Backend Setup

Step 3 — Frontend Setup

Step 4 — Configure Environment Variables

Step 5 — Import the Database

Step 6 — Start Both Servers

🔑 Environment Configuration

Backend — `backend/.env`

Frontend — `client/.env`

🗄️ Database Setup

🚀 Usage

🌐 API Overview

🛣️ Roadmap

🤝 Contributing

Guidelines

🐛 Reporting Issues

📄 License

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🔺 Project Triangle — AI-Powered Freelancer Ecosystem

📌 Table of Contents

✨ Features

🗂️ Project Structure

🛠️ Tech Stack

🤖 Google Gemini AI Integration

What Gemini Does

API Flow

Getting Your Gemini API Key

💬 Real-Time Features — Socket.io

📲 Twilio Integration

Setting Up Twilio

⚙️ Installation

Prerequisites

Step 1 — Clone the Repository

Step 2 — Backend Setup

Step 3 — Frontend Setup

Step 4 — Configure Environment Variables

Step 5 — Import the Database

Step 6 — Start Both Servers

🔑 Environment Configuration

Backend — backend/.env

Frontend — client/.env

🗄️ Database Setup

🚀 Usage

🌐 API Overview

🛣️ Roadmap

🤝 Contributing

Guidelines

🐛 Reporting Issues

📄 License

Backend — `backend/.env`

Frontend — `client/.env`