FE: Add Interactive Guided Tour (Onboarding) for New Users

[jpdevhub]

Description

The Idea
When a user signs up for the first time, they should get a quick, 3-step interactive tour explaining how to use the app (e.g., "Click here to scan," "This is the Grad-CAM explanation," "Check the Trust Map").

What needs to be done

• Integrate a library like react-joyride or build a custom guided tour.
• Trigger the tour only on the user's first visit (store completion status in localStorage or backend).
• Highlight the Scanner, Analysis Dashboard, and Market Map.

[priiyanshu-kumar]

Hi @jpdevhub 👋

I would like to work on this issue under SSoC 2026.

I have reviewed the requirements and understand that the task involves implementing an interactive onboarding tour for first-time users, highlighting key sections such as the Scanner, Analysis Dashboard, and Market Map.

My implementation approach would be:

• Integrate a guided tour library such as react-joyride
• Show the onboarding flow only for first-time users
• Store completion status to prevent the tour from appearing repeatedly
• Highlight the required sections with clear step-by-step guidance
• Test the complete onboarding flow for a smooth user experience

I would be happy to work on this feature and submit a PR.

Please assign this issue to me.

Thank you!

[jpdevhub]

Go ahead !