Ethwork

Problem Statement

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.

Solution

Framework & UINext.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 & DataLightweight 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 ModelsJob, 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 & FiltersText 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 UXWalletBadge and WalletButton components prepared for wagmi/viem or ConnectKit/RainbowKit.Network hinting (e.g., “Sepolia • Beta”) wired for later chain detection.Pages & FlowsLanding, 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 & DXSemantic 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 pathReplace 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.