Ethwork

Demo

About

EthWork is a modern Web3 job platform that focuses on task-based work and milestone escrow so developers get paid fairly and on time. The MVP ships a polished, responsive frontend where employers can post roles, candidates can search/filter jobs by skills and salary, and both sides see transparent milestone statuses. Payments are modeled around PYUSD (stablecoin) and escrowed milestones (concept in MVP), with a wallet-ready UI and a clear path to on-chain settlement. This version stores data in the browser via localStorage for a zero-backend demo: post a job, it appears instantly in listings; save jobs, apply, and view a lightweight dashboard—everything persists across refreshes. The UI prioritizes clarity, accessibility, and speed with a clean, professional visual system.

How it's made

Framework & UI Next.js (App Router) + React 18 for routing and server/client components. Tailwind CSS + shadcn/ui for a consistent, accessible component system. Motion-ready with Framer Motion patterns (fade-up, hover-lift), kept optional. State & Data Lightweight state via React hooks (useState, useMemo, useEffect). localStorage as the persistence layer (lib/storage.ts) with typed helpers and simple versioning. Seed data on first run; keys like ethwork_jobs, ethwork_companies, ethwork_applications. Domain Models Job, Company, Milestone, Application, Contract, Payout TypeScript interfaces in lib/types.ts. Post-a-Job form writes to localStorage; Jobs page reads + filters in real time. Search & Filters Text search across role/company/description. Skill-tag multi-select (chip input). Robust salary parser supporting $120,000–$150,000, 120k–150k, 100k+, Up to 90k, etc.; handles single-bound values by setting min=max; uses range-overlap logic so realistic matches aren’t excluded. Wallet-ready UX WalletBadge and WalletButton components prepared for wagmi/viem or ConnectKit/RainbowKit. Network hinting (e.g., “Sepolia • Beta”) wired for later chain detection. Pages & Flows Landing, How-It-Works, Jobs (list/detail), Companies (list/detail), Post Job, Developer Dashboard, Support. Clear CTA flow: browse → filter → view details → save/apply (local). Accessibility & DX Semantic HTML, focus rings, color contrast ≥4.5:1, keyboard-friendly. TypeScript strict mode for safer refactors. Notable/Hacky bits (worth mentioning) Salary parsing is resilient to messy input and international punctuation. LocalStorage as a mini-DB with key namespacing + simple schema versioning for forward compatibility. Optimistic UI: instant updates to lists after posting/applying to simulate on-chain TX success; easy to swap for real APIs or contract calls. Feature flags (featureFlags.ts) to toggle charity/disputes/beta banners without code churn. Upgrade path Replace storage with Supabase/REST/GraphQL or on-chain indexer. Wire PYUSD approvals + milestone releases via wagmi/viem on Sepolia first, then mainnet. Add verification, messaging, disputes, and on-chain reputation badges.