System Architecture & Implementation Plan: Markdown-Native Community Feedback Loop

Community Feedback System

Objective (The “Why”)

To build a highly scalable, zero-friction community feedback and roadmap system for multiple business verticals (e.g., MyBetterRates and $MART DEBT Coach).

This system must allow the founder to maintain a local, Markdown-first workflow (Obsidian) while providing two distinct user groups (“Inner Circle” beta testers and the “General Community”) with a seamless, low-friction web interface solution to read updates, upvote roadmap priorities, and submit ideas. The solution avoids forcing users into heavy proprietary ecosystems (like Notion) by embedding lightweight, Magic-Link authenticated SaaS widgets (Featurebase/Frill) directly into a statically generated, self-hosted Astro website.

System Architecture Overview

1. Content Source: Obsidian (Local Markdown).
2. Deployment Pipeline: GitHub Actions -> Astro (Static Site Generator) -> Cloudflare Pages.
3. Access Control (Inner Circle): Cloudflare Zero Trust (Free tier) for gateway authentication.
4. Feedback & Roadmap Engine: Featurebase (or Frill.co) embedded directly into Astro templates.

---

Implementation Plan (For Executing AI Agent)

Phase 1: Access Control & Domain Routing (Cloudflare)

Context: We must separate the public-facing community from the private “Inner Circle” without building a custom authentication backend.

Step 1.1: Define Environments

• Configure Cloudflare Pages to serve two branches or paths:
  • public.mybetterrates.com (or standard mybetterrates.com/community)
  • innercircle.mybetterrates.com (or mybetterrates.com/beta)

Step 1.2: Implement Cloudflare Zero Trust (For Inner Circle)

• Navigate to Cloudflare Zero Trust dashboard.
• Create an Access Application targeting the Inner Circle URL/path.
• Create an Access Policy:
  • Action: Allow.
  • Include: Emails ending in @specific-domain.com OR a list of specific Inner Circle email addresses (e.g., user1@gmail.com, user2@yahoo.ca).
  • Result: When users visit the Inner Circle URL, Cloudflare intercepts and sends them a One-Time PIN (OTP) to their email. No passwords required. Zero friction.

Phase 2: Feedback SaaS Configuration (Featurebase)

Context: Featurebase handles the roadmap visualization, upvoting, and user comments via an embeddable widget.

Step 2.1: Workspace Setup

• Create an account on Featurebase (or Frill.co).
• Create two separate workspaces (one for MyBetterRates, one for $MART DEBT Coach). This prevents data cross-contamination.

Step 2.2: Board Configuration

• In each workspace, configure the following boards:
  • Feature Requests
  • Bug Reports
  • Inner Circle Exclusive (Set visibility to private/unlisted if supported, or rely on page-level gating).
• Configure the Roadmap view (Now, Next, Later).

Step 2.3: Authentication Settings

• Enable Magic Link SSO (Single Sign-On).
• Disable “Require Account Creation with Password.” The goal is that when a user clicks “Upvote”, they are only asked for an email address to verify they are human, sending a magic link to their inbox.

Phase 3: Astro Integration (Code Execution)

Context: Injecting the feedback mechanism directly into the generated Obsidian Markdown files.

Step 3.1: Create the Astro Component (FeedbackWidget.astro)

• Create a reusable UI component that loads the Featurebase embed script.

src/components/FeedbackWidget.astro

---
export interface Props {
  workspaceId: string;
  theme?: 'light' | 'dark';
}
const { workspaceId, theme = 'light' } = Astro.props;
---

<div id="featurebase-embed" class="w-full mt-10 border-t pt-8"></div>

<script define:vars={{ workspaceId, theme }}>
  // Initialize Featurebase Script
  const script = document.createElement('script');
  script.src = "https://do.featurebase.app/js/sdk.js";
  script.id = "featurebase-sdk";
  script.onload = () => {
    if (window.Featurebase) {
      window.Featurebase("initialize_embed", {
        organization: workspaceId,
        theme: theme,
        placement: "featurebase-embed", // Target div ID
      });
    }
  };
  document.body.appendChild(script);
</script>

<style>
  /* Ensure the container matches your Obsidian/Astro typography */
  #featurebase-embed {
    min-height: 600px;
  }
</style>