Master Claude & Codex: The Developer Fundamentals Nobody Teaches
A comprehensive guide to the core concepts developers use with Claude and Codex: terminal navigation, Git version control, project structure, frontend/backend architecture, databases, APIs, Node.js, npm, and deployment. Understanding these 80% of developer knowledge will exponentially improve your ability to build with AI code assistants.
Terminal & File System Basics
The Terminal is Your Computer Without the Mouse
The terminal is a command-line interface to your computer that replaces the graphical interface. Instead of clicking folders, you type commands like 'cd' (change directory) to navigate. It's faster and more accurate once you learn the basics, and Claude/Codex will help you write commands.
Essential Terminal Commands
Master these core commands: PWD (print working directory—shows where you are), LS (list—shows files/folders in current directory), CD (change directory—navigate to folders), MKDIR (make directory—create folders), and RM (remove—delete files). These form the foundation of all terminal work.
Project File Structure Conventions
A typical project has: SRC folder (contains your code), node_modules (third-party code—never edit), package.json (project config and dependencies), .env file (secret keys and passwords), and .gitignore file (files to exclude from version control). Understanding this structure is critical for working with Claude/Codex.
Git & Version Control
Git is a Time Machine for Your Code
Git lets you take snapshots (commits) of your project at different points in time. Each commit is a restore point you can return to if something breaks. Instead of creating 'website_v1, website_v2, website_final' folders, Git tracks every state of your project with descriptions of what changed.
Git's Three Zones: Working, Staging, and History
Git operates in three zones: (1) Working directory—your current project files, (2) Staging area—files you've selected to snapshot, and (3) Git history—permanent record of all commits. You select files to stage, then commit them to history. This prevents accidentally committing unwanted changes.
Branches: Parallel Development Lines
A branch is an independent copy of your code where you can experiment without affecting the main project. You create a branch, work on a feature (e.g., contact form), then merge it back into main when ready. This keeps experimental code isolated and safe.
Local vs. Remote Repositories
Your project exists in two places: locally on your computer (local repository with full history) and on GitHub (remote repository). Git push sends your commits to GitHub; git pull retrieves them. If your computer fails, your entire project history is safe on GitHub.
Pull Requests: Propose Before Merging
Instead of merging code directly into main, you create a pull request (PR)—a proposed change that others review first. This prevents bad code from entering production. Reviewers can comment, request changes, or approve. Claude/Codex can create and manage PRs automatically.
The .gitignore File Protects Secrets
Add files to .gitignore to prevent them from being committed to GitHub. Critical files to exclude: .env (API keys, passwords), node_modules (regenerated on install), and generated files. If you commit .env, your secrets are exposed to hackers. Always add .env to .gitignore.
How Claude/Codex Uses Git in Practice
Claude/Codex automatically creates branches for features, generates code with commits at each step, shows you diffs (what changed), prepares pull requests with descriptions, and merges when approved. Understanding this workflow lets you validate and control what the AI generates.
Application Architecture: Frontend, Backend, Database
Three-Layer Application Stack
All applications have three layers: (1) Frontend—what users see in their browser (HTML, CSS, JavaScript), (2) Backend—the invisible logic running on a server (business rules, security, database queries), and (3) Database—persistent storage of user data. The frontend sends requests to the backend, which queries the database and responds.
Frontend: HTML, CSS, and JavaScript
HTML defines structure (titles, paragraphs, buttons), CSS styles appearance (colors, fonts, layout), and JavaScript adds interactivity (button clicks, form validation). Tailwind CSS is a popular utility framework that Claude/Codex uses to style quickly. Responsive design ensures your site works on desktop and mobile.
Backend: The Invisible Brain
The backend runs on a server (not in the user's browser) and contains business logic: security checks, calculations, database queries, and payment processing. When a user clicks 'Buy', the backend verifies they're logged in, checks inventory, processes payment via Stripe, and returns success or error. Users never see the backend directly.
Database: Persistent Data Storage
A database is like an Excel spreadsheet with multiple sheets (tables). Each table stores one type of data (users, orders, products). Each row is a record, each column is a field. Databases persist data even when the server restarts. Without a database, your app would forget everything on restart.
Authentication: Proving Identity
Authentication verifies who a user is. User enters email and password, frontend sends to backend, backend checks database, and if correct, backend generates a JWT token (signed string proving identity) and sends a cookie to the browser. Cookie persists login across sessions (remember me). Different users see different data based on their role (admin vs. regular user).
External Services: Stripe, Resend, Supabase
Modern apps integrate external services via APIs: Stripe for payments, Resend for emails, Supabase/PostgreSQL for databases, OpenAI/Claude for AI, Vercel for deployment. You don't build these yourself—you use their APIs and pass API keys to authenticate your app.
APIs, Webhooks, and Secrets
APIs: How Services Communicate
An API (Application Programming Interface) is like a waiter in a restaurant. Your app requests something from an external service (e.g., process payment with Stripe), the service responds with data. APIs use HTTP verbs (GET to read, POST to create, PUT to update, DELETE to remove) and exchange data in JSON format.
API Keys: Your Secret Passport
Each external service (Stripe, OpenAI, etc.) gives you an API key—a unique string that proves you own that service integration. API keys are secrets that must never be exposed. Store them in .env file, exclude .env from Git, and add them to your deployment platform (Vercel) separately. If someone gets your Stripe key, they can charge your account.
Webhooks: Services Calling You
A webhook is the opposite of an API call. Instead of you polling a service repeatedly, the service automatically calls your app when something happens. Example: Stripe webhook notifies your backend when a payment succeeds, so you can activate the subscription immediately. Webhooks are faster, cheaper, and more reliable than polling.
JSON: The Universal Data Format
JSON (JavaScript Object Notation) is the standard format for exchanging data between services. It's structured text with key-value pairs. APIs send and receive JSON. You don't need to memorize JSON syntax—Claude/Codex handles it—but you should recognize it when you see it in logs or error messages.
Node.js, npm, and Dependencies
Node.js: JavaScript Outside the Browser
Node.js is the JavaScript engine that lets you run JavaScript on servers and your computer, not just in browsers. In 2009, someone extracted Chrome's JavaScript engine and created Node.js, which became the foundation of modern web development. Node.js is essential for running your project locally and on production servers.
npm, Yarn, and pnpm: Dependency Managers
npm (Node Package Manager), Yarn, and pnpm are tools that install, update, and manage third-party code packages your project depends on. They read package.json, download packages into node_modules, and maintain a lockfile to ensure all developers use the same versions. pnpm is recommended: it's faster, more space-efficient, and more secure than npm.
package.json: Your Project's Identity Card
package.json lists your project's name, version, and all dependencies (third-party code it needs). It also lists scripts (commands like 'npm run dev' to start your app). When you run 'npm install' or 'pnpm install', the tool reads package.json and downloads all dependencies into node_modules.
node_modules: Never Commit This Folder
node_modules contains all third-party code your project depends on—thousands of files and folders. It's huge and regenerated instantly with 'pnpm install', so never commit it to GitHub. Add 'node_modules' to .gitignore. This saves space and prevents conflicts when collaborating.
npm Packages: Reusing Code
Instead of writing everything from scratch, you import npm packages—pre-built code from other developers. Examples: React (UI framework), Next.js (full-stack framework), Prisma (database ORM), date-fns (date manipulation). Using packages saves thousands of lines of code and years of development time.
Local Development vs. Production Deployment
Local Development: Safe Experimentation
When you run 'npm run dev', your app starts on localhost:3000 (your computer only). Your code is not on a public server, so only you can access it. Errors are shown in detail. Your .env file stays local and is never committed. This is the safe place to experiment and test before going live.
Deployment: Making Your App Public
Deployment means moving your code from your computer to a public server so everyone can access it. Modern deployment takes less than 5 minutes. You push code to GitHub, your deployment platform (Vercel) detects changes, installs packages, builds your app, and deploys it automatically. Your app is now live at mysite.com.
Environment Variables in Production
You never commit .env to GitHub. Instead, add environment variables directly to your deployment platform (Vercel, Railway). Vercel secures them and injects them into your app at runtime. This keeps API keys safe and separate from code.
Vercel: Recommended Deployment Platform
Vercel is the easiest way to deploy Next.js and React apps. It's free to start, integrates with GitHub, and deploys automatically on every push. You get a URL like myapp.vercel.app, and you can buy a custom domain (mysite.com) and configure it in Vercel. No manual server management needed.
Error Handling and Debugging
Errors Are Messages, Not Failures
Every developer encounters errors—they're not failures, they're messages telling you exactly what to fix. Common error types: Syntax Error (code written incorrectly), Reference Error (using unknown variable), Type Error (wrong data type). Learn to read error messages carefully. When stuck, ask Claude/Codex to explain the error.
Avoid Blindly Pressing Enter
When using Claude/Codex, resist the urge to execute every command without understanding it. Read error messages, understand what Claude generated, and ask questions. This prevents security issues, wasted time, and broken code. Understanding what you're doing is the difference between a developer and someone just copy-pasting.
Why This Knowledge Matters
80% of Developer Knowledge
This video covers 80% of what professional developers do daily. Understanding terminal, Git, architecture, APIs, npm, and deployment lets you work 10x faster with Claude/Codex. Developers who know these basics are exponentially more efficient than those who don't because they understand what the AI is doing and can validate it.
Security: Protecting Your Secrets
The single most important takeaway: never commit .env to GitHub. API keys, passwords, and secrets belong in .env, which is excluded from Git. If you expose secrets on GitHub, hackers can impersonate you, steal data, or charge your accounts. This one habit prevents 90% of security breaches.
Continuous Learning Path
This video is the foundation. Advanced topics (TypeScript, advanced JavaScript, database design, testing, CI/CD) are covered in the creator's upcoming training course. Subscribe to the newsletter for early access and discounts. Understanding basics first makes advanced topics much easier.
Notable quotes
Git is a time machine. When you start a project, you can take a snapshot of the current state. — Ben BK
If you understand absolutely nothing about what Claude and Codex are doing, it's going to be difficult to progress. — Ben BK
Never put API keys directly into the code. You will put this key in a file named .env. — Ben BK
Action items
- Install Node.js from the official website (required for all projects)
- Learn the five essential terminal commands: PWD, LS, CD, MKDIR, RM
- Create a .gitignore file in every project and add .env and node_modules
- Always use pnpm instead of npm for faster, more secure dependency management
- Set up a GitHub account and practice creating branches and pull requests
- Never commit API keys to GitHub; store them in .env and add to .gitignore
- Deploy your first app to Vercel and connect it to a custom domain
- When Claude/Codex generates code, read and understand it before executing
- Subscribe to Ben BK's newsletter for the upcoming advanced training course