Frontend Interview Questions

First treat the key as leaked: rotate it in the provider dashboard, because NEXT_PUBLIC_ values are inlined into the JavaScript bundle at build time. Then move the model call into a Route Handler, store the key in a variable without the NEXT_PUBLIC_ prefix, and import "server-only" in the module that uses it so a Client Component import fails the build. The browser only talks to your route, which adds auth and limits before calling the provider.

At each step the model produces a probability for every possible next token, and temperature reshapes that distribution before one token is sampled. Lower temperature makes the likeliest tokens even more likely, so output is more focused and repeatable; higher temperature flattens it, so output is more varied. Lower it for extraction, classification and code, but check your model first: several newer models only accept the default value.

A token is the unit of text a model reads and writes: usually a word, part of a word, a punctuation mark or a space-plus-word chunk. Providers bill and rate-limit by tokens, not characters or words, so the same text can cost different amounts on models with different tokenizers. Count tokens with the provider's tokenizer or counting API instead of guessing from string length.

Compare state-change interpolation with keyframe-driven playback, and learn which one each real interaction actually needs.

Learn the Block Element Modifier convention, why flat single-class selectors keep specificity constant, and where BEM still applies in a component-framework world.

Learn the three-column specificity calculation, where inline styles and !important sit in the cascade, and why specificity is only one tiebreaker among several.

Learn how flex-direction defines the two axes and why every alignment property in Flexbox is meaningless until you know which axis it targets.

Compare the two core Flexbox alignment properties by axis, by what they distribute, and by how their values differ.

Centre with Flexbox in two declarations, then compare Grid place-items and absolute positioning with transform on tradeoffs that actually matter.

See exactly how border-box redefines the width property, why it makes layouts composable, and where it can still bite you.

Understand the four layers every element renders as, and how the two box-sizing modes change what width means.

Learn where each lives in the box model, how their behaviour diverges, and the concrete cases where swapping them breaks a layout.

Compare the one-dimensional and two-dimensional layout models, then apply a concrete decision rule based on who controls the sizing.

Compare all five position values by whether they stay in flow, what they are offset from, and what each one is actually good for.

Compare absolute and relative CSS units by what they resolve against, and learn the accessibility and compounding consequences of each choice.

Compare min-width and max-width strategies by their base styles, override direction, and what each one does to specificity and performance.

One selects existing elements in a particular state, the other creates a sub-part that is not in the DOM. Learn the syntax, specificity, and limits of each.

Understand the anatomy of a React function component, how JSX compiles, and the rules that make a valid component.

Understand the key differences between functional and class components, why hooks changed everything, and why functional components are now the standard.

Understand the difference between props and state in React, when to use each, and how they interact to drive rendering.