One component, three locales: Intl formatting and direction
Plural rules, digits, grouping, currency position, date order and "yesterday" all change with the locale, and none of it is hand-written. Switch to ar-EG: the layout flips because of dir="rtl", and the blue bar moves to the right because the CSS uses logical properties.
Some requirements touch every screen: performance budgets tied to Core Web Vitals, accessibility to WCAG 2.2 AA, localisation for many languages and directions, security boundaries (XSS, CSP, auth), and observability; deciding them at design time is cheap, retrofitting them is not, so bring the same checklist to every design.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a fonts limit of 2 to the budget example and a fonts value for each route; make /feed use 3 fonts.
Add hi-IN (Hindi) to the locale example with English-like plural forms, and check how the price is formatted.
Explain it without notes
What are Core Web Vitals, their "good" thresholds, and how do they shape a frontend design?
Which accessibility requirements would you write into a frontend design?
How do you prepare a React app for many languages, including right-to-left?
Where are the security boundaries in a React frontend, and what do you put in the design doc?
What would you monitor after launching a new frontend feature?
Preview
Console
Nothing logged yet.Expected console output
en-IN | 3 items in your cart | ₹12,34,567.50 | 15 Jan 2024 | yesterday
de-DE | 3 Artikel im Warenkorb | 1.234.567,50 ₹ | 15.01.2024 | gestern
ar-EG | ٣ منتجات في السلة | ١٬٢٣٤٬٥٦٧٫٥٠ ₹ | ١٥/٠١/٢٠٢٤ | أمس