Building a Free Autism Resource Platform with Next.js 16 & Firebase

#firebase #webdev #nextjs

Last year I started building maskedbutaware.nl (https://www.maskedbutaware.nl/) — a completely free platform about autism masking. No ads, no paywalls. Just information that should be accessible to everyone.

The Stack

Next.js 16 with App Router, React 19, Firebase (Auth + Firestore), Tailwind CSS 4, TypeScript, self-hosted IBM Plex fonts. Deployed on Vercel.

Bilingual Without i18n Libraries

The site serves Dutch and English. Instead of translation keys and middleware, each language gets its own component tree:

/app/learn/wat-is-masking/page.tsx        ← Dutch
/app/en/learn/what-is-masking/page.tsx    ← English

Full control per language, zero runtime overhead. A locale mapping file handles hreflang alternates for SEO.

Firebase: Debounce Your Writes

Interactive tools (burnout checklist, trigger mapping, body scan) sync via Firestore with onSnapshot. Firestore bills per write — a 1200ms debounce cut writes by ~80%.

const debouncedSave = useMemo(
  () => debounce((data: ToolState) => {
    if (user?.uid) {
      setDoc(doc(db, 'tools', user.uid), data, { merge: true });
    }
  }, 1200),
  [user?.uid]
);

Accessibility as Default

Self-hosted fonts (no Google CDN dependency), no infinite scroll, consistent layout that never moves, prefers-reduced-motion respected, high contrast by default. Lighthouse: 100 / 96 / 100 / 100.

Lessons Learned

Start with the sitemap. I had pages live for weeks that search engines couldn't find because they weren't in the sitemap.

Plan URLs first. Renaming routes after indexing means redirect headaches.

Use a CMS for content. React components work but make non-technical contributions impossible. Next time: MDX or headless CMS.

255 pages, two languages, all free. If you're building a resource site for an underserved community — it's worth the effort.

maskedbutaware.nl (https://www.maskedbutaware.nl/) — Free resources about autism masking.

DEV Community

Building a Free Autism Resource Platform with Next.js 16 & Firebase

Top comments (0)