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
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
- Users500+
- Performance<500ms
- Uptime99.9%
- RevenuePlatform fees: 2%
- DownloadsActive 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
Tech Stack
Awards & Recognition
Best Web3 Innovation
Web3 Builders Awards • 2024-11-20
Product of the Week
Product Hunt • 2024-10-08