debugfest / debugfest/mern-todo-list

Bug Report: Add Validation and Friendly Error Messages for Creating Todos

Open
#3 0 comments 0 reactions 0 assignees View on GitHub
bug good first issue hacktoberfest
Dominant language
TypeScript
Stars
1
Forks
4
PR merge metrics
No merged PRs in 30d

Description

The app currently allows adding empty or invalid todos, which affects usability. Implementing validation on both frontend and backend ensures better data integrity and clearer feedback for users.

### 🎯 Proposed Solution
- Add client-side validation to prevent empty input submission.
- Add server-side validation to reject invalid or missing data with `400` status.
- Display user-friendly error messages in the UI (inline or toast notifications).

### ✅ Expected Behavior
- Users cannot submit empty todos.
- Clear and consistent error messages are shown for invalid inputs.
- Server returns structured JSON error responses.

### 💻 Technical Notes
- Frontend: `App/src/components/TodoForm.tsx`
- Backend: `App/server/server.js`
- Handle and display API errors gracefully.

### 🧪 Test Steps
1. Try submitting an empty todo → frontend blocks submission.
2. Force a server validation error → frontend shows proper message.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.