[FEATURE]: Improved Error Handling and User Feedback using Structured JSON Responses and Toast Notifications

[aneesafatima]

Feature and its Use Cases

What is the feature?

I have noticed that in several places in the web version of the project, the frontend is not using the structured JSON error responses that are being sent from the backend. Instead, the frontend is relying on constant text integrations or generic error messages such as “Something went wrong” or “Error uploading file”.

This leads to a loss of detailed error information that is already being constructed and returned by the backend.

Additionally, in multiple cases (for example, on the upload page), the input box itself is being used to represent error messages. This does not provide a good user experience because:

• The error message remains inside the input field.
• When the user clicks again on the input box, the message still remains.
• It makes the UI look cluttered and unclear.

I would like to improve this by:

• Properly parsing and using the backend JSON error responses in the frontend.
• Introducing a reusable, color-coordinated pop-up (toast) component that:
  • Displays error messages
  • Displays success messages
  • Displays informational messages
• Removing the usage of input fields as error-display containers.

The pop-ups will change their colors depending on the type of message:

• Red for errors
• Green for success
• Blue (or another suitable color) for informational messages

This will provide a consistent and clean way of handling user feedback across the application.

---

How would the users benefit from it?

• Users will see the exact error message returned by the backend instead of a generic fallback message.
• The UI will remain clean and structured instead of mixing input fields with error content.
• Feedback (success, error, or informational) will be clearly separated from user inputs.
• The application will feel more responsive and polished.
• It will reduce confusion when something fails, since the message will be explicit and context-aware.

---

What scenarios would this feature address?

This feature would address scenarios such as:

• File upload failures where the backend already sends specific messages (e.g., unsupported file type, processing errors), but the frontend currently hides them.
• Quiz generation errors where detailed backend responses are not surfaced properly.
• Any API call failure where structured JSON error responses exist but are not being used.
• Situations where multiple types of feedback (error, success, information) need to be shown in a consistent way.

This change would improve user experience significantly while keeping the UI clean and structured.

Additional Context

I would like to work on this feature and contribute the implementation if it aligns with the project direction. Please let me know if I can be assigned.

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates