Amazon JavaScript Frontend Developer Interview Questions & Answers

At a high level, the frontend helps riders find stations, check live bike and dock availability, select a station, start or end a rental, and follow an active trip. I would use a React single-page application with client-side rendering and route-based code splitting. URL state owns routes and filters, while shared client state owns auth, stations, trip, and UI data. A service worker and browser cache help on weak networks. The main trade-off is more browser complexity for faster navigation and better resilience.

The goal is to give riders a fast and reliable bike-sharing experience on mobile and desktop. A rider should discover nearby stations, see current bikes and docks, open a station, start or end a rental, and understand an active trip. The hard part is keeping availability fresh while mobile networks may be slow or unstable. I would organize the frontend around delivery, routes and components, state ownership, remote data, weak-network behavior, and accessible interaction.

• How fresh must bike and dock availability be?
• Should the app remain useful when the rider is offline?
• Which mobile and desktop browsers must we support?
• Must every map action also be available through the station list?
• Does the Bike-sharing Backend API support idempotent start and end rental requests?
• How many languages must the frontend support?

The rider downloads the frontend from the CDN. It serves the static site, JavaScript and CSS bundles, images, fonts, and map tiles. Long cache times can be used for versioned static files.

The browser runs a React single-page application using client-side rendering. This works well because the experience is highly interactive. Code splitting means each route loads only the JavaScript it needs.

The App Shell contains the Header, Main area, and mobile Bottom Nav. It gives all routes one responsive layout.

The main routes are /map, /station/:id, /trip, and /profile. The Map View helps riders explore nearby stations. The Station Detail route shows live bikes and docks and provides rent or return actions. The Active Trip route shows the trip timer and route.

Important reusable components include Map, StationList, StationCard, RentButton, and TripBanner. The StationList is also the accessible alternative to the map. A rider can use it with a keyboard or screen reader without depending on map interaction.

URL state owns the current route and filters. This makes navigation and filtered views shareable and predictable.

Shared client state, such as Context or Redux, owns auth, stations, trip information, and shared UI data. Local UI state owns short-lived values such as dialogs, forms, and modal state. Persisted state can use browser storage and cached data for useful information that should survive reloads.

Geolocation is a browser capability. The app asks for permission before using the rider's location to find nearby stations.

The browser sends HTTPS and JSON requests to the Bike-sharing Backend API. That external service provides stations, availability, rental actions, and trip status. The Identity Provider handles sign-in through OAuth or OIDC. The Maps Provider supplies map tiles, directions, and geocoding.

Availability can change quickly. The frontend can use polling or a WebSocket for fresh bike and dock counts. Shared Stations State then updates the Map View, StationList, and Station Detail from the same data.

The UI has clear loading, empty, partial or stale, error, and offline states. Stale means the displayed information may be older than the latest remote result. The app should show this state instead of presenting old availability as current.

The browser cache speeds up assets and useful responses. The service worker supports cached application files and offline behavior. This helps the shell remain usable when connectivity is poor.

To prevent duplicate rentals, the RentButton becomes disabled after the first click while the request is pending. The request also carries an idempotency key so repeated submissions can represent the same operation. The backend remains responsible for enforcing the real rental rule.

The layout adapts to mobile and desktop screens. The frontend uses semantic HTML, ARIA where needed, keyboard support, and screen-reader friendly controls. Localization, or i18n, lets the same interface support different languages.

The main trade-off is complexity. Shared state, live updates, browser caching, and a service worker make the client harder to build and test. The benefit is faster navigation and a more dependable experience on real mobile networks.

At a high level, I would make the SDK the only supported path for this application traffic. The main challenge is applying the same throttling, retries, cancellation, and browser lifecycle rules across several apps. Every SDK call goes through normalization, rate limiting, scheduling, retry handling, and transport. Browser storage supports offline recovery when needed. The trade-off is more SDK complexity, but callers get consistent limits, errors, cleanup, and observability.

The goal is to give several browser applications one safe way to call remote services. Sending one HTTP request is simple. The harder problem is controlling many requests when the network is slow, the browser goes offline, a tab becomes hidden, or the service returns errors. I would solve this with one browser JavaScript SDK that owns the complete request pipeline. Applications use its public API. The SDK then applies configuration, throttling, scheduling, retries, cancellation, error handling, persistence, and observability.

