# Belgian Bitcoin Embassy Website

## 1. Overview

The Belgian Bitcoin Embassy (BBE) website is a community-driven, Nostr-powered platform centered around a monthly Bitcoin meetup in Belgium.

It is not a corporate site or institutional platform. It is a lightweight, curated Nostr client that:

- showcases the next meetup
- connects users to the community
- displays curated Bitcoin content
- allows users to interact via Nostr (likes, comments)

The platform combines a simple public website with a role-based admin/moderation system.

---

## 2. Core Goals

The website must:

- clearly present the next monthly meetup
- grow the Belgian Bitcoin community
- aggregate and curate Nostr content
- allow social interaction via Nostr
- remain simple, fast, and easy to maintain

---

## 3. Tech Direction

Frontend:
- Next.js (App Router recommended)
- Component-based architecture
- Tailwind CSS (based on design system)

Backend:
- Lightweight API (Node.js / Go)
- Nostr integration layer
- Caching layer for events and posts

Auth:
- Nostr extension login (NIP-07 or signer)

---

## 4. Public Website Structure

### Routes

- `/` → Onepage homepage
- `/blog` → Blog overview
- `/blog/[slug]` → Blog post page
- `/admin` → Dashboard (role-based)

---

## 5. Homepage (Onepage)

### 5.1 Hero

- Headline: Biggest Bitcoin community in Belgium
- Subtext: Monthly meetup + community
- CTA:
  - Join Meetup
  - Join Telegram
  - Follow on Nostr

---

### 5.2 Next Meetup

Critical section.

Fields:
- title
- date
- time
- city
- venue
- description
- link

Actions:
- Attend / RSVP

---

### 5.3 About

Short explanation:
- what BBE is
- community-driven
- beginner friendly

---

### 5.4 Why Join

- meet local Bitcoiners
- learn Bitcoin
- discover events
- connect with community

---

### 5.5 Community Links

Platforms:
- Telegram
- Nostr
- X
- YouTube
- Discord
- LinkedIn

Each includes:
- icon
- short description
- link

---

### 5.6 Blog Preview

- featured posts
- latest posts
- categories

---

### 5.7 FAQ

- beginner friendly?
- do I need bitcoin?
- cost?
- location?

---

### 5.8 Final CTA

- join meetup
- follow community

---

## 6. Blog System (Nostr-Based)

### Source

- Nostr longform events
- imported manually by admins

### Flow

1. Admin inputs event id or naddr
2. Backend fetches from relays
3. Event is parsed and cached
4. Admin edits metadata
5. Post is published

---

### Blog Page `/blog`

- list of posts
- category filters
- featured post

---

### Blog Post `/blog/[slug]`

- title
- content
- categories
- author
- Nostr interactions:
  - likes
  - comments

---

## 7. Nostr Interaction Layer

Users can:

- login with Nostr
- like posts (reactions)
- comment (replies)
- interact with events

Backend:

- fetch events from relays
- cache data
- apply local moderation

Important:
- no deletion on Nostr
- moderation is local only

---

## 8. Roles & Auth

### Auth

- Nostr login (extension)
- signature verification
- session/JWT

### Roles

Defined by pubkeys.

Admins:
- set in `.env`

Moderators:
- assigned by admins

---

## 9. Admin Dashboard

Route: `/admin`

Admins have full control.

### Tabs

#### 9.1 Overview
- meetup summary
- latest posts
- quick actions

#### 9.2 Events
- create/edit meetups
- mark upcoming/past
- manage event content
- moderate comments

#### 9.3 Blog
- import Nostr posts
- edit metadata
- assign categories
- publish/unpublish
- feature posts

#### 9.4 Moderation
- view comments
- filter by post/event
- hide content
- block pubkeys (local)

#### 9.5 Users
- list users (pubkeys)
- promote to moderator
- remove moderator
- block users

#### 9.6 Categories
- create/edit/delete
- reorder

#### 9.7 Relays
- add/remove relays
- set priority
- test connectivity

#### 9.8 Settings
- site title
- tagline
- social links
- feature toggles

#### 9.9 Nostr Tools
- manual fetch
- cache refresh
- debug events

---

## 10. Moderator Dashboard

Moderators have content-only control.

### Tabs

#### 10.1 Moderation
- comment stream
- hide spam
- filter content

#### 10.2 Events
- view meetups
- moderate comments
- minor edits

#### 10.3 Blog
- edit metadata
- assign categories
- publish/unpublish

#### 10.4 Reports (optional)
- flagged content
- moderation actions

---

## 11. Data Models

### Meetup
- title
- description
- date
- location
- link
- status

### Blog Post
- nostr_event_id
- title
- slug
- content
- excerpt
- categories
- featured
- visible

### Category
- name
- slug

### User
- pubkey
- role

---

## 12. Component Structure

Public:
- HeroSection
- NextMeetupCard
- AboutSection
- CommunityLinks
- BlogPreview
- FAQSection

Admin:
- AdminSidebar
- MeetupEditor
- PostManager
- CategoryManager
- SettingsPanel

---

## 13. Design Principles

- dark theme
- Bitcoin orange accent
- large whitespace
- no borders (use spacing)
- layered surfaces
- minimal animation

---

## 14. MVP Scope

Build first:

