Problem Statement
Problem: New users who sign in to DevTrack for the first time land on a feature-rich dashboard with many widgets (streaks, goals, PR metrics, language breakdown, leaderboard, etc.) but receive no guidance on what each section does or how to get the most value from the tool. This can lead to:
Confusion about what data is being shown and why
Users missing key features like goal setting, keyboard shortcuts, or profile sharing
Higher drop-off rates for first-time users
Proposed Solution
Proposed Solution: Implement a lightweight, interactive onboarding walkthrough that triggers automatically for first-time users (and can be replayed from settings). The walkthrough should:
Highlight key dashboard sections one by one with spotlight/tooltip overlays.
Explain each widget briefly (e.g., "This is your coding streak — it tracks consecutive days with GitHub activity").
Guide users to set up their first goal as a CTA at the end.
Be dismissible at any point ("Skip tour").
Remember completion — store a flag in localStorage or the user's profile so it doesn't show again.
Feature Area
Dashboard
Alternatives Considered
Suggested Libraries
react-joyride — Popular, well-maintained guided tour library for React
driver.js — Lightweight, no-dependency alternative
Or a custom implementation using portals and CSS positioning
Files to Look At
src/app/dashboard/page.tsx — Where the tour would be triggered
src/components/ — Dashboard widget components (to define tour step targets)
src/lib/ — User preferences/settings utilities
Acceptance Criteria
Acceptance Criteria
First-time users see the onboarding walkthrough automatically after sign-in
Tour highlights at least 5 key dashboard sections with descriptive tooltips
Users can skip/dismiss the tour at any point
Tour completion is remembered — doesn't re-trigger on subsequent visits
A "Replay Tour" option exists in settings or help menu
Tour is responsive and works on mobile viewports
No existing functionality is broken by the tour overlay
Additional Context
No response
Problem Statement
Problem: New users who sign in to DevTrack for the first time land on a feature-rich dashboard with many widgets (streaks, goals, PR metrics, language breakdown, leaderboard, etc.) but receive no guidance on what each section does or how to get the most value from the tool. This can lead to:
Confusion about what data is being shown and why
Users missing key features like goal setting, keyboard shortcuts, or profile sharing
Higher drop-off rates for first-time users
Proposed Solution
Proposed Solution: Implement a lightweight, interactive onboarding walkthrough that triggers automatically for first-time users (and can be replayed from settings). The walkthrough should:
Highlight key dashboard sections one by one with spotlight/tooltip overlays.
Explain each widget briefly (e.g., "This is your coding streak — it tracks consecutive days with GitHub activity").
Guide users to set up their first goal as a CTA at the end.
Be dismissible at any point ("Skip tour").
Remember completion — store a flag in localStorage or the user's profile so it doesn't show again.
Feature Area
Dashboard
Alternatives Considered
Suggested Libraries
react-joyride — Popular, well-maintained guided tour library for React
driver.js — Lightweight, no-dependency alternative
Or a custom implementation using portals and CSS positioning
Files to Look At
src/app/dashboard/page.tsx — Where the tour would be triggered
src/components/ — Dashboard widget components (to define tour step targets)
src/lib/ — User preferences/settings utilities
Acceptance Criteria
Acceptance Criteria
First-time users see the onboarding walkthrough automatically after sign-in
Tour highlights at least 5 key dashboard sections with descriptive tooltips
Users can skip/dismiss the tour at any point
Tour completion is remembered — doesn't re-trigger on subsequent visits
A "Replay Tour" option exists in settings or help menu
Tour is responsive and works on mobile viewports
No existing functionality is broken by the tour overlay
Additional Context
No response