[Good First Issue] Add reusable API error banner component to frontend

[Oshgig]

Overview

When the API returns a 401 (missing API key) or 500 (inference error), the frontend currently fails silently or shows a generic browser error. We need user-friendly error messages.

Scope

• Create a reusable ApiError component in frontend/src/components/ui/
• Display the error message from the API response (e.g., "API key required. Include X-API-Key header.")
• Wire it into:
  • NewAnalysis.tsx — show error if prediction fails
  • Upload.tsx — show error if upload fails
• Style with Tailwind: red border, error icon from lucide-react, dismiss button
• Ensure the error component is responsive

Acceptance Criteria

• When a user submits a prediction without cv_dev key, they see a red banner saying "API key required" instead of a blank screen
• Error banner can be dismissed via an X button
• Component renders correctly on mobile viewport

Resources

• frontend/src/pages/NewAnalysis.tsx
• frontend/src/pages/Upload.tsx
• lucide-react — AlertCircle, X icons

Difficulty: Beginner-friendly
Labels: good first issue, frontend, ux

[S-Garvit]

Hi 👋
I’d like to work on this issue.

I’ve gone through the frontend code and understand the required changes (creating a reusable API error banner and integrating it into relevant pages). I’ll start working on it.

[Goldokpa]

Hey @S-Garvit, awesome — thanks for jumping on this!

Sounds like you've got a good handle on the scope. A few pointers:

• Use AlertCircle and X from lucide-react for the icons
• Keep it responsive — test on mobile viewport
• The component should be dismissible via the X button

Looking forward to your PR. Don't hesitate to reach out if you have questions!

[RohitGRathod]

I would like to work on this issue