Implement Onboarding Process

[puneetnith28]

Feature: Add onboarding flow for new and logged-out users

Summary

This PR introduces a 6-step interactive onboarding flow that guides new and logged-out users through BrowsePing’s core features.

What’s Included

• New OnboardingFlow component with step navigation and progress indicator
• Automatic onboarding display for logged-out users
• Ability to revisit onboarding from Welcome and More pages
• Fully responsive layout

Notes

• UI-only feature, no backend changes
• Existing content and flows remain unaffected

Screenshots:------------->>>>>>

Closes #16

[puneetnith28]

Hello @akash-kumar-dev

As per discussion I make the commit in the new branch.
Please check it and let me know if any changes are required

[Copilot]

Pull request overview

This PR implements a 6-step interactive onboarding flow for BrowsePing to help new and logged-out users understand the extension's core features. The onboarding automatically displays when logged-out users access the extension root path and can be revisited via an "Explore Again" button on the Welcome screen.

Changes:

• Added new OnboardingFlow component with 6 informational steps and progress indicators
• Modified routing logic to automatically redirect logged-out users to onboarding
• Updated WelcomeScreen with "Explore Again" button to access onboarding

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 10 comments.

File	Description
src/popup/components/onboarding/OnboardingFlow.tsx	New component implementing the 6-step onboarding flow with navigation controls and progress indicators
src/popup/components/onboarding/index.ts	Export file for the OnboardingFlow component
src/popup/router/AppRouter.tsx	Added onboarding routes and automatic redirect logic for logged-out users
src/popup/components/welcome/WelcomeScreen.tsx	Added "Explore Again" button and adjusted spacing/styling

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[akash-kumar-dev]

Hi @puneetnith28, I've reviewed the functionality, and the implementation is very good. I've addressed the suggestions from the code review. The only change I'm requesting is that when a user has completed the onboarding tutorial and is on the login or signup page, clicking the back button should return them to the previous page, not restart the onboarding flow. To achieve this, you could either directly modify the back button routes, or track the onboarding completion status, or create separate routes for starting the onboarding and for the login/signup pages, choose any implemnation idea that looks good to you.

[puneetnith28]

Hello @akash-kumar-dev
I made the required changes please review it and let me know if any changes are required!!

[akash-kumar-dev]

Hi @puneetnith28, I've addressed the remaining issues. I've made changes to save onboardingCompleted to localStorage instead of sessionStorage. This ensures users see the onboarding flow appropriately when reopening the popup. Additionally, I've updated the back buttons on the signup, login, and verify pages to redirect to #welcome.

Looking forward to your feedback after testing it locally.

Everything looks good from my perspective. Thanks for your valuable contributions, @puneetnith28! Apologies for the delay in reviewing this PR; I've been quite busy lately.

[puneetnith28]

Hello @akash-kumar-dev

I check on my local the changes u made and i think the back button on the login/signup page and the verify page is not redirect to the #welcome, it redirect to the just one page before!

[puneetnith28]

Thanks a lot for the review and for merging the PR!
I really appreciate the feedback and the improvements you suggested , learned a lot from this.
No worries at all about the delay, totally understandable 😊.

Looking forward to contributing more in the future.
Thanks again for your support! 🙌

[akash-kumar-dev]

Hello @akash-kumar-dev

I check on my local the changes u made and i think the back button on the login/signup page and the verify page is not redirect to the #welcome, it redirect to the just one page before!

Yes, that one step back is the #welcome page. This resolves the onboarding flow only appearing once; previously, after going back from signup/login, it would restart, but now it just returns to the previous page.

[puneetnith28]

Hello @akash-kumar-dev
I check on my local the changes u made and i think the back button on the login/signup page and the verify page is not redirect to the #welcome, it redirect to the just one page before!

Yes, that one step back is the #welcome page. This resolves the onboarding flow only appearing once; previously, after going back from signup/login, it would restart, but now it just returns to the previous page.

Thanks for clarifying! I misinterpreted it earlier.