Added Study Progress Tracking Feature

Today, I worked on implementing a progress tracking feature for the Certamen App. This feature visually displays a user's study progress, showing the number of completed, in-progress, and unstarted lessons for each category.

Changes Made

1. Added progress bars to the StudyBox component to represent user progress.
2. Used Tailwind CSS to create a dynamic, color-coded progress bar that updates based on user data.
3. Updated the Firebase database schema to store lesson statuses (completed, in-progress, unstarted).
4. Ensured that the progress bar dynamically updates whenever the user completes a lesson.

Challenges

The biggest challenge was calculating the progress dynamically while ensuring that the UI remained performant. To solve this:

• I added a helper function in the /lib folder to compute progress percentages.
• Used React's useEffect to trigger re-renders only when lesson data changes.

Technologies Used

• Tailwind CSS for styling the progress bar.
• Firebase for real-time data updates.
• React hooks (useEffect, useState) for dynamic updates.

Outcome

The feature works smoothly! Users now have a clear visual indicator of their study progress, which is both motivating and informative.

What's Next?

Next, I plan to add a hover tooltip to each progress bar segment to display detailed stats (e.g., the number of lessons completed). Stay tuned!