• Which browsers must the SDK support?
• Which requests are safe to retry?
• Do we need offline queueing?
• Are throttling limits global or different by endpoint?
• Which writes require an idempotency key?
• Which logging and metrics hooks must applications provide?

The consumer web app creates one SDK instance. It calls typed SDK methods instead of raw fetch or XHR for this traffic. This developer contract prevents callers from bypassing throttling and scheduling.

The Public API Layer validates inputs and accepts options. Configuration contains base URLs, throttling limits, retry policy, timeouts, and headers. Context and State adds auth data, device or app information, feature flags, locale, and timezone.

The Request Normalizer serializes, validates, and enriches each request. The Throttle and Rate Limiter then applies a token bucket, a concurrency limit, and a queue. A token bucket controls how quickly work may start.

The Scheduler prioritizes queued work, dequeues the next item, and dispatches it. Because all SDK traffic uses this path, applications cannot skip the shared limits.

The Retry Handler first checks whether a failed request may be retried. It uses exponential backoff with jitter, so later retries wait longer and include a small random delay. Retries stop after the configured maximum attempts.

For operations that need protection against repeated effects, callers provide an idempotency key when required. The SDK does not assume every request or every error is safe to retry.

The Transport uses fetch or XHR. It supports abort behavior and optional keepalive behavior. Cancellation uses AbortController and can cancel one request or a request group.

Responses return to the application as Promise results. Network, timeout, and HTTP failures pass through the Error Normalizer. This gives applications one stable SDK error shape.

The Browser Environment tracks online or offline state, visibility changes, network variability, and multi-tab conditions. Browser Persisted State can use LocalStorage for config or flags, IndexedDB for an offline queue, cookies for session or auth data, and Cache Storage for assets or service-worker data.

Lifecycle handling covers page unload, hidden tabs, before-unload work, reconnecting, tab close or refresh, and memory pressure. The SDK can pause, persist, resume, flush best-effort work, or abort in-flight requests when appropriate.

Observability exposes events, pluggable logging, metrics, and timing hooks. These signals can flow to external monitoring or analytics systems. The SDK prefers ES modules, can offer UMD or IIFE fallbacks when needed, remains tree-shakeable, provides TypeScript types, and avoids Node.js-only APIs. The downside is more SDK code, but applications get consistent behavior and easier debugging.

At a high level, I would make the news site fast to open, easy to navigate, and resilient when outside services fail. I would use hybrid rendering: SSR or streaming for article detail and other time-sensitive pages, SSG for static pages, and CSR for rich interactions and client transitions. React components own the UI, TanStack Query or SWR owns remote data, URL state owns navigation choices, and local or shared state handles UI preferences. CDN caching, accessible components, fallback states, and feature flags keep the experience fast and safe.

The goal is to help readers find and read news quickly on mobile and desktop, even on weak networks. The hard part is balancing fresh content, SEO, fast rendering, video, advertising, and reliable navigation. I would use a React and TypeScript application with hybrid rendering. The delivery path uses DNS, a CDN and edge layer, static assets, browser caching, and a service worker. Inside the app, I would separate routes, reusable modules, state ownership, remote data, resilience, accessibility, observability, and rollout controls.

• How fresh must breaking-news pages be?
• Which routes need strong SEO?
• Should recently visited articles work offline?
• What accessibility and localization targets are required?
• How much third-party advertising and video code is expected?

For the first load, the browser reaches the site through DNS and the CDN or edge layer. Article detail and other time-sensitive pages use SSR or streaming, which sends useful HTML early. Static pages can use SSG, which prepares HTML before the request. Rich interactions and later route changes use CSR.

Static JavaScript, CSS, images, fonts, and video assets come through the CDN. The browser cache stores reusable files. Code splitting means loading only the JavaScript needed for the current route.

The routes are /, /latest, /category/:id, /article/:id, /search, and /author/:id. The shared shell contains the header, sidebar or trending area, top ad slot, and footer.

Reusable modules include ArticleList, ArticleCard, ArticleDetail, MediaPlayer, ImageGallery, VideoPlayer, Comments, AdSlot, RelatedArticles, NewsletterSignup, Breadcrumbs, ShareBar, Skeleton, ErrorBoundary, NotFound, and ConsentBanner.

Remote data uses TanStack Query or SWR for caching, revalidation, and invalidation. Shared client state can hold theme, authentication, and preferences. URL state keeps query parameters, filters, sorting, and pagination. Local React state handles forms, modals, and toggles.

