Skip to content

Add error toast notifications #28

@RossCabrera

Description

@RossCabrera

Overview

Implement error toast notifications throughout the app to provide users
with clear, actionable error messages from API responses.

Toast System Components

  • Toast provider (wrapper)
  • useToast() hook for components
  • Toast display (top-right, auto-dismiss, etc.)
  • Different variants: success, error, warning, info

Error Cases to Handle

  • Network errors (offline)
  • Server errors (5xx)
  • Client errors (4xx)
  • Validation errors (from API)
  • Timeout errors
  • Authentication errors

Implementation Library

  • react-hot-toast, sonner, or react-toastify
  • Customizable styling
  • Accessible (ARIA announcements)

Acceptance Criteria

  • Toast notifications display
  • Error messages from API shown
  • Success messages shown
  • Toasts auto-dismiss (e.g., 5 seconds)
  • Manual dismiss available
  • Accessible (screen readers)
  • Don't block user interactions
  • Styling matches design

Related Issues

  • Depends on: Phase 3, 4

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestfrontendUser interface, client-side logic, components, styling, and user interactions.ux/uiUI design and user experience improvements like layouts, components, and user flows

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions