Yash KapureFrontend engineer

Archive

Engineering Notes

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

Notes

22

Topics

6

Latest

Apr 12, 2026

01 / FeaturedAI18 min read

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

Takeaways

01OpenRouter: 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.
02Google 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.
03Groq 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.
04Treat “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.

Collection

More engineering notes

Search

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.

CI runs your quality gates on every push; CD takes the code that passed and ships it. Both exist so you stop relying on "it works on my machine".

Jun 27, 202612 min read4 takes

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.

Jun 10, 20267 min read5 takes

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.

Jun 1, 202615 min read5 takes

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.

May 29, 202610 min read3 takes

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.

May 27, 20269 min read3 takes

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.

May 25, 202610 min read3 takes

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.

May 23, 202610 min read3 takes

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.

May 21, 202611 min read3 takes

Component Design: From Primitive to Product

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

May 19, 202610 min read3 takes

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.

May 16, 202612 min read3 takes

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.

May 3, 202618 min read9 takes

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.

May 1, 202622 min read7 takes

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.

Apr 28, 202613 min read6 takes

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.

Apr 28, 202615 min read5 takes

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.

Apr 24, 202614 min read5 takes

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.

Apr 22, 202616 min read5 takes

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.

Apr 15, 20267 min read5 takes

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.

Mar 10, 202610 min read3 takes

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.

Mar 8, 202611 min read3 takes

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.

Mar 5, 20269 min read3 takes

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.

Sep 15, 202513 min read5 takes

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