Student Challenge

Overview

Your final task is to build a complete frontend web application that consumes the People API. You will use HTML, CSS, JavaScript, and the native Fetch API. Do not use any heavy JavaScript frameworks like React, Vue, or Angular for this challenge. Focus on raw DOM manipulation and network requests.

Required Features

1. Authentication

Create a login page. Users must authenticate through the API using their credentials. Do not hardcode user data. Store the resulting Bearer Token securely in memory or `sessionStorage`.

2. Dashboard

After a successful login, show the user's name, role, and profile information fetched from the /api/me endpoint.

3. People List & Profile View

Fetch the list of people from the API and display them in a clean UI grid or table. Clicking on a person should display their available information.

4. CRUD Operations

If the logged-in user has the `ADMIN` role, the UI should provide controls to Create, Read, Update, and Delete people using the respective API endpoints.

5. Error Handling & Loading States

Properly catch and handle HTTP error codes (401, 403, 404, 500) and display user-friendly error messages. Show loading indicators while API requests are pending.

Evaluation Criteria

You will be graded primarily on whether you understand how to consume an API. The evaluation focuses on:

• Correct usage of HTTP methods and JSON formatting.
• Correct usage of the `fetch()` API and async/await syntax.
• Sending authentication headers properly (Bearer or API Key).
• Understanding Authorization (hiding admin controls from normal users).
• Proper error handling.
• Dynamic UI rendering based on API data.

Note: While a good design is appreciated, a beautiful interface with incorrect API usage will not receive a passing grade.

Optional Enhancements (Bonus)

Once you finish the core requirements, you can optionally implement these features within the same project: