debugfest / debugfest/mern-todo-list
Bug Report: Add Validation and Friendly Error Messages for Creating Todos
- 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
Assessment
This issue has not been assessed yet.