Problem Statement
Currently, when a teacher logs into the LecturePulse dashboard for the first time or has no recorded data, the main interface displays a large, empty rectangular dashed container with only three dots (...) in the center.
This creates a few UX issues:
- It leaves significant dead space that feels incomplete or broken rather than clean.
- The alignment feels asymmetric because the layout doesn't immediately direct the user's eye to an actionable next step.
- It relies entirely on the top-right
+ Create Lecture button, missing a clear, localized Call-to-Action (CTA) in the primary viewport.
Proposed Solution
I propose replacing the blank dotted container with an intentional empty-state layout when totalLectures == 0.
Specific Changes:
- Conditional Rendering: Detect when the lectures array/count is empty.
- Symmetrical UI Layout: Replace the current box with a centered wrapper using flexbox/grid layout.
- Primary CTA: Place a prominent "Create Lecture" button directly in the center of the screen, accompanied by a short, friendly onboarding microcopy (e.g., "No lectures found. Get started by creating your first one!").
This immediately fixes the dashboard symmetry and provides a seamless onboarding flow for new users.
Alternative Approaches
- Keeping it as-is: The current empty placeholder looks like a loading state or an unrendered component, which degrades the perceived visual polish of the application.
- Adding an illustration only: While a graphic looks nice, it doesn't solve the core UX goal of driving user action as effectively as a centered CTA button does.
Affected Area
Mockups / Additional Context
Current empty state displaying the asymmetric box with three dots:
💡 Note to Maintainers: I would love to take this up and implement the UI changes. Please assign this issue to me if the proposal looks good under SSOC'26!
Problem Statement
Currently, when a teacher logs into the LecturePulse dashboard for the first time or has no recorded data, the main interface displays a large, empty rectangular dashed container with only three dots (
...) in the center.This creates a few UX issues:
+ Create Lecturebutton, missing a clear, localized Call-to-Action (CTA) in the primary viewport.Proposed Solution
I propose replacing the blank dotted container with an intentional empty-state layout when
totalLectures == 0.Specific Changes:
This immediately fixes the dashboard symmetry and provides a seamless onboarding flow for new users.
Alternative Approaches
Affected Area
Mockups / Additional Context
Current empty state displaying the asymmetric box with three dots:
💡 Note to Maintainers: I would love to take this up and implement the UI changes. Please assign this issue to me if the proposal looks good under SSOC'26!