MicroMatch Svelte Themes

Micromatch

A micro-volunteering marketplace pairing NGOs with volunteers for bite-sized, skill-building tasks. SvelteKit + Appwrite.

MicroMatch — Make a big impact in a few minutes.


A micro-volunteering marketplace pairing NGOs with volunteers for bite-sized, skill-building tasks. Volunteers browse a feed of 5-30 minute missions, claim what fits their skills, and earn badges for approved work. NGOs post tasks, review submissions, and build a verified presence on the platform.

✨ Features

  • Bite-sized task feed — filter by ≤15 / ≤20 / ≤30 min, hashtag, or sort by shortest first.
  • Volunteer side — claim tasks, submit proof (link or upload), track status, earn badges, level up.
  • NGO side — post tasks with deadline + max-volunteers caps, review submissions, manage org-owned badge definitions.
  • NGO verification — soft-gate trust system. NGOs submit a tax/charity ID, admins review with ProPublica lookup enrichment, approval back-fills the Verified chip on every existing task.
  • Custom badge definitions — NGOs define their own awards (label, color, icon, criteria); the engine auto-awards on claim approval.
  • Role mobility — users can flip between Volunteer and NGO; downgrading from NGO triggers a clean transactional teardown of verification + tasks.
  • Auto-translate — task title + description translate to the viewer's language via Microsoft Azure Translator.
  • Email notifications — verification approve/reject sends Mailgun-backed transactional emails to the NGO.

🎬 In motion

These are real Playwright recordings of the app — captured by the test suite at e2e/demo/, post-processed to GIF for embedding here.

Landing page tour — hero → How it works → Featured tasks → Track your impact

Signup flow — role picker → fill the form (no real account is created)

Feed UX — search, time filters, hashtag chips, and the empty-state mascot

Run bun run demo to regenerate (record fresh MP4s + convert to GIFs). See e2e/demo/ for the demo specs and playwright.demo.config.ts for the recording configuration.

🔄 How it works

The core loop, end-to-end:

sequenceDiagram
  autonumber
  actor V as Volunteer
  actor N as NGO
  participant App as MicroMatch
  participant DB as Appwrite
  participant Mail as Mailgun

  N->>App: Post task
  App->>DB: tasks.create (isVerified ← NGO's verification status)

  V->>App: Browse feed, claim task
  App->>DB: claims.create (status=pending)

  V->>App: Submit proof (URL or file)
  App->>DB: claims.update (proofUrl, notes)

  N->>App: Approve claim
  App->>DB: claims.update (status=approved)
  App->>DB: badges.create (matching BadgeDefinitions for org)
  App-->>V: Dashboard updates, badge appears in vault

  Note over N,Mail: Verification flow (parallel)
  N->>App: Submit verification (tax ID + doc)
  App->>DB: ngoVerifications.create (status=pending)
  Note over App: Admin reviews queue with ProPublica enrichment
  App->>DB: status=approved, back-fill tasks.isVerified
  App->>Mail: Send "you're verified" email
  Mail-->>N: 📧

🚀 Tech stack

Framework SvelteKit on Vercel (adapter-vercel, nodejs22.x runtime)
Runtime + package manager Bun
Backend Appwrite Cloud — Database (TablesDB), Auth, Storage, Teams
Email Mailgun (HTTP API, no SDK dep)
NGO verification ProPublica Nonprofit Explorer API for US 501(c)(3) lookups
i18n Azure Translator
UI Plus Jakarta Sans + Inter, custom CSS (warm cream palette + coral accents), Iconify, Lottie
Testing Vitest (unit + API + components) and Playwright (e2e)

🏁 Getting started

Quick path:

git clone https://github.com/Builder106/MicroMatch.git
cd MicroMatch
bun install
cp .env.example .env
# Fill in Appwrite + Mailgun + ProPublica keys
bun run dev

The app runs at http://localhost:5173. Full setup (Appwrite resources, environment variables, project layout, conventions) lives in CONTRIBUTING.md.

Common scripts

bun run dev             # dev server with HMR
bun run build           # production build (uses adapter-vercel)
bun run check           # svelte-check + tsc
bun run test            # vitest (123 tests across server / API / components)
bun run test:e2e        # Playwright (run `bunx playwright install chromium` once)
bun run render-media    # regenerate the README banners + social preview from /static/*.html

🧪 Testing

Three layers of coverage:

  • Server modules (vitest, node) — pure-ish helpers and DB CRUD: tagColors, propublica, email, verifications, badgeDefs, badgeCriteria, badgeAwarder. Mock fetch + Appwrite at the module boundary.
  • API endpoints (vitest, node) — /api/verifications, /api/verifications/[userId]/approve, /api/verifications/[userId]/reject, /api/profile/role, /api/badges/manage. Auth gates, validation, multi-step side effects.
  • Components (vitest, jsdom) — BadgeChip, EmptyState, ProgressBar, VerificationCard (all four state branches via mocked fetch).
  • End-to-end (Playwright, chromium) — public-facing flows: landing, feed, login/signup multi-step, forgot-password, protected route redirect.

bun run test:coverage writes an HTML report to coverage/.

📦 Data model

Stored in Appwrite TablesDB:

Table Holds
tasks Mission cards posted by NGOs (title, tags, time estimate, deadline, status, isVerified)
claims Volunteer submissions for tasks (proofUrl, notes, status: pending / approved / rejected)
badges Awarded badge instances (userId, taskId, label, color)
badgeDefinitions Org-owned badge templates (orgId, label, criteria, taskId for task-specific)
ngoVerifications Verification queue (orgName, country, taxId, docFileId, status, reason)

Plus three Appwrite Teams (volunteers, ngos, admins) for role + moderation gating. Storage is one bucket with file-level permissions for both avatars and verification docs.

📝 Documentation

📜 License

MIT — see LICENSE.

Top categories

Loading Svelte Themes