Help24 Website
The public website for Help24, Kenya's marketplace for local services, with payment held safely in M-Pesa escrow until the job is done.
Live site · Download for Android · App and platform repository
Status: pre-launch. Public launch is 19 October 2026 in Mombasa, Nairobi and Kisumu.
Contents
Overview
The site explains Help24, lets visitors try the product before launch, and distributes the Android app. It has 18 routes:
| Area | Routes |
|---|
| Home | / |
| Product | /how-it-works, /services, /for-customers, /for-providers, /become-a-provider, /safety |
| App | /download (version, checksum, QR code, install steps, release notes) |
| Support | /help, /support, /contact |
| Company and legal | /about, /privacy, /terms, /community-guidelines |
| Internal | /auth/action, /auth/continue (identity email handlers), /components (design-system parity route; not indexed) |
The homepage shows the product working rather than describing it:
- Story demo: an animated, eight-step walkthrough. A request types itself, becomes a card, receives offers, is paid into escrow and completes.
- Task composer: visitors describe a job inline, and it renders as the same
PostCard used on the live board.
- Escrow scrubber: a draggable timeline that moves the payment from agreed, to held, to released.
- Live board and coverage map: a feed of sample cards, and a Kenya map built from real boundary data.
Every demo is clearly labelled as sample data. Nothing a visitor types is sent anywhere.
Engineering principles
These run through the whole codebase.
- Server-first. Pages are React Server Components by default. Client JavaScript ships only where there is interaction.
- One source of truth. Colours, radii and the type scale live in a single token file. Release facts are generated from the APK itself, not typed by hand.
- Honest by construction. Demos are labelled. The waitlist says so when it isn't connected. Counts are never invented.
- Decisions are written down. Non-obvious choices are explained where they are made, in the file's own comments, including the bug each one fixed.
Tech stack
| Concern | Choice |
|---|
| Framework | Next.js 14 (App Router), React 18 |
| Language | TypeScript (strict) |
| Styling | Tailwind CSS 3, driven by generated CSS custom properties |
| Fonts | Poppins via next/font (self-hosted at build time) |
| Identity | Firebase Auth web SDK, used only on /auth/* |
| Social cards | next/og on the edge runtime |
| Tooling | ESLint (next/core-web-vitals), sharp, qrcode |
| Hosting | Vercel |
Getting started
Prerequisites
- Node.js 18.17 or later (the Next.js 14 minimum; verified with Node 22)
- npm
Run locally
git clone https://github.com/alphwan14/help24_website.git
cd help24_website
npm ci
npm run dev # http://localhost:3000
Checks
npm run lint # ESLint
npx tsc --noEmit # type-check
npm run build # production build
Development and production builds write to separate directories (.next-dev and .next). Switching between npm run dev and npm run build never leaves stale chunks behind. Both directories are git-ignored.
Scripts
| Command | What it does | When to run it |
|---|
npm run dev | Development server on port 3000 | Day to day |
npm run build / npm start | Production build and server | Before shipping |
npm run lint | ESLint | Before every commit |
npm run sync:release | Reads a GitHub Release and its APK and writes lib/generated/release-artifact.ts | Every new Android release |
npm run generate:logo | Renders every raster icon and favicon from the vectors in brand/ | When the mark changes |
npm run generate:og-icon | Inlines a downscaled app icon for the edge-rendered social card | When the app icon changes |
npm run generate:qr | Renders the /download QR code to a static SVG | When the QR target changes |
Environment variables
The site needs no environment variables to run. The only ones it reads belong to the waitlist:
| Variable | Required | Purpose |
|---|
WAITLIST_WEBHOOK_URL | For the waitlist | POST target that receives { email, source, receivedAt } as JSON |
WAITLIST_WEBHOOK_TOKEN | Optional | Sent as Authorization: Bearer … to the webhook |
WAITLIST_COUNT_URL | Optional | GET target returning { count: number } |
If WAITLIST_WEBHOOK_URL is not set, POST /api/waitlist returns 503 and the form asks visitors to email support. This is deliberate: a form that appears to succeed while discarding the address is worse than one that admits it isn't connected. Without WAITLIST_COUNT_URL, no signup count is shown.
For local work, put them in .env.local, which is git-ignored. In production, set them in Vercel project settings.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
