Matchids

A Digital World Where Children Learn, Imagine, Create and Give

The public Matchids website — frontend only. Homepage, book library, Kids Art, Give Back, checkout, account, and legal pages. Every piece of data comes from matchids-backend over HTTP; this repo holds no database connection, no payment provider code, and no business logic.

Founded by Suzie Matchilda George.

What's here

src/
  app/            Next.js App Router pages — one folder per route
  components/
    layout/         Navbar, Footer
    home/            Hero, Section
    books/           BookCard
  lib/
    api.ts           The only place this repo talks to the network — a thin
                       client for matchids-backend
  data/             DEMO-only fallback content (clearly marked isDemoContent),
                      used for local development without a running backend
  styles/           Global CSS + design tokens (see matchids-design-system
                      for the canonical, shared version)

Where this fits in the Matchids ecosystem

matchids-web (this repo)
    │  HTTP requests only — no direct DB, no payment SDKs
    ▼
matchids-backend  ──>  matchids-database
    │
    ├── @matchids/payments
    └── @matchids/celoht

Admin tooling lives in a separate matchids-admin app, not in this repo.

Local setup

npm install
cp .env.example .env    # NEXT_PUBLIC_API_URL should point at a running matchids-backend
npm run dev              # http://localhost:3000

Without a running matchids-backend, pages that call the API (checkout, donations) will show an error rather than silently succeed — this repo never fakes a successful payment or order on its own.

Testing, linting, building

npm test
npm run lint
npm run typecheck
npm run build

Design

Colors, type and spacing here match matchids-design-system — a warm, rounded palette (coral, gold, teal, violet on cream) with Baloo 2 for display type and Plus Jakarta Sans for body text, chosen to feel playful without tipping into "childish," and professional without feeling cold. The brand mark — two figures forming an M around a book and a heart — is in public/logo.png.

Accessibility & SEO

• Skip-to-content link, visible focus states, semantic HTML throughout.
• sitemap.ts / robots.ts generate /sitemap.xml and /robots.txt.
• Metadata (title templates, Open Graph) set per-page in app/**/page.tsx.

Principles

• No invented statistics, testimonials, partners, or donation numbers — see the Give Back and homepage copy for how unfinished features are described honestly instead.
• No secrets in this repo, ever — see .env.example.