Engineering notes from production work

Engineering Notes

Articles on React, Next.js, hiring, and full-stack development.

ReactNext.jsAI APIsPerformanceSEO / AEO / GEO

Featured: AI18 min readApril 12, 2026

The Ultimate Guide to Free AI API Keys: 6 Platforms You Need to Know

If you build with AI, you need keys. This is the expanded version of the shortlist I actually use: one router for breadth, a few vendor consoles for latency and specialty models, GitHub when I already live in tokens, and Cloudflare when the edge is the product, plus how I combine them before I touch billing.

6 Free-key entry points for real projects

1

OpenRouter: one key reaches many models. Use the Models tab “free” filter so paid routes do not fail once you are out of credits; log the model ID on every request so 402s are obvious.

2

Google AI Studio, Groq, and GitHub expose usage in the console; NVIDIA and Cloudflare favor per-model keys or schemas. Plan for rate limits and label keys in your secret manager.

3

Groq Cloud lives at console.groq.com (not xAI Grok). Prefer expiring keys and revoke when a demo is done, with the same hygiene for GitHub PATs.

4

Treat “unlimited” UI rows as marketing-adjacent: upstream RPM/TPM and fair-use still apply; add backoff and a second provider before you demo to investors.

5

Production is not “free tier with fingers crossed”: paid plans buy predictable limits, support, and fewer surprises when a model is deprecated overnight.

Latest Articles

Explore more notes on production engineering.

Frontend

12 min readJune 27, 2026

How to Set Up CI/CD for a React App

A practical, step-by-step walkthrough of CI/CD for React: from a git push to GitHub Actions, quality gates, preview deployments, production releases, monitoring, and rollback - with interactive demos you can run.

AI Tools

7 min readJune 10, 2026

Claude Fable 5 Explained: A Quick Developer Guide

Anthropic just launched Claude Fable 5, its most capable model yet. A short, no-fluff guide for developers: what it does, what it costs, how the safety routing works, and how to start using claude-fable-5.

Frontend

15 min readJune 1, 2026

Frontend Architecture for the Age of AI Codegen: Designing Code LLMs Get Right

AI writes most of the boilerplate now. The bottleneck moved to architecture. Here is how to design component APIs, contracts, and guardrails so AI-generated frontend code is correct by construction.

Frontend

10 min readMay 29, 2026

Monorepo Architecture for Frontend Teams

Package boundaries, shared TypeScript configs, build caching, and dependency management - how to structure a monorepo that scales with the team.

Frontend

9 min readMay 27, 2026

Design Systems That Teams Actually Use

Why most design systems collect dust - and how to build one that developers reach for by default. Governance, naming, contribution workflows, and adoption patterns.

Frontend

10 min readMay 25, 2026

Testing Strategy for Frontend Architecture

Where to invest testing effort for maximum confidence - unit tests for logic, integration for workflows, E2E for critical paths, and what to mock at each layer.

Frontend

10 min readMay 23, 2026

API Contracts Between Frontend and Backend

Shared types, Zod schemas, contract testing, and the patterns that turn API mismatches from runtime surprises into compile-time errors.

Frontend

11 min readMay 21, 2026

State Management Without the Pain

A decision tree for where each piece of state lives - useState, useReducer, Context, Zustand, server state, URL state - and when to reach for each.

Frontend

10 min readMay 19, 2026

Component Design: From Primitive to Product

How to design components that compose cleanly - slots, compound components, and the line between flexibility and chaos.

Frontend

12 min readMay 16, 2026

Frontend Architecture: The Mental Model That Keeps Complex Apps Maintainable

Five interconnected pillars - components, state, contracts, testing, tooling - that keep a frontend codebase healthy as the team and features grow.

Frontend

18 min readMay 3, 2026

How React Knows What to Re-render: The Reconciliation & Diffing Algorithm

Learn React's reconciliation algorithm: virtual DOM diffing, key prop rules, render vs commit phases, React 18 batching, and concurrent rendering - from first principles to production patterns.

Frontend

22 min readMay 1, 2026

Mastering Async JavaScript: Promises, Async/Await, and the Microtask Queue

From callback hell to Promise chains to async/await, this guide covers everything about asynchronous JavaScript including error handling, Promise combinators, AbortController, and real-world patterns.

AI Tools

13 min readApril 28, 2026

How I Use Claude Code to Ship Features 10× Faster

A real-world workflow guide for using Claude Code CLI to build features, debug bugs, refactor legacy code, and run custom automations - with actual examples from building this portfolio.

AI Tools

15 min readApril 28, 2026

How to Build an MCP Server from Scratch (Step-by-Step for Beginners)

A practical beginner guide to building a local MCP server (stdio) step-by-step. You will run a working server, connect it to Claude Desktop, and call your first tool.

Frontend

14 min readApril 24, 2026

JavaScript Closures Explained: Why Your Functions Remember Everything

Learn JavaScript closures with interactive demos. Covers lexical scope, the var vs let loop bug, stale React hooks, memory leak patterns, and closure interview questions.

Frontend

16 min readApril 22, 2026

How JavaScript Actually Executes Your Code: Event Loop & Call Stack Deep Dive

JavaScript call stack, event loop, microtask queue, and macrotask queue explained with real execution traces. Learn why Promises beat setTimeout and how to debug async timing bugs.

Engineering

7 min readApril 15, 2026

Onboard to Any Git Repo Fast: 5 Commands Before I Read Code

Five git commands I run before reading any code: find churn hotspots, map ownership risk, spot bug clusters, read delivery cadence, and detect firefighting patterns in minutes.

Performance

10 min readMarch 10, 2026

Improving Next.js Lighthouse Without Killing the Design

How I chase Lighthouse and Core Web Vitals on a real Next.js portfolio without turning the UI into a gray wireframe.

SEO

11 min readMarch 8, 2026

SEO, AEO, and GEO for a Modern Developer Portfolio

How I structure a portfolio so Google, featured snippets, and AI crawlers can all quote me without me sounding like a keyword vending machine.

Frontend

9 min readMarch 5, 2026

Shipping React UI Fast Without Making a Mess

The way I structure React and Next.js UI so the team ships fast because the system is obvious, not because we skipped every guardrail.

Frontend

13 min readSeptember 15, 2025

JavaScript's Hidden Superpower: Prototypal Inheritance from proto to class

ES6 classes are syntactic sugar over prototypes. This guide explains how the prototype chain actually works, what Object.create does, and how to use composition over inheritance effectively.

Subscribe for new posts, or read how referrals and sponsored placements are handled on this site.