GigFlow

GigFlow

GigFlow is a mini freelance marketplace platform where users can post jobs (Gigs), apply for jobs (Bids), and hire exactly one freelancer per gig.

This project was built as part of a Full Stack Development Internship assignment.

---

Project Overview

GigFlow allows any user to act as both a Client and a Freelancer.

• Clients can post gigs
• Freelancers can submit bids with a proposal and price
• Gig owners can hire only one freelancer
• The system prevents multiple hires even if requests happen at the same time
• Freelancers receive real-time notifications when they are hired

---

Live URLs

Frontend (Vercel)
https://gig-flow-ui.vercel.app/

Backend (VPS, Docker, Nginx, Cloudflare, SSL)
https://gigflow.straynodes.xyz/

---

Tech Stack

Frontend

• React 19
• TypeScript
• Vite
• Tailwind CSS
• React Router v6
• Axios (HttpOnly cookies)
• Context API and Redux Toolkit
• Socket.io Client

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)
• JWT Authentication (HttpOnly Cookies)
• MongoDB Transactions
• Socket.io
• Docker

---

Architecture Overview

Backend Architecture

The backend follows a clean separation of concerns.

• server.js
  Entry point of the application. It starts the server, connects to the database, initializes Socket.io, and listens for incoming requests.

• app.js
  Configures the Express application. It sets up middleware, routes, logging, and centralized error handling.

Backend request flow:

Route → Middleware → Controller → Service → Database

• Routes define API endpoints
• Middleware handles authentication and validation
• Controllers stay thin and delegate logic
• Services contain business logic (especially hiring)
• Models define database schemas

---

Frontend Architecture

The frontend is structured to keep UI logic and data logic separated.

• api
  Centralized API communication (authentication, gigs, bids)

• pages
  Route-level pages such as Login, Gigs, Dashboard, and Gig Details

• components
  Reusable UI components

• context
  AuthContext and SocketContext

• features
  Redux slices for global state management

• utils
  Logger and helper utilities

---

Authentication and Security

• Authentication is implemented using JWT stored in HttpOnly cookies
• Tokens are never accessible from JavaScript
• This mitigates common XSS attacks
• The frontend never stores tokens in localStorage
• On application load, /api/auth/me is called to restore the session
• Protected routes redirect unauthenticated users to the login page

---

API Communication

• A single Axios instance is used throughout the application
• All requests are sent with withCredentials: true
• API logic is separated from UI components
• Frontend respects backend access rules for private and owner-only routes

---

Core Features

Authentication

• User registration and login
• Secure session handling using HttpOnly cookies
• Logout clears the authentication cookie

Gig Marketplace

• Browse all open gigs
• Search gigs by title
• View gig details
• Create, update, and delete gigs (owner only)

Bidding System

• Freelancers can submit bids on gigs
• Gig owners can view all bids for their gigs
• Bid status: Pending, Hired, Rejected

---

Hiring Logic (Critical Feature)

The hiring logic is implemented using MongoDB Transactions to ensure data consistency.

Hiring flow:

1. Gig owner clicks the Hire button
2. A database transaction starts
3. The system verifies the gig is still Open
4. The selected bid is marked as Hired
5. The gig status is updated to Assigned
6. All other bids are marked as Rejected
7. The transaction commits successfully

Race Condition Protection

• If two hire requests occur at the same time:
  • The first request completes successfully
  • The second request detects that the gig is already assigned and fails
• This guarantees that only one freelancer can ever be hired for a gig

---

Real-Time Notifications

• Socket.io is used for real-time communication
• Users join their personal socket room after login
• When a freelancer is hired:
  • The backend emits a notification event
  • The frontend displays an instant notification
  • No page refresh is required

---

Error Handling and Logging

Error Handling

• Centralized global error handler
• No try/catch blocks scattered across controllers
• Clean JSON error responses for users
• Internal error details are hidden in production

Logging

• Custom logger utility
• Environment-based logging
• Development mode shows detailed logs
• Production mode logs only important warnings and errors

---

Deployment

• Frontend hosted on Vercel
• Backend deployed on a VPS using Docker
• Nginx used as a reverse proxy
• Cloudflare (Orange Cloud enabled)
• SSL enabled for secure HTTPS communication

---

Demo and Submission

• GitHub Repository: https://github.com/NOTBOOSTER/GigFlow
• Live Frontend: https://gig-flow-ui.vercel.app/
• Live Backend: https://gigflow.straynodes.xyz/
• Loom Video (Hiring Flow):

---

Final Notes

This project focuses on correctness, security, and clean architecture rather than UI complexity.

Special attention was given to safe hiring logic, secure authentication, and real-time user experience.