Description
This is a UI/UX onboarding issue. The landing page in src/App.tsx lists consumer/developer steps as static copy, but once inside the app there is no guided onboarding that tracks whether a user has connected a wallet, deposited USDC, or browsed an API. New users have no sense of progress or next step.
Requirements and Context
- Add a dismissible onboarding checklist surface (e.g. on
/dashboard) reflecting the four consumer steps from App.tsx.
- Each item should show completed/incomplete state and link to the relevant route (Billing deposit, Marketplace).
- Persist dismissal/progress in
localStorage (consistent with callora-theme usage) and be fully keyboard accessible.
- Must be secure, tested, and documented
- Should be efficient and easy to review
Suggested Execution
- Fork the repo and create a branch
git checkout -b feature/onboarding-checklist
- Implement changes
src/components/OnboardingChecklist.tsx (new) rendered on the dashboard
src/App.tsx — mount the checklist and wire step links
src/index.css — token-driven checklist styles
- Test and commit
npm run dev, verify progress states, dismissal persistence, and keyboard use
- Include test output and notes in the PR
Example commit message
feat: add first-run onboarding checklist
Acceptance Criteria
Guidelines
- Keep persistence keys consistent with existing
callora-* naming
- Clear documentation and inline comments
- Timeframe: 96 hours
Description
This is a UI/UX onboarding issue. The landing page in
src/App.tsxlists consumer/developer steps as static copy, but once inside the app there is no guided onboarding that tracks whether a user has connected a wallet, deposited USDC, or browsed an API. New users have no sense of progress or next step.Requirements and Context
/dashboard) reflecting the four consumer steps fromApp.tsx.localStorage(consistent withcallora-themeusage) and be fully keyboard accessible.Suggested Execution
src/components/OnboardingChecklist.tsx(new) rendered on the dashboardsrc/App.tsx— mount the checklist and wire step linkssrc/index.css— token-driven checklist stylesnpm run dev, verify progress states, dismissal persistence, and keyboard useExample commit message
Acceptance Criteria
Guidelines
callora-*naming