Frontend Developer Checklist

Functionality

Main success flow works end-to-end
All user actions produce the expected result
API is called with the correct payload
API response is handled correctly
Success state is shown after action completes
Empty state is handled with no blank or broken screens

Forms

Every field has a visible label
Required fields have a star (*)
Required fields have validation that fires on submit
Field-level errors are shown near invalid fields
Form values are not cleared when API call fails
Success message or action is shown after successful submit
Submit button is disabled and shows loading state during request
Duplicate/conflict error is shown if backend returns 409

Error Handling

API error is shown in the UI, not only in console.log
401 UNAUTHENTICATED redirects to login or shows session expired
403 FORBIDDEN shows permission error and hides/disables action
422 VALIDATION_ERROR shows field-level errors
500 INTERNAL_ERROR shows retry message
No silent failures anywhere
Error messages are user-friendly, not raw API error codes

Loading States

Submit button shows loading text or spinner during API call
Submit button is disabled during API call
Table/list shows skeleton or loader while fetching data
Delete button shows deleting state during delete action
Every async action shows visual feedback while in progress

Consistency

Edit form matches Add form for the same entity
Same component is used for Add and Edit
Same validation schema is used for Add and Edit
UI follows project design system: colors, spacing, buttons
Page feels consistent with similar pages in the product

Permissions & Access

Correct actions are hidden or disabled for unauthorized roles
Viewer role cannot see or trigger write actions
Non-members are not exposed to other workspace data
Permission-denied state is handled gracefully

Mobile

Mobile layout checked at 360px–414px width
Tablet layout checked at 768px
Forms are full-width on mobile
Buttons are touch-friendly size
No text overflow or broken alignment on small screens
Mobile menu/nav works if affected

Code Quality

No duplicate form/component code
No hardcoded values that should come from config/constants
No console.log statements left in production code
No commented-out dead code blocks left in
Component is reused if same UI exists elsewhere