wisdomska/farmclient

FarmClient — an escrow farm marketplace for Ghana. React + Tailwind implementation of the FarmClient.dc.html Claude Design. # FarmClient **Live:** farmclient.vercel.app — auto-deployed from `main` via Vercel. A fairer market for every farmer — a marketplace prototype connecting Ghana's farmers with trusted buyers. Farmers list crops from any phone (smartphone app **or** a `*789#` USSD flow), buyers order and pay into escrow, and farmers are paid the same day. This repo is a faithful React + Tailwind implementation of the FarmClient design. Implemented from the Claude Design component `FarmClient.dc.html`. ## Screens A sticky prototype toolbar (top of the page) switches between every screen: | Screen | What it shows | | --- | --- | | **Landing** | Marketing page — hero, how-it-works, trust band, footer | | **Auth** | Sign in / sign up with Google or email | | **Dashboard** | Buyer home — live price ticker, quick stats, recommended listings, active orders | | **Marketplace** | Browse listings with crop / price / delivery / verified filters and grid · list · map views | | **Listing detail** | Produce details, fair-price guide chart, farmer trust score, order panel | | **Checkout** | Mobile-money payment + escrow, with a MoMo-approval modal | | **Orders** | On-the-way and past orders | | **Tracking** | Order status stepper + delivery-confirmation rating | | **Farmer app** | A phone mockup: wallet, trust score, add-crop, listings, prices | | **USSD** | A feature-phone `*789#` flow for farmers without smartphones | | **Admin** | Platform overview, SMS broadcast, users, listings, orders, payments, settings | Dark and light themes are supported and toggle live (persisted to `localStorage`). ## Tech stack - React 19 + TypeScript - Vite build tooling - Tailwind CSS v4 — the design tokens from the source are mapped to semantic utilities (`bg-surface`, `text-ink`, `bg-primary`, …) that re-resolve on theme switch via CSS variables. ## Project layout ``` src/ store.tsx # global state (theme, screen, filters, …) via React context lib/ types.ts # shared types data …