- homepage
- blog
- blog post page
- Nostr login
- admin dashboard
- moderator dashboard
- meetup system
- Nostr blog import

---

## 15. Key Principle

This is not a CMS.

This is a curated Nostr client for a Bitcoin meetup community.

Keep it simple, fast, and focused on:
- meetup
- community
- content


---

# pages.md

## 1. Routing Overview

Public routes:
- `/` → Homepage (onepage)
- `/blog` → Blog listing
- `/blog/[slug]` → Blog detail

Auth / Dashboard routes:
- `/admin` → Dashboard entry (role-based)
- `/admin/overview`
- `/admin/events`
- `/admin/blog`
- `/admin/moderation`
- `/admin/users` (admin only)
- `/admin/categories`
- `/admin/relays` (admin only)
- `/admin/settings` (admin only)
- `/admin/nostr` (admin only tools)

System routes (optional):
- `/api/*` → Backend endpoints
- `/health` → Health check

All `/admin/*` routes require Nostr authentication.

---

## 2. Layouts

### 2.1 Public Layout

Used by `/` and `/blog*`

Structure:
- Top Navigation
- Page Content
- Footer

Top Navigation:
- Logo (BBE)
- Links (scroll or anchor):
  - Meetup
  - About
  - Community
  - Blog
- CTA button: Join Meetup

Footer:
- Logo
- Links: Privacy, Terms, Contact
- Social links

---

### 2.2 Admin Layout

Used by `/admin/*`

Structure:
- Sidebar (left)
- Content area (right)
- Top bar (optional)

Sidebar:
- Overview
- Events
- Blog
- Moderation
- Categories
- (Admins only)
  - Users
  - Relays
  - Settings
  - Nostr Tools

Role-based rendering:
- Moderator sees limited menu
- Admin sees full menu

---

## 3. Homepage `/`

Single page composed of sections.

### Sections (top to bottom)

#### 3.1 HeroSection

Content:
- headline
- subtext
- CTA buttons:
  - Join Meetup
  - Join Telegram
  - Follow on Nostr

#### 3.2 NextMeetupSection

Data source: Meetup API

Content:
- date
- time
- city
- venue
- description
- CTA: Attend Meetup

#### 3.3 AboutSection

Static/admin-editable content.

#### 3.4 WhyJoinSection

Static list of benefits.

#### 3.5 CommunityLinksSection

Dynamic from settings:
- Telegram
- Nostr
- X
- YouTube
- Discord
- LinkedIn

#### 3.6 BlogPreviewSection

Data source: Blog API

Content:
- featured post
- latest posts

#### 3.7 FAQSection

Static/admin-editable.

#### 3.8 FinalCTASection

- Join Meetup
- Follow Community

---

## 4. Blog Listing `/blog`

### Layout

- Header (title + description)
- Category filter
- Post grid/list

### Features

- filter by category
- highlight featured post
- pagination or infinite scroll

### Data

From cached Nostr posts.

---

## 5. Blog Detail `/blog/[slug]`

### Layout

- Title
- Metadata (date, author)
- Content
- Categories
- Interaction section
- Related posts

### Interaction

If user logged in (Nostr):
- Like button
- Comment input

Display:
- likes count
- comments (Nostr replies)

---

## 6. Admin Entry `/admin`

### Behavior

- if not logged in → show Nostr login screen
- if logged in → redirect to `/admin/overview`

### Login Screen

- button: Login with Nostr extension
- explanation text

---

## 7. Admin Pages

### 7.1 `/admin/overview`

Dashboard summary:
- next meetup
- recent posts
- recent activity
- quick actions

---

### 7.2 `/admin/events`

Meetup management.

Views:
- list of meetups
- create/edit form

Fields:
- title
- description
- date/time
- location
- link

Actions:
- create
- edit
- delete
- mark featured

Moderation:
- view comments
- hide comments

---

### 7.3 `/admin/blog`

Blog management.

Views:
- list of posts
- import tool

Import flow:
- paste event id or naddr
- fetch preview
- confirm import

Post editing:
- title
- excerpt
- slug
- categories
- featured toggle
- visibility toggle

---

### 7.4 `/admin/moderation`

Moderation center.

Views:
- comment stream
- filters:
  - by post
  - by event
  - by user

Actions:
- hide comment
- mark spam
- block pubkey (local)

---

### 7.5 `/admin/users` (admin only)

User management.

Views:
- list of pubkeys

Actions:
- promote to moderator
- remove moderator
- block user

---

### 7.6 `/admin/categories`

Category management.

Actions:
- create
- edit
- delete
- reorder

---

### 7.7 `/admin/relays` (admin only)

Relay configuration.

Actions:
- add relay
- remove relay
- set priority
- test connection

---

### 7.8 `/admin/settings` (admin only)

Global settings.

Fields:
- site title
- tagline
- social links
- feature toggles

---

### 7.9 `/admin/nostr` (admin only)

Advanced tools.

Features:
- manual event fetch
- cache refresh
- debug viewer

---

## 8. Access Control

- `/admin/*` requires Nostr auth
- roles checked server-side
- UI adapts based on role

---

## 9. Error Pages

- `/404`
- `/500`

Simple, minimal, same design style.

---

## 10. Key Principles

- keep routes minimal
- keep pages focused
- no unnecessary nesting
- everything role-based

The structure must stay simple and predictable for developers.

