Ayush Mishra

W3Gig

A decentralized freelance marketplace that bridges the traditional gig economy with Web3 capabilities. Enables clients and freelancers to connect, collaborate, and transact through blockchain-based smart contracts with secure escrow payments. Built with Next.js 15, React 19, Solidity smart contracts, and automatic wallet generation.

Technical Architecture

A decentralized freelance marketplace that bridges the traditional gig economy with Web3 capabilities. Enables clients and freelancers to connect, collaborate, and transact through blockchain-based smart contracts with secure escrow payments. Built with Next.js 15, React 19, Solidity smart contracts, and automatic wallet generation.

System Architecture

Loading...
Initializing...

Smart contract security: ReentrancyGuard prevents reentrancy attacks on deposit() and approveMilestone(), Ownable pattern for access control with only client allowed to deposit and only arbitrator for disputes

Checks-effects-interactions pattern critical in Solidity: validate inputs first (checks), update state variables (effects), then perform external calls (interactions) - prevents state inconsistencies

Supabase Auth integration: auth.users.id as primary key in users table, post-signup hooks to sync, middleware for session management, JWT token handling with @supabase/ssr

Separation of concerns: AuthService for Supabase auth operations only, UserService for database CRUD, GigService for gig management - clear boundaries prevent coupling

React Server Components architecture: 90/10 split with most components RSC, only forms/modals/real-time features as client components - data fetching in server components reduces client JS bundle

Wallet security critical: AES-256 encryption with CryptoJS before storage, environment variable for encryption key, never log or expose private keys, optional export for external wallets

Database performance: Strategic indexing on foreign keys (client_id, freelancer_id, gig_id, contract_id) and frequently filtered columns (email, wallet_address, status, created_at, reputation_score, budget_range)

Type safety across layers: Drizzle generates TypeScript types from schema automatically, Zod validation at action layer prevents invalid data, shared type definitions ensure consistency

Smart contract gas optimization: using uint8 for status enums (ACTIVE=0, COMPLETED=1, DISPUTED=2, CANCELLED=3), packed structs where possible, minimal state updates, efficient payment transfers with .call.value()

Service + Actions pattern: Services handle pure business logic with direct Drizzle ORM, Actions handle validation/auth/orchestration, consistent {success, data?, error?} response format

Ethereum wallet generation: ethers.Wallet.createRandom() generates wallet with private key, encrypt before storage with CryptoJS.AES.encrypt(), decrypt on-demand for transactions

Milestone-based payments: uint256[] public milestones stores amounts, uint256 public currentMilestone tracks progress, sequential approval required, automatic completion detection when currentMilestone == milestones.length

Dispute resolution mechanism: Either party can call raiseDispute() when contract_status == ACTIVE, arbitrator can resolveDispute() by setting winner (client or freelancer), emergencyCancel() can cancel and refund

Row Level Security essential: Users can only SELECT/UPDATE their own row (user_id = auth.uid()), contract participants can only see their contracts (client_id OR freelancer_id = auth.uid())

Real-time messaging with Supabase Realtime subscriptions

Advanced search with Algolia or Elasticsearch

Mobile app (React Native) for on-the-go management

Email notifications for important events

Payment confirmation via blockchain listeners

NFT-based service certificates for completed projects

Multi-chain support (Polygon, Arbitrum) for lower gas costs

DAO governance for platform decisions

Analytics dashboard for users

Video calling integration

AI-powered gig matching

Cryptocurrency payment options beyond ETH

Reputation token system

Key Metrics & Features

Key Metrics

  • Users
    500+
  • Performance
    <500ms
  • Uptime
    99.9%
  • Revenue
    Platform fees: 2%
  • Downloads
    Active users

Core Features

  • Gmail OAuth integration using Supabase Auth - one-click authentication without password management
  • Automatic Ethereum wallet generation using ETH SDK (ethers.js v6) with wallet.address and private key generation on signup
  • AES-256 encryption for private keys before storage in database - CryptoJS for encryption with environment variable key
  • Real-time wallet balance updates via RPC polling - Infura/Alchemy endpoint with 30s interval polling
  • Comprehensive user profiles with bio, skills array, hourly rate, portfolio projects, social links (LinkedIn, GitHub, Dribbble, Behance), education, work experience, testimonials, awards, languages spoken
  • Gig creation with title, description, category/subcategory, budget type (fixed/hourly), min/max amounts, timeline, experience level (entry/intermediate/expert), required skills array, JSONB attachments
  • Advanced search with filters: category, subcategory, budget range, experience level, skills, timeline, posted date with sorting (newest, budget, popularity)
  • Application submission with cover letter, proposed budget/timeline, portfolio samples (JSONB), relevant experience
  • Smart contract Escrow.sol deployment - individual contracts per agreement with uint256[] milestones, currentMilestone tracking
  • Multi-signature functionality with client + freelancer addresses plus arbitrator for disputes
  • ReentrancyGuard pattern using OpenZeppelin for preventing reentrancy attacks on deposit() and approveMilestone() functions
  • Ownable pattern for access control - only client can deposit, only arbitrator can resolve disputes
  • Checks-effects-interactions pattern in all state-changing functions
  • Refund mechanism: freelancer can request refund after 7 days of inactivity via requestRefund()
  • Milestone approval flow: sequential milestone completion with automatic fund release on approveMilestone()
  • Dispute resolution: either party raises dispute, arbitrator resolves with emergency cancellation capability
  • Review system: 5-star ratings with written comments, verified reviews only from completed contracts
  • Messaging system with contract-specific conversations, file attachments, read receipts (with is_read boolean)
  • User reputation scoring with total jobs completed, total earned/spent, overall rating, response rate, on-time delivery %
  • Row Level Security policies on all tables: users can only edit their own data, contract participants can only access their contracts
  • Service + Actions pattern: AuthService handles Supabase auth, UserService for user CRUD, GigService for gigs, ApplicationService for apps, ContractService for contracts
  • All server actions return {success, data?, error?} consistent format
  • 90% React Server Components - only forms, modals, real-time features as client components
  • Data flow: Database (snake_case) → Drizzle Schema (camelCase) → Services (Direct Drizzle) → Server Actions → Hooks → Components
  • TypeScript end-to-end: Drizzle generates types from schema, Zod validation at actions layer, shared type definitions
  • Gas optimization: using uint8 for status enums, packed structs, minimal state updates, efficient payment transfers

Project Information

Project Info

Launched: 2024-10-01
Status: Live
Duration: 15 weeks
Team: Solo developer
892 upvotes
Web3
DeFi
Freelance Marketplace
Blockchain
Smart Contracts
Escrow
Ethereum

Tech Stack

Next.js 15
React 19
TypeScript
Tailwind CSS
Supabase
PostgreSQL
Drizzle ORM
ethers.js v6
Solidity 0.8.19
Hardhat
OpenZeppelin
Google OAuth
Framer Motion
Zod
React Hook Form
TanStack Query

Awards & Recognition

Best Web3 Innovation

Web3 Builders Awards2024-11-20

Product of the Week

Product Hunt2024-10-08