Description
The user profile page ([USER_PROFILE]) currently has static, hardcoded HTML elements for the [HOT_STREAK], [SPEEDRUN], and [UP_LINK] badges inside the #badge-wall container. This issue covers updating the frontend logic to conditionally render these badges using dynamic data fetched from the backend API.
Requirements
- Dynamic Integration: Update the profile frontend script to check the user data returned by the
/api/student/:username endpoint.
- Conditional Rendering:
- Parse the
badges array from the API payload (e.g., ["HOT_STREAK", "UP_LINK"]).
- Clear the hardcoded placeholders on load.
- Dynamically inject and show only the badges the student has actually earned.
- Empty State Handling: If the API returns an empty array
[] or no badge data, gracefully hide the badge elements or clear the container so zero active badges are shown.
Description
The user profile page (
[USER_PROFILE]) currently has static, hardcoded HTML elements for the[HOT_STREAK],[SPEEDRUN], and[UP_LINK]badges inside the#badge-wallcontainer. This issue covers updating the frontend logic to conditionally render these badges using dynamic data fetched from the backend API.Requirements
/api/student/:usernameendpoint.badgesarray from the API payload (e.g.,["HOT_STREAK", "UP_LINK"]).[]or no badge data, gracefully hide the badge elements or clear the container so zero active badges are shown.