The frontend calls the News or CMS API for articles, sections, authors, tags, search, and configuration. Auth, Search, Comments, Ads, Analytics, Video, and A/B Testing or Feature Flags remain separate external boundaries.

A request can end in success, empty, partial, error, aborted, stale, or offline state. When navigation replaces old work, the app should cancel requests where possible and ignore stale responses, meaning older results that arrive after newer work.

Loading uses skeletons. A failed section can degrade without breaking the whole page. ErrorBoundary protects larger UI areas, while NotFound handles missing content.

The service worker precaches the shell and can keep runtime copies of articles, images, and API responses. Offline users can read saved or recently visited articles. Ad and video code should be isolated, such as with sandboxed frames when appropriate, so a slow provider does not break article content.

The UI uses semantic HTML, ARIA where needed, keyboard navigation, focus management, good contrast, responsive breakpoints, RTL support, and localization. Performance work includes lazy loading, image optimization, preload or preconnect hints, and route-level code splitting.

Real User Monitoring tracks Web Vitals. Error reporting captures frontend failures. Feature flags support gradual rollout, A/B testing, a kill switch, and rollback. The downside is complexity because more rendering modes, caches, fallback states, and integrations need careful testing.

The goal is to show useful search suggestions quickly while the user types. The main challenge is keeping results correct when typing and networks are slow. I would deliver an SSR or SSG initial shell, then let the browser Typeahead Component handle interaction. Each query is debounced, cached, and sent through cancellable fetch logic. Old responses are ignored. The UI covers loading, empty, error, stale, and offline states. The trade-off is that caching improves speed but can return older suggestions.

The user should see useful prefix-matched suggestions while typing into the /search page. Empty input should hide the dropdown, and selecting a result should fill the input. The main frontend problem is keeping suggestions fast and correct when users type quickly or connections are slow. I would deliver an SSR or SSG initial HTML shell with critical CSS, then let browser JavaScript handle the interactive typeahead. I would divide the design into component state, request handling, caching, resilience, accessibility, delivery, and measurement.

• How fresh must suggestions be?
• Which browsers, devices, and network conditions matter most?
• Should suggestions depend on locale or personalization?
• Do we need useful offline behavior?
• What accessibility target must we support?
• How safely must new frontend versions be rolled out?

The browser reaches the application through DNS and TLS. Static assets come from the CDN. These include JavaScript code-split chunks, CSS, fonts, images, and icons.

The initial shell can be produced with SSR or SSG. After loading, browser JavaScript owns the typeahead interaction. A service worker can cache assets and help with offline fallback.

The /search route contains the Typeahead Component. Its local UI state contains query, isOpen, highlightedIndex, isLoading, error, and abortController.

The URL can keep the query, such as ?q=wire. Shared client state keeps lastResults, recentQueries, featureFlags, and locale. The browser also has an in-memory LRU cache, sessionStorage for recent queries, and optional IndexedDB for offline results.

The component waits about 150 to 250 milliseconds before sending a request. This debounce reduces unnecessary calls while the user is still typing. Very short prefixes, such as fewer than two characters, do not send a request.

Before a new fetch starts, the client cancels the previous in-flight request with AbortController. The request sends query, locale, and limit to the Search Suggest API. The API returns stable ids, text, highlight data, and score.

If an older response arrives late, the client ignores it. A valid response updates the cache and state, then opens the dropdown. Stable result IDs help the UI keep each visible suggestion tied to the correct result.

Empty input keeps the dropdown hidden. Loading shows a skeleton. Success shows suggestions. No matches shows an empty state.

A real failure shows an error and retry action. Aborted or stale work is ignored because newer input has replaced it. When offline, the browser can show the last cached results when available.

The input uses ARIA combobox behavior. aria-expanded reports whether the list is open. aria-activedescendant points to the highlighted suggestion, and live-region updates help screen readers.

Arrow keys move through results. Enter selects one. Escape closes the list. The design also supports mobile widths, touch targets, scrolling inside the dropdown, locale-aware text, RTL layouts, translated labels, and local number or date formats when needed.

I would measure time to first suggestion, debounce delay, cache-hit ratio, and P95 or P99 latency. Client timing can use the Performance API.

Analytics can record typed, fetched, shown, selected, aborted, and error events. Error reporting and session replay help diagnose problems. Feature flags support gradual rollout. The build path runs CI checks, creates route and component bundles, publishes immutable files to object storage and CDN, uses browser caching, and supports monitoring and rollback.