Add Empty State Illustrations for Notes, Flashcards, Quizzes, and Tasks

[Pavithra-Devadiga]

Description

Currently, when users have no content (such as notes, flashcards, quizzes, or tasks), the application displays minimal feedback or blank screens.

Adding informative empty states with illustrations, icons, descriptive messages, and call-to-action buttons will provide a better user experience and guide users on what to do next.

Proposed Changes

• Add an empty state for Notes.
• Add an empty state for Flashcards.
• Add an empty state for Quiz History.
• Add an empty state for Tasks.
• Include an illustration or relevant icon.
• Add a short descriptive message.
• Add a CTA button (e.g., Create Note, Generate Flashcards, Start Quiz, Add Task).
• Ensure responsiveness and theme consistency.

Example

📚 Notes

No Notes Yet

Start by creating your first note to organize your study materials.

Button: Create Note

---

🃏 Flashcards

No Flashcards Found

Generate your first flashcard set and start practicing.

Button: Generate Flashcards

---

📝 Quiz History

No Quiz Attempts

Take your first quiz to track your learning progress.

Button: Start Quiz

---

✅ Tasks

No Tasks Available

Create your first study task and stay organized.

Button: Add Task

Expected Outcome

• Better onboarding experience.
• More engaging empty screens.
• Improved usability.
• Consistent UI across the application.

Additional Information

This enhancement improves user engagement by providing clear guidance instead of blank or empty pages, making the application more intuitive for first-time users.

---

@lovelymahor Please assign this issue to me under GSSoC'26. I would love to work on this enhancement. Thank you!

[aaniya22]

please assign this to me under gssoc'26

[Youngmaster0304]

please assign this task to me under gssoc'26

[vmdivyareddy18]

/claim