SAMPLE TICKET / DEMO MODEJF-2048
Add an empty state to the project dashboard
Priority
Medium
Difficulty
Easy
Estimated
60–90 minutes
Company context
Flowdesk is a small project-management SaaS used by distributed product teams. New users currently land on a blank dashboard before creating their first project.
The problem
The dashboard renders an empty white panel when the projects array has no items. Support reports that trial users assume the product is broken and leave before creating a project.
Objective
Create a clear, accessible empty state that explains the next step and helps first-time users create their first project.
Requirements
- Show the empty state only when the projects request succeeds with zero items.
- Include a heading, short description, and primary “Create project” action.
- Keep the existing project grid unchanged when one or more projects exist.
- Use the design system components already available in the codebase.
Acceptance criteria
- Given an empty projects array, the empty state is visible.
- Given at least one project, the existing project grid is visible instead.
- The primary action navigates to /projects/new.
- The state is keyboard accessible and works at 320px viewport width.
Technologies
ReactTypeScriptTailwind CSS
Likely files to modify
src/app/dashboard/page.tsxsrc/components/projects/empty-state.tsxsrc/components/projects/project-grid.test.tsxStarting hint
Start by locating where loading, error, and successful project states branch. The empty state belongs in the successful branch.
Common mistakes
- Showing the empty state briefly while the request is still loading.
- Using array truthiness instead of checking its length.
- Adding a clickable div instead of a semantic link or button.