feat: add confetti celebration when users complete a tutorial

[Mishu03]

🎃 Hacktoberfest Contribution — Add Confetti Celebration

✨ Summary

This PR adds a fun and engaging confetti animation that appears when a user successfully completes a tutorial. It enhances the user experience by adding a celebratory visual cue, making learning on the platform more interactive and rewarding.

🧩 Implementation Details

• Integrated canvas-confetti (already listed as a dependency).

• Added a triggerConfetti() function to fire a short confetti burst.

• Hooked it into the tutorial completion event (e.g., when the “Mark as Complete” button is clicked).

• Ensured performance and accessibility:

• Lightweight effect, tested on both desktop and mobile.

• Added polite ARIA message for screen readers.

• Added basic error handling (fallback if confetti fails).

🧪 Testing Done

• Verified locally with npm start.
• Successfully built and served with npm run build → npm run serve.
• Passed formatting and lint checks (npm run lint:fix, npm run format).

💡 Why This Change?

• Adds a positive reinforcement moment for learners.
• Creates a more joyful and memorable tutorial experience.
• Small, safe enhancement aligned with Hacktoberfest’s spirit of improving UX with simple, meaningful contributions.

🚀 Future Ideas

• Add an option to toggle celebrations in user settings.
• Customize colors or confetti patterns per tutorial theme.

✅ Checklist

• Feature works as expected
• No console errors
• Tested on multiple browsers
• Follows repo’s contribution and formatting guidelines

[vercel]

@Mishu03 is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[iitzIrFan]

Please do mention the issue you have worked on ! @Mishu03