Building Digital Amannah: A Case Study in Values-Based Digital Wellness Tech

Building Digital Amannah: A Case Study in Values-Based Digital Wellness Tech

Creating a digital wellness platform inherently demands a strict adherence to privacy and security. Users seeking digital safety tools do not want to be tracked, logged, or monetized. Digital Amannah was conceived with exactly these principles in mind—a values-based platform dedicated to zero-tracking and absolute user privacy.

In this case study, we dive deep into the architectural decisions and technical stack utilized to build Digital Amannah, focusing on Next.js, Tailwind CSS, Supabase, and our lightweight browser extension, Wiqayah.

The Core Philosophy: Privacy by Design

From day one, the architecture was constrained by one overriding rule: no user activity tracking. This meant avoiding standard analytics pixels, minimizing server-side logging of IP addresses, and building localized execution paths for any content moderation tools. We adopted a “shift-left” security mentality—securing the platform at the deployment layer and database level rather than retrofitting it later.

Architectural Foundation: Next.js App Router

To deliver a highly performant and SEO-friendly platform, we chose the Next.js App Router. Next.js provided several key benefits for this project:

1. Static Site Generation (SSG) & Server Components: By utilizing React Server Components, the bulk of our educational content and platform pages are rendered on the server at build time. This ensures fast delivery via CDNs without client-side JavaScript overhead.
2. Security: Server Components allow us to keep database credentials and backend logic completely hidden from the browser. Client components are used sparingly, only where interactivity (like forms) is strictly necessary.
3. Type Safety: The entire platform is built with strict TypeScript, preventing runtime errors and ensuring predictable data structures when interfacing with our markdown content and backend services.

Visual Polish with Tailwind CSS

Digital wellness requires a calming, accessible, and responsive user interface. We utilized Tailwind CSS to build a bespoke design system.

• Utility-First Efficiency: Tailwind allowed us to rapidly iterate on UI components without maintaining bloated external stylesheets.
• Accessibility (a11y): By utilizing Tailwind’s screen reader utilities and focus states, we ensured that the platform remains accessible to all users, adhering to WCAG guidelines.

Content Management: Markdown & Automated Delivery

To keep the platform lightweight and easy to maintain, all educational content and blog posts are authored in Markdown.

We process these files using gray-matter to parse YAML frontmatter and standard markdown rendering libraries to generate HTML.

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { remark } from 'remark'
import html from 'remark-html'

export async function getPostData(slug: string) {
  const fullPath = path.join(postsDirectory, `${slug}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')

  const matterResult = matter(fileContents)

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html, { sanitize: true }) // Crucial for XSS protection
    .process(matterResult.content)
    
  const contentHtml = processedContent.toString()

  return {
    slug,
    contentHtml,
    ...(matterResult.data as { title: string; date: string }),
  }
}

Security Note: Rendering markdown to HTML can introduce Cross-Site Scripting (XSS) vulnerabilities if not handled correctly. We explicitly configured our remark plugins to sanitize the output, stripping out any injected scripts or malicious HTML before it reaches the client.

Data Layer: Supabase & Row Level Security

For user authentication and minimal state management (such as user preferences), we utilized Supabase, an open-source Firebase alternative backed by PostgreSQL.

Supabase was chosen heavily for its robust implementation of Row Level Security (RLS). RLS allows us to define security policies directly inside the database.

-- Example RLS Policy for user settings
CREATE POLICY "Users can only view their own settings"
ON user_settings
FOR SELECT
USING (auth.uid() = user_id);

Even if a vulnerability were to exist in the application layer, the database itself refuses to serve data that doesn’t belong to the authenticated session. This deeply aligns with our defense-in-depth and privacy-first strategy.

The Wiqayah Extension: Localized URL Scanning

A key feature of Digital Amannah is the Wiqayah browser extension, designed to provide safety guardrails. The technical challenge was providing content filtering without sending a user’s browsing history to a central server.

We architected Wiqayah to rely entirely on local execution:

• Offline Rule Sets: The extension periodically downloads a heavily compressed, cryptographic hash-list of blocked domains and URL patterns.
• Local Evaluation: When a user navigates to a URL, the extension evaluates the domain against the local hash-list.
• Zero Data Exhaust: The URL is never transmitted over the network for evaluation. There is absolutely no centralized logging of what a user visits or what gets blocked.

This approach minimizes CPU overhead on the user’s machine while mathematically guaranteeing that their browsing data remains strictly on their device.

Engineering Takeaways

Building Digital Amannah reinforced that values-aligned technology is possible without sacrificing performance. By leveraging Next.js static generation, strict database RLS policies in Supabase, and local-first browser extension architecture, we proved that digital wellness tools can be built efficiently and securely.

The shift-left security approach and zero-tracking philosophy not only protect users but also drastically reduce the liability and complexity of managing sensitive user data.