User Profile — UI Challenge | FineFrontend

Practice workspaceSign in

React/User Profileeasy

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

User interface challenge

User Profile

easy15 min

Build a simple user profile card. Fetch the supplied demo API once when the component mounts, save its JSON response in state, and render the name, email, and city.

Demo API: GET /api/demo/user on this app. It returns fictional public data: { "id": 1, "name": "Maya Patel", "email": "maya@example.com", "city": "Pune" }. No login or API key is needed.

In the sandbox, import APP_ORIGIN from /__frontcrate_api__.js and fetch APP_ORIGIN + "/api/demo/user". The starter comment includes this URL.

Requirements

Fetch the demo user's JSON automatically when the component mounts. Use useEffect with an empty dependency array in React, onMounted in Vue, or ngOnInit in Angular.
Save the response in framework state and render its name, email, and city. Do not hard-code the values.
Show Loading user... in user-status with role=status until the request finishes. Hide the profile while loading.
Check response.ok. If the request fails, show Could not load user. in user-error with role=alert, and hide the loading message and profile.
Render values as ordinary text. Keep the supplied user-card, user-name, user-email, user-city, and user-status data-testid attributes; add user-error for failures.
The starters contain static markup and minimal framework setup only. Add the fetching and state logic yourself.
No load button, retry controls, separate loading state, caching, request deduplication, or cancellation is required. React Strict Mode may repeat effects in development; no special handling is expected.

Examples

Example 1

Input: Component mounts
Output: Loading user...

Example 2

Input: API returns a user
Output: Maya Patel / maya@example.com / Pune

Example 3

Input: API request fails
Output: Could not load user.

Mount → fetch the demo API → store the response → render the profile. The test runner uses controlled API responses.

What the tests check

Fetches on mount and shows loading
Renders the user's name, email, and city
Renders response values rather than hard-coded data
Shows an error for an unsuccessful HTTP response
Shows an error for a network failure
Renders profile values as safe text

References

Using Fetch

AsyncAPIStateFetchComponent lifecycleConditional rendering

Back

Preparing your workspace…