Build your frontend skills.

Build a click counter with one button. Its label starts at Clicks: 0 and increases by one whenever the button is activated.

Implement arrayMap to recreate the core behavior of Array.prototype.map using a loop. Work with a standalone function that receives the array as its first argument.

Implement arrayFilter to recreate the core behavior of Array.prototype.filter using a loop. Work with a standalone function that receives the array as its first argument.

Implement arrayReduce to recreate the core behavior of Array.prototype.reduce using a loop. Work with a standalone function that receives the array as its first argument.

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.

Build a controlled contact form with Name, Email, and Message fields. Keep each field in framework state and update it as the user types. On submission, display a snapshot of the entered values without reloading the page. This is a local form exercise: no API, email delivery, or backend is required. The starter intentionally contains only a form and one empty text input.

Implement a real React hook that manages boolean state and exposes convenient methods to enable, disable, toggle, or directly update it. Use the JavaScript or TypeScript variant and keep the interface identical. Call this hook inside a React component. The supplied tests render React components and inspect the hook again after updates.

Implement a React hook that behaves like useState but exposes a default value whenever its raw state is null or undefined. Other falsy values, including false, 0, and an empty string, remain unchanged. The default is derived during rendering. The returned setter still manages the underlying raw state.

Implement promiseReject(reason), a standalone version of Promise.reject for the standard native Promise constructor. Always return a fresh Promise rejected with the exact reason supplied. A Promise or thenable passed as the reason must remain the rejection reason; do not adopt it.

Implement invertObject(object), a utility that swaps an object's keys and values. Each input value becomes an output key, and its original key becomes the output value. For example, { first: "red", second: "green" } becomes { red: "first", green: "second" }. This is a shallow transformation: the input contains only string or number values.