Security Architecture 101

A mobile-first self-study webapp for learning cybersecurity and security architecture through layered topics. It is designed for quick 5-minute commute reading and deeper weekend practice.

Stack

• Next.js App Router
• React
• Tailwind CSS
• Static local content in data/topics.ts
• Progress tracking with localStorage
• Mermaid diagrams rendered client-side
• Four-level topic explanations: School, College, Masters, and PhD / Systems Architect
• No backend, authentication, or paid APIs

Setup

npm install
npm run dev

Open http://localhost:3000.

For a production build:

npm run build
npm run start

Project Structure

app/
  page.tsx              Home page with filters, dashboard, and topic cards
  topic/[id]/page.tsx   Dedicated topic route
components/
  LearningCallout.tsx     Reusable pedagogy callouts
  ModeToggle.tsx
  ProgressDashboard.tsx
  TopicCard.tsx
  TopicDiagram.tsx        Mermaid renderer with readable fallback
  TopicPageClient.tsx
data/
  topics.ts             Curriculum, topic model, content assembly
  topicProfiles.ts      Per-topic narrative, diagram, stack, attacker, and lab profiles
lib/
  progress.ts           localStorage completion hook

Adding Or Editing Topics

All content lives in data/topics.ts. Add a new topic by appending another topic({ ... }) entry to the exported topics array.

The topic() helper combines concise curriculum seed fields with a topic-specific profile from data/topicProfiles.ts. That keeps the curriculum easy to maintain while making every topic render with:

• four progressive explanation tabs
• School Student intuition
• College Student implementation flow
• Masters Degree production/security reasoning
• PhD / Systems Architect authority and attacker analysis
• stronger real-system relevance
• stack and flow Mermaid diagrams
• threat lens
• trust boundary
• failure mode
• attacker goal
• how engineers get this wrong
• what breaks if it fails
• richer misconceptions
• deeper references
• weekend mini-lab

Required fields:

• id: URL-safe unique slug
• layer: one of the exported layers
• title
• difficulty: Beginner, Intermediate, or Advanced
• estimatedMinutes
• summary
• explanation
• whyItMatters
• mentalModel
• diagram: a simple arrow-separated flow such as User -> API -> Policy -> Data
• example

Optional fields:

• misconceptions
• references
• weekendProject

If optional fields are omitted, the helper generates useful defaults so new topics still render cleanly. For a high-quality topic, add a matching entry in topicProfiles.ts; this is where the distinct narrative hook, attacker pressure, operational pain, stack position, visual flow, and weekend lab live.

The four learning levels are generated from the seed topic plus its profile. To make the levels sharper, make the profile concrete:

• diagramNodes should name the runtime path, not generic boxes.
• stackNodes should show where the topic sits in the stack.
• attacker should describe the cheapest realistic abuse path.
• operations should name rollout, debugging, recovery, and observability pain.
• lab should build, break, harden, observe, and extend one local mini-system.

For the highest-quality topic, make the seed fields concrete:

• name the enforcing component
• name the trust boundary
• include one failure or abuse path
• include the operational consequence
• prefer production examples over definitions

Progress Storage

Completion state is stored in the browser under:

security-architecture-101-progress

Clearing site data resets progress.