For technical volunteers

Working on the website

A short guide for anyone who would like to help build and maintain this site. Have a look, try it out, and get in touch if you would like to take something on. Nothing here is a commitment.

What the site is

A small Next.js site that tells the story of the people we help and lets supporters give. It is deliberately simple: a handful of cause pages, an about page, and a donate page. It is deployed on Vercel and updates automatically when changes land.

Almost everything you would want to change lives in three data files. You should not need to touch the page components at all.

What you need

Node.js 20 or newer
Git
A code editor — VS Code is fine

That is the whole list. No database, no API keys, no accounts to set up before you can run it.

Getting it running

Four commands. It should be up on your machine in under two minutes.

git clone <repository URL>
cd 09-Website
npm install
npm run dev

Then open http://localhost:3100. Edit a file, save, and the page reloads on its own. Before you hand work over, check a production build with npm run build.

Where things live

File	What lives there
data/causes.ts	Every cause: the story, dates, status, amounts sent
data/org.ts	Org facts — address, board, impact numbers, donation links
data/photos.ts	Photographs and their alt text
public/img/	The image files themselves

Good first tasks

Add a new cause

Append one object to the causes array in data/causes.ts. That single edit creates a page at /causes/<slug>, a card on the home page, and an entry on the causes index. Nothing else needs changing.

Set status to current (open, needs money now), ongoing (a running commitment, funded for now), or completed. Exactly one cause should have featured: true — that is the one the home page leads with, normally whichever is current.

Replace a stock photograph with a real one

Drop your photograph into public/img/ using the same file name as the one you are replacing.
Update width and height for that entry in data/photos.ts to the real pixel dimensions.
Update the alt text so it describes the new photograph.

The blur value is a tiny placeholder shown while the image loads. It will look slightly off until regenerated — that is cosmetic and can wait.

Update the impact numbers

Edit impact in data/org.ts — the four figures in the strip under the hero. monthsOfCare counts from June 2024, so it needs bumping as time passes.

Things to know before you change anything

Never publish information about the people we help

We hold verification material for the cases we fund — the kind of records that prove a need is real. It exists for that purpose only. None of it is on this site and none of it should ever be.

If you want a photograph of someone we support, we ask their family directly and keep their reply on file. Please do not shortcut this.

Check before changing anything that takes money

Donation, payment and fundraising functionality is not something to add or switch on unilaterally. Build it, open a pull request, and let the board confirm before it goes live.

Never commit a secret

The Stripe payment links in data/org.ts are public URLs and are safe in the repository. A Stripe secret key is not, and the site does not need one — Stripe hosts the whole checkout. A committed secret key is a published secret key.

Keep the stock-photo disclosure

The footer says plainly that the stock images are illustrative and are not photographs of the people described. Please leave that in until real photographs replace them. A page about named individuals illustrated with pictures of strangers, with no note saying so, damages trust badly if a reader works it out on their own.

The site publishes no financial figures

By decision of the board, the public site shows no totals, balances or percentages. Impact is expressed as people supported, months of uninterrupted care, percentage volunteer-run, and countries reached.

The underlying amounts have not been deleted — totalSent and the full disbursements history are still in data/causes.ts for every cause. They are simply not rendered.

How to hand work over

Work on a branch, not on main.
Run npm run build and make sure it passes.
Open a pull request describing what changed and why, in plain language.
If your change is visible, add a screenshot. It makes review much faster for people who are not developers.

Small, focused changes are much easier to review than large ones. A pull request that changes one cause is better than one that changes eight.

Want to help?

Start with the information form, or just email us and say hello. The full technical README lives in the repository and goes deeper than this guide.