The Black Male Journal

projectactive

The Black Male Journal

Independent media house and revolutionary masculinist platform. A flagship dispatch for politics, philosophy, and health — serving as a journal of ideas rooted in Pan-African consciousness, historical awareness, and unapologetic Black male intellectual authority.

Core Identity

The Black Male Journal (BMJ) is a full-stack membership publication built with Next.js (App Router), TypeScript, Tailwind CSS, Supabase, and Stripe, deployed on Vercel. Its visual DNA is "Vintage Propaganda Poster + Newspaper Grid" — drawing from 1960s print culture, halftone textures, film grain, and high-contrast editorial design with a palette anchored in revolutionary red (#C0281F), cream (#E8DCC8), amber (#C8852A), and near-black (#0D0C0B).

Typography is editorial and militant: Bebas Neue for display (always all-caps), Libre Baskerville for body, Oswald for labels, and IBM Plex Mono for metadata. Visual constraints prohibit pastels, gradients, rounded corners beyond 4px, glassmorphism, or any modern SaaS aesthetic. Every surface must feel like a 1968 printed poster.

Three Lenses (Content Taxonomy)

All content is categorized under exactly one of three lenses:

  • Politics — power, policy, systems, community organizing
  • Philosophy — purpose, identity, masculinity, mindset
  • Health — physical/mental wellness, martial arts, discipline

Flagship Product: The Weekend Briefing

Curated dispatch with issue numbering and issue-specific icons. Red book icon symbol. Core components: NewspaperGrid, HalftoneHero, DispatchCard, BriefingHeader.

Architecture

  • Framework: Next.js 14 (App Router), TypeScript strict mode
  • Styling: Tailwind CSS with CSS custom properties (--bmj-* tokens)
  • Database & Auth: Supabase (PostgreSQL + Auth with magic link / password)
  • Payments: Stripe subscriptions (Free / Basic / Premium tiers)
  • Email: Resend for transactional and contact form
  • Content: MDX (articles as code) with gray-matter, reading-time, rehype/remark
  • Analytics: Plausible (privacy-first, no cookies)
  • Hosting: Vercel with auto-deploy from GitHub
  • DNS: Squarespace (domain management pointing to Vercel)

Access & Monetization

Tiered membership model with PaywallGate component (blur effect for non-premium):

  • Free ($0): All public articles, briefing previews, video gallery, academy, blog
  • Basic ($X/mo): Full briefing archive, select handbooks, member forum access
  • Premium ($X/mo): Everything — all handbooks, downloads, private content, early access, Chairman Q&As

Payment routing: Stripe for all website subscriptions. Patreon for external fan support. PayPal/CashApp/Venmo for personal support only — never routed through the portal.

Database Schema

Six tables: articles (lens-tagged, access-tiered, MDX content), briefings (issue-numbered sections as JSONB), members (linked to Supabase Auth with Stripe IDs), newsletter_subscribers, contact_submissions, courses (academy content). Row-level security enforces tier-based access. Auto-updated timestamps via trigger.

Implementation Phases

  1. Phase 0 — Legal & Infrastructure: EIN, virtual mailbox, bylaws, articles of incorporation, business bank account, 501(c)(3) application, custom email, domain transfer
  2. Phase 1 — Environment: Windows dev setup, Node.js, Claude Code CLI, Next.js scaffold
  3. Phase 2 — Project Memory: CLAUDE.md with brand rules, architecture, code style
  4. Phase 3 — Slash Commands: Six custom Claude Code commands (new-article, new-briefing, deploy-check, brand-check, seed-content, component)
  5. Phase 4 — Architecture & DB: Supabase schema, RLS policies, indexes, auth triggers
  6. Phase 5 — Design System: brand.css tokens, globals.css, Tailwind config, BriefingHeader
  7. Phase 6 — Feature Build: 14 sessions covering foundation, home, DB client, articles, briefings, academy, video, blog, auth, Stripe, contact/newsletter, legal pages, SEO, deploy
  8. Phase 7 — Revenue: Stripe tier configuration, webhook handlers
  9. Phase 8 — Deployment: Vercel, environment variables, DNS (Squarespace → Vercel)
  10. Phase 9 — Analytics & SEO: Plausible, generateMetadata, sitemap, JSON-LD, OG images
  11. Phase 10 — Post-Launch: SMS integration, member forum, academy video courses, mobile app, merchandise

Key Conventions

  • App Router only (no pages/ directory)
  • Server Components by default, "use client" only when needed
  • Conventional commits (feat:, fix:, chore:, etc.)
  • Star motif from logo used as section dividers
  • All images get grain/halftone treatment via CSS
  • The Chairman is the sole author

Provenance: Synthesized from Identity_Design/BMJ_SSOT.md (consolidated SSOT, last verified 2026-03-26) and Identity_Design/BMJ_MASTER_PLAN_v2.md (full implementation blueprint v2.0). Covers brand identity, architecture, database schema, ten-phase implementation plan, monetization model, and editorial conventions.