← All projects

Shimeles Abera Foundation

Client
Shimeles Abera Foundation
Industry
Nonprofit & social programmes
Year
2025

A nonprofit operations system where the public website is one view of the data and the dashboard is where the data lives, built so that nothing a programme manager might want to change next year requires a developer.

Visit the site
Shimeles Abera Foundation staff dashboard overview

62

Tables behind one editable system

0

Hardcoded strings a manager might want to change

2

Server-side rules that cannot be bypassed

What it covers

  • Dynamic form engine
  • Beneficiary casework & disbursement
  • Donations & recurring pledges
  • Volunteer safeguarding workflow
  • Pillar-scoped access control
  • Fully editable public site

The governing rule

One rule shaped every decision in this build:

Nothing a non-technical Foundation staff member might reasonably want to change is hardcoded.

Not the programme pillars and their colours. Not the page copy. Not the navigation, the footer, the phone numbers, the bank details or the social links. Not the workflow status labels or the order they appear in. Not the questions on a form, or their validation rules. Not the regions, the volunteer skills, the professions, the time slots, or the answers in the help panel. Not even the interface strings, which live in a translations table.

The test applied to every screen: if the programme manager wants to change this next year with no developer involved, can they?

What the Foundation actually does

It walks with families in Addis Ababa through medical crisis, old age, mental strain and the long work of getting a child through school. That means intake, assessment, casework and disbursement, and a public face that has to ask strangers for money and for time.

The system

A dynamic form engine. Applications for assistance are not hand-written pages. A form is a row in form_definitions with its questions in form_fields, and one renderer draws it, validates it and files the submission. Adding a new intake form is configuration.

Beneficiary casework. Households, beneficiaries, assessed needs by category, case notes, documents and disbursements, with payment methods and accounts behind them.

Donations. Campaigns, donors, one-off gifts, recurring pledges, in-kind donations with itemised contents and photographs, and a reconciliation log against the external giving platforms.

Volunteering, with a safeguarding gate. This one is deliberately not form-builder driven. Volunteering ends in someone being placed with vulnerable people, so the questions the gate depends on are code rather than editable rows: a coordinator deleting the references section would be disabling a control, not editing copy. A volunteer cannot reach an approved stage while the safeguarding checklist is incomplete, and that check lives in the single transition function every path goes through, precisely so a direct POST cannot skip it.

Pillar-scoped access. A caseworker assigned to one programme pillar must not reach another pillar's case notes or documents: not through the interface, not by changing a URL, not by posting directly. The scope is folded into the query rather than hidden in the UI.

The rest. Blog, media library, testimonials, contact routing by subject and office, newsletter, an audit log over everything, and a cached impact-metrics layer for the public figures.

Why it matters

Most nonprofit websites are built once and then slowly become wrong, because every change costs a developer the organisation cannot afford. This one was built so the Foundation owns its own content, its own forms and its own workflow, and the developer is only needed when the shape of the work changes, not its wording.

How it was built

Svelte
TypeScript
SQLite
Drizzle
Framework

SvelteKit

Server load functions, form actions and endpoints; SSR by default.

Svelte 5

Runes for reactivity ($state, $derived, $effect).

Language

TypeScript

Strict mode across app and server code.

Data

SQLite / libSQL

Primary datastore, embedded and file-backed.

Drizzle ORM

Typed schema and queries, with migrations generated from the schema.

Drizzle Kit

Committed SQL migrations rather than push-to-prod diffing.

Auth

Better Auth

Session-based auth with server-side verification.

Forms

Superforms

Progressive-enhancement forms with server-side validation.

Zod

One schema validating both client and server.

UI

Tipex

Rich-text editor for CMS content.

Lucide

Icon set.

TanStack Table

Sorting, filtering and pagination for admin tables.

Bits UI

Headless primitives behind the component library.

Chart.js

Reporting charts.

Embla

Carousels.

Dark mode

System-aware theme switching.

Tailwind CSS

Utility-first styling with a project design token layer.

Testing

Vitest

Unit tests over business logic.

Infrastructure

Client image compression

Uploads compressed in the browser before hitting the server.

Nodemailer

Transactional email over SMTP.

Inside the system

Shimeles Abera Foundation staff dashboard overview
The overview opens with what needs a human today rather than vanity metrics: unopened volunteers, blocked checklists, transfers waiting on a donor match.
Impact dashboard with multi-currency giving charts
Impact is computed from the case and donation records, not typed in, and money is reported per currency because ETB, USD and EUR do not sum.
Donations and bank reconciliation screen
A pledge on the website is a promise, not money. It only counts toward the public total once it is matched against a bank statement here.
Foundation home page with its mission statement and programme imagery
Every word, image and colour on this page is a database row the Foundation edits itself.
The assistance application form
Drawn by the dynamic form engine: the questions and their validation rules are configuration, not code.
The volunteer application with skills and availability
The one form deliberately written in code, because a safeguarding gate depends on its questions.
The donation page with campaigns and giving options
Campaigns, one-off gifts, recurring pledges and in-kind donations, reconciled against external platforms.
The about page describing the Foundation’s programme pillars
Programme pillars (names, descriptions, icons and colours) are rows, so a new programme is not a deploy.
The Foundation’s blog index
Stories and updates, written from the dashboard in both languages.
The contact page with offices and subjects
Messages route by subject to the right office, and the subjects and offices are both editable.
Back to all projects