import { useState, useCallback, useRef, useEffect } from "react";
const TOOLS = {
// Tier 1 - Must Understand
git: { name: "Git", tier: 1, category: "version-control", x: 140, y: 120, description: "Tracks every change you make to your code, like a detailed undo history. When Claude Code edits files in your project, git records what changed, when, and why.", usage: "Both projects. Every Claude Code session creates git commits. Railway deploys from your git history.", connections: ["github", "claude-code", "railway", "terminal"] },
github: { name: "GitHub", tier: 1, category: "version-control", x: 140, y: 220, description: "Cloud storage for your git repositories. Your code lives here, and Railway watches it to know when to redeploy.", usage: "Private repos for OptionsEdge and financial-literacy-playground. Railway auto-deploys when you push to the main branch — that's CI/CD, which you're already using.", connections: ["git", "railway"] },
python: { name: "Python", tier: 1, category: "languages", x: 380, y: 80, description: "The programming language your backend is written in. Claude Code writes Python for you — you prompt it, it generates the code.", usage: "FastAPI backend, Finviz screening scripts, SEC EDGAR client, Denver Sheriff API scripts.", connections: ["fastapi", "pip", "sqlalchemy", "venv"] },
react: { name: "React", tier: 1, category: "languages", x: 600, y: 80, description: "A JavaScript framework for building interactive user interfaces. Your frontends are React apps — the part users see and click.", usage: "OptionsEdge frontend, financial-literacy-playground (FRED dashboard, commodity map).", connections: ["npm", "tailwind", "javascript"] },
javascript: { name: "JavaScript", tier: 1, category: "languages", x: 600, y: 180, description: "The programming language that runs in web browsers. React is built on JavaScript. When Claude Code writes your frontend, it's writing JavaScript.", usage: "Every React component, every interactive chart, every browser-side behavior.", connections: ["react", "npm"] },
fastapi: { name: "FastAPI", tier: 1, category: "backend", x: 380, y: 200, description: "A Python framework for building APIs (the backend that your frontend talks to). It handles incoming requests, talks to the database, and returns data.", usage: "OptionsEdge backend. Handles routes like /api/options-chain, /api/screening, user auth.", connections: ["python", "sqlalchemy", "postgresql", "rest-api", "cors"] },
postgresql: { name: "PostgreSQL", tier: 1, category: "data", x: 380, y: 420, description: "Your database — where structured data lives permanently. Tables for users, trades, screening results, watchlists.", usage: "OptionsEdge stores everything here. Hosted on Railway. You interact with it through SQLAlchemy, never directly.", connections: ["fastapi", "sqlalchemy", "alembic", "railway", "jsonb"] },
terminal: { name: "Terminal / CLI", tier: 1, category: "dev-tools", x: 140, y: 340, description: "The text-based interface where you type commands. When you run Claude Code, git commands, npm install, or pip install — you're using the terminal.", usage: "Daily. Running Claude Code, installing packages, starting dev servers, git operations.", connections: ["git", "claude-code", "pip", "npm"] },
"claude-code": { name: "Claude Code", tier: 1, category: "dev-tools", x: 140, y: 450, description: "The agentic coding tool that reads your files, writes code, runs commands, and iterates. Available in desktop app (Code tab) and CLI. Same engine, different interface.", usage: "Primary development tool for both projects. Writes all your Python and React code.", connections: ["terminal", "git", "mcp"] },
rest_api: { name: "REST API", tier: 1, category: "concepts", x: 600, y: 420, description: "A standard way for programs to request data from each other over the internet. Your frontend calls your backend's REST API. Your backend calls Tastytrade's REST API.", usage: "Every data source: Tastytrade, FRED, SEC EDGAR, Finviz. Your own FastAPI backend exposes a REST API to your React frontend.", connections: ["fastapi", "json", "env-vars", "rate-limiting"] },
json: { name: "JSON", tier: 1, category: "concepts", x: 780, y: 420, description: "A text format for structured data. Looks like: {\"name\": \"AAPL\", \"price\": 185.50}. Every API sends and receives JSON. Config files use it. Your data exports use it.", usage: "Everywhere. API responses, package.json, database JSONB columns, trade export format.", connections: ["rest_api", "jsonb"] },
"env-vars": { name: "Environment Variables", tier: 1, category: "concepts", x: 780, y: 300, description: "Secret values (API keys, database passwords, URLs) stored outside your code so they don't get pushed to GitHub. Railway has its own env var panel; locally you use .env files.", usage: "Tastytrade API key, Railway database URL, any secret. Claude Code reads them from .env; Railway reads them from its dashboard.", connections: ["rest_api", "railway", "fastapi"] },
pip: { name: "pip", tier: 1, category: "package-mgmt", x: 380, y: 310, description: "Installs Python packages. When Claude Code runs 'pip install fastapi', pip downloads it from the internet and makes it available to your Python code.", usage: "Every Python dependency: fastapi, sqlalchemy, alembic, finvizfinance, requests, scipy, numpy, pandas.", connections: ["python", "venv", "terminal"] },
npm: { name: "npm", tier: 1, category: "package-mgmt", x: 600, y: 300, description: "Same as pip but for JavaScript. Installs React, Tailwind, chart libraries, etc. Also runs scripts defined in package.json (like 'npm start').", usage: "Every frontend dependency. React, Tailwind, Recharts, D3, etc.", connections: ["react", "javascript", "terminal"] },
railway: { name: "Railway", tier: 1, category: "hosting", x: 380, y: 540, description: "Cloud hosting platform. Runs your backend, frontend, and database so other people (Tony) can access the app from their computer. Auto-deploys when you push to GitHub.", usage: "OptionsEdge lives here. PostgreSQL database, FastAPI backend, React frontend — all hosted on Railway.", connections: ["github", "postgresql", "env-vars", "docker"] },
// Tier 2 - Should Understand
sqlalchemy: { name: "SQLAlchemy", tier: 2, category: "backend", x: 260, y: 310, description: "An ORM — it lets you write Python classes instead of raw SQL to interact with your database. Your User model in Python maps directly to the users table in PostgreSQL.", usage: "All OptionsEdge database interactions. Claude Code writes SQLAlchemy models; Alembic turns them into real database tables.", connections: ["python", "postgresql", "alembic", "fastapi"] },
alembic: { name: "Alembic", tier: 2, category: "backend", x: 260, y: 420, description: "Manages database migrations — when you add a column or table, Alembic generates a script that updates PostgreSQL without losing existing data.", usage: "OptionsEdge Phase 1: ran migrations to create 6 tables. Every schema change goes through Alembic.", connections: ["sqlalchemy", "postgresql"] },
tailwind: { name: "Tailwind CSS", tier: 2, category: "languages", x: 740, y: 80, description: "A CSS framework that lets you style elements with utility classes like 'bg-blue-500 text-white p-4' instead of writing custom CSS files.", usage: "OptionsEdge frontend styling. Claude Code writes Tailwind classes in your React components.", connections: ["react"] },
cors: { name: "CORS", tier: 2, category: "concepts", x: 500, y: 300, description: "A browser security rule that blocks your frontend from calling your backend unless the backend explicitly allows it. If your React app can't fetch data, CORS is usually why.", usage: "OptionsEdge: FastAPI must allow requests from your React frontend's URL. Financial-literacy-playground: you built an Express proxy specifically to solve a CORS problem with FRED.", connections: ["fastapi", "rest_api"] },
venv: { name: "Virtual Environment", tier: 2, category: "package-mgmt", x: 500, y: 190, description: "An isolated folder where pip installs packages for one project. Prevents conflicts between projects that need different versions of the same package.", usage: "You should have one for OptionsEdge and one for financial-literacy-playground. If you don't, package conflicts will eventually bite you.", connections: ["python", "pip"] },
mcp: { name: "MCP", tier: 2, category: "dev-tools", x: 140, y: 560, description: "Model Context Protocol — how Claude connects to external services like Google Drive, Gmail, Figma, and your calendar. Small programs that translate between Claude and each service's API.", usage: "Your current Claude setup has MCP connectors for Gmail, Google Calendar, Figma, Google Drive. Claude Code uses MCP extensions for additional tool access.", connections: ["claude-code"] },
"rate-limiting": { name: "Rate Limiting", tier: 2, category: "concepts", x: 780, y: 540, description: "APIs restrict how many requests you can make per minute/hour/day. Hit the limit and you get blocked temporarily. Your code needs to handle this gracefully.", usage: "Tastytrade, FRED, SEC EDGAR, Polygon, GNews — all have rate limits. Your OptionsEdge api_cache table exists partly to reduce API calls.", connections: ["rest_api"] },
jsonb: { name: "JSONB", tier: 2, category: "data", x: 500, y: 420, description: "A PostgreSQL column type that stores JSON data you can query. Useful when different rows need different fields — like user preferences or screening criteria that vary per user.", usage: "OptionsEdge: user_profiles.strategy_preferences, screening_results.raw_data, scoring weights.", connections: ["postgresql", "json"] },
auth: { name: "Authentication", tier: 2, category: "concepts", x: 500, y: 540, description: "Verifying who someone is (login). Separate from authorization (what they're allowed to do). OptionsEdge uses simple email/password — no OAuth or third-party auth needed for 2 users.", usage: "OptionsEdge: Drue and Tony log in with email/password. API keys for Tastytrade/Polygon are also a form of authentication.", connections: ["fastapi", "env-vars"] },
cicd: { name: "CI/CD", tier: 2, category: "hosting", x: 260, y: 540, description: "Continuous Integration / Continuous Deployment. Automatically tests and deploys code when you push to GitHub. You're already doing this — Railway auto-deploys from your main branch.", usage: "Every time you push OptionsEdge code to GitHub's main branch, Railway detects it and redeploys. That's CD. You're using it without knowing the term.", connections: ["railway", "github"] },
// Tier 3 - Just Know It Exists
docker: { name: "Docker", tier: 3, category: "hosting", x: 500, y: 640, description: "Packages an app with everything it needs to run into a 'container' so it works the same everywhere. Railway uses Docker under the hood — you never touch it directly.", usage: "Railway builds a Docker container from your code automatically. You don't configure this.", connections: ["railway"] },
websockets: { name: "WebSockets", tier: 3, category: "concepts", x: 780, y: 640, description: "A persistent two-way connection between frontend and backend for real-time data. REST = you ask, it answers. WebSockets = it pushes updates to you continuously.", usage: "Not used yet. Would matter if you add live-streaming options prices in a future OptionsEdge phase.", connections: ["rest_api"] },
ssh: { name: "SSH", tier: 3, category: "dev-tools", x: 140, y: 650, description: "Secure Shell — remotely control another computer via terminal. Like your terminal, but on someone else's machine.", usage: "Not needed. Railway handles your servers. Would only matter if you moved to a VPS or AWS.", connections: ["terminal"] },
};
const CATEGORIES = {
"version-control": { label: "Version Control", color: "#f97316" },
"languages": { label: "Languages & Frameworks", color: "#3b82f6" },
"backend": { label: "Backend", color: "#8b5cf6" },
"data": { label: "Data", color: "#06b6d4" },
"dev-tools": { label: "Dev Tools", color: "#10b981" },
"concepts": { label: "Concepts", color: "#f43f5e" },
"package-mgmt": { label: "Package Management", color: "#eab308" },
"hosting": { label: "Hosting & Deploy", color: "#ec4899" },
};
const TIER_LABELS = {
1: { label: "Must Understand", color: "#f8fafc", border: "rgba(255,255,255,0.5)" },
2: { label: "Should Understand", color: "#cbd5e1", border: "rgba(255,255,255,0.25)" },
3: { label: "Just Know It Exists", color: "#64748b", border: "rgba(255,255,255,0.12)" },
};
export default function DeveloperToolkitMap() {
const [selected, setSelected] = useState(null);
const [hoveredNode, setHoveredNode] = useState(null);
const [filterTier, setFilterTier] = useState(null);
const svgRef = useRef(null);
const detailRef = useRef(null);
useEffect(() => {
if (selected && detailRef.current) {
detailRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
}, [selected]);
const activeId = selected || hoveredNode;
const isConnected = useCallback((id) => {
if (!activeId) return false;
const tool = TOOLS[activeId];
if (!tool) return false;
return tool.connections?.includes(id) || id === activeId;
}, [activeId]);
const getNodeOpacity = useCallback((id) => {
if (filterTier && TOOLS[id].tier !== filterTier) return 0.15;
if (!activeId) return 1;
return isConnected(id) ? 1 : 0.12;
}, [activeId, filterTier, isConnected]);
const renderConnections = () => {
const lines = [];
const drawn = new Set();
Object.entries(TOOLS).forEach(([id, tool]) => {
(tool.connections || []).forEach(targetId => {
const target = TOOLS[targetId];
if (!target) return;
const key = [id, targetId].sort().join("-");
if (drawn.has(key)) return;
drawn.add(key);
const isActive = activeId && (isConnected(id) && isConnected(targetId));
const dimmedByTier = filterTier && (tool.tier !== filterTier || target.tier !== filterTier);
lines.push(
);
});
});
return lines;
};
const selectedTool = selected ? TOOLS[selected] : null;
return (
{/* Header */}
Developer Toolkit Map
Click any node to see what it does and how it connects to your projects