SkateSpots/IMPLEMENTATION_PLAN.md

Implementation Plan - SkateSpots Refinements

Date: December 30, 2025
Status: Planning Phase

---

🐛 CRITICAL FIXES (Priority 1)

1. Fix Signup Key Generation Error

Priority: CRITICAL
Effort: 30-45 minutes
Budget: $3-5

Issue: Error when generating secret key during signup
Root Cause: Need to investigate console error - likely issue with nip19.decode or toast usage

Steps:

1. Check SignupDialog.tsx for error in key generation
2. Test nip19.decode with generated nsec
3. Fix toast.toast() vs toast() usage inconsistency
4. Add error boundary and better error handling
5. Test complete signup flow end-to-end

Files: src/components/auth/SignupDialog.tsx

---

🎨 UI/UX IMPROVEMENTS (Priority 2)

2. Consistent UI Framing Across All Devices

Priority: HIGH
Effort: 2-3 hours
Budget: $10-15

Issues:

• Inconsistent padding/margins on mobile vs desktop
• Some elements not properly responsive
• Headers need consistent sizing
• Cards need consistent spacing

Steps:

1. Audit all pages for responsive issues
2. Standardize container padding (px-4 on mobile, px-6 on desktop)
3. Fix header sizing (ensure readable on all devices)
4. Ensure cards have consistent max-width and centering
5. Test on mobile (375px), tablet (768px), desktop (1920px)
6. Fix bottom navigation spacing on notched devices
7. Ensure forms are usable on small screens

Files: All page components, Layout.tsx, index.css

---

3. Day/Night Theme with Actual Contrast

Priority: HIGH
Effort: 1-2 hours
Budget: $5-10

Issue: Currently forced to dark mode, no real light theme option

Steps:

1. Create proper light theme CSS variables
2. Light theme: White background with neon accents
3. Keep neon effects but adjust for light bg (darker neons, subtle glows)
4. Ensure text remains readable in both modes
5. Update ThemeToggle to actually switch themes
6. Test all pages in both light and dark mode
7. Ensure minimum 4.5:1 contrast ratio (WCAG AA)

Design:

• Light Mode: White bg (#ffffff), dark neon colors, subtle shadows
• Dark Mode: Black bg (#000000), bright neons, glows (current)

Files: src/index.css, src/components/ThemeToggle.tsx

---

4. Login Required Notices

Priority: MEDIUM
Effort: 1 hour
Budget: $5

Issue: Features requiring login should show notice before user tries to use them

Steps:

1. Add "Login required" badges to event cards if logged out
2. Add notice on map page: "Login to add spots/shops"
3. Add notice on events page: "Login to create events"
4. Add notice on coaches page: "Login to become a coach"
5. Style with yellow neon theme
6. Make notices dismissible or subtle (not intrusive)

Files: EventsPage.tsx, MapPage.tsx, CoachesPage.tsx, event cards

---

🔗 LINK & NAVIGATION FIXES (Priority 2)

5. Add Links to Onboarding from Signup

Priority: MEDIUM
Effort: 15 minutes
Budget: $1-2

Steps:

1. Add button in SignupDialog welcome step
2. "Need help? View our onboarding guide" with link
3. Style as secondary/outline button

Files: src/components/auth/SignupDialog.tsx

---

6. Add nos2x Link to Onboarding

Priority: LOW
Effort: 5 minutes
Budget: $1

Steps:

1. Add nos2x to extension list in OnboardingPage
2. Format: { label: 'nos2x', url: 'https://github.com/fiatjaf/nos2x', note: 'Minimalist Nostr extension.' }

Files: src/pages/OnboardingPage.tsx

---

7. Add Hyperlinks to Mobile Wallets

Priority: LOW
Effort: 10 minutes
Budget: $1

Steps:

1. Find wallet list in OnboardingPage
2. Add URLs to all wallets (Wallet of Satoshi, Blink, Zeus, Phoenix, Coinos)
3. Make names clickable links

Files: src/pages/OnboardingPage.tsx

---

8. Fix Plebeian Market Links

Priority: MEDIUM
Effort: 15 minutes
Budget: $1-2

Issue: Multiple confusing links, should have one clear CTA

Steps:

1. Remove "Browse Marketplace" internal link
2. Keep only "Visit Plebeian Market" external link
3. Update OnboardingPage to match
4. Link directly to https://plebeian.market

Files: src/pages/MarketplacePage.tsx, src/pages/OnboardingPage.tsx

---

9. Add OpenStreetMap Credit

Priority: LOW
Effort: 10 minutes
Budget: $1

Steps:

1. Add small text overlay on map: "Map data © OpenStreetMap contributors"
2. Position in bottom-left corner
3. Style: small, gray text with link
4. Or add to footer when map is visible

Files: src/components/SpotMap.tsx

---

⚙️ FEATURE ENHANCEMENTS (Priority 3)

10. NIP-05 Provider Options in Settings

Priority: MEDIUM
Effort: 1-1.5 hours
Budget: $5-8

Steps:

1. Create NIP-05 section in SettingsPage
2. List 4 providers:
   • Free: nostrcheck.me, nostr.directory
   • Paid: Nostr Plebs, nostr.band
3. Add links and brief descriptions
4. Show current NIP-05 if set
5. Add "Test your NIP-05" button
6. Style with neon theme

Providers to Include (single source of truth: src/lib/nip05Providers.ts):

• nostrcheck.me (Free)
• nostr.directory (Free)
• Nostr Plebs (Paid)
• nostr.band (Paid)

Files: src/pages/SettingsPage.tsx

---

11. Contact Info for Private/Ask Locals Spots

Priority: MEDIUM
Effort: 45 minutes
Budget: $4-5

Steps:

1. Add contactInfo field to CreateSpotPage
2. Show only when accessType is 'private' or 'locals'
3. Input field: "Contact info (phone, social, etc.)"
4. Save as 'contact' tag
5. Display on SpotDetailPage for private/locals spots
6. Only show to logged-in users

Files: src/pages/CreateSpotPage.tsx, src/pages/SpotDetailPage.tsx, src/lib/types.ts

---

12. Coach Contact Details & Rating System

Priority: HIGH
Effort: 3-4 hours
Budget: $15-20

Complex Feature - Multiple Parts:

Part A: Contact Information (1 hour, $5)

1. Add contactInfo field to BecomeCoachPage
2. Save as 'contact' tag
3. Show only to verified users (has NIP-05)
4. Display with lock icon: "Contact info visible to verified users only"

Part B: Rating System (2-3 hours, $10-15)

1. Create new kind for coach reviews (use nostr_generate_kind)
2. Create ReviewDialog component
3. Add 1-5 star rating
4. Add text review
5. Parse and display reviews on CoachDetailPage
6. Calculate average rating
7. Show "X reviews" count
8. Only verified users can leave reviews

New Event Kind Needed:

{
  "kind": <generated>,
  "content": "review text",
  "tags": [
    ["a", "35001:coach-pubkey:identifier"],
    ["rating", "1-5"],
    ["t", "coach-review"]
  ]
}

Files: Multiple - BecomeCoachPage.tsx, CoachDetailPage.tsx, new components, types.ts

---

13. Shop Ownership Claiming

Priority: MEDIUM
Effort: 1.5-2 hours
Budget: $8-10

Steps:

1. Create ClaimShopDialog component
2. Add 'claimed_by' tag functionality
3. Require NIP-05 to claim
4. Show "Claimed by [name]" badge on shops
5. Allow original poster OR claimer to edit
6. Add verification checkmark for claimed shops
7. Handle claim conflicts (first claim wins)

Technical:

• Add claimedBy to SkateSpot interface
• Parse 'claimed_by' tag
• Create claim event (adds tag to existing shop)
• Update parseSkateSpot to handle claimed shops

Files: src/pages/SpotDetailPage.tsx, src/lib/types.ts, new ClaimShopDialog component

---

14. Hide Events from Logged-Out Users

Priority: LOW
Effort: 30 minutes
Budget: $2-3

Issue: Only logged-in users should see event listings

Steps:

1. Update EventsPage to check if user is logged in
2. Show "Login to view events" message if logged out
3. Update homepage to hide event section if logged out
4. Add login prompt where events would show

Files: src/pages/EventsPage.tsx, src/pages/Index.tsx

---

15. Update Homepage Tagline Explanation

Priority: LOW
Effort: 15 minutes
Budget: $1-2

Current: "Find Spots • Create Events • Learn • Shop • Contribute • Get Rewarded"

Update To: Add subtitle explaining the real-world focus:

"The magic happens IRL - SkateSpots helps you find it, connect with it, and support it"

Or similar messaging emphasizing that the app enhances real skateboarding culture.

Files: src/pages/Index.tsx

---

📊 TOTAL BREAKDOWN

By Priority:

Priority	Features	Effort	Budget
CRITICAL	Signup Fix	45 min	$3-5
HIGH	UI Consistency + Theme + Coach Rating	6-9 hours	$30-45
MEDIUM	Contact Info + Claiming + Links + NIP-05	4-5 hours	$20-25
LOW	Minor additions	1-2 hours	$5-10

TOTAL ESTIMATE:

• Time: 12-16 hours
• Budget: $58-85
• Complexity: Medium-High (coach rating system most complex)

---

🎯 RECOMMENDED IMPLEMENTATION ORDER

Phase 1: Critical Fixes (1 hour, $5-8)

1. ✅ Fix signup key generation error
2. ✅ Fix Plebeian Market links
3. ✅ Add onboarding link to signup

Phase 2: UI Polish (4-5 hours, $20-25)

4. ✅ Consistent UI framing across devices
5. ✅ Day/night theme with contrast
6. ✅ Login required notices

Phase 3: Enhanced Features (5-7 hours, $25-35)

7. ✅ Contact info for spots (private/locals)
8. ✅ NIP-05 providers in settings
9. ✅ Coach contact details (verified only)
10. ✅ Shop claiming enhancement

Phase 4: Advanced Features (2-3 hours, $10-15)

11. ✅ Coach rating system
12. ✅ Hide events from logged-out users

Phase 5: Polish (1 hour, $3-7)

13. ✅ Add all missing links (nos2x, wallets, OpenStreetMap)
14. ✅ Update homepage messaging
15. ✅ Final testing across devices

---

💡 NOTES & CONSIDERATIONS

Coach Rating System Complexity:

• Requires new Nostr event kind (needs generation)
• Needs validation to prevent spam
• Aggregation logic for average ratings
• UI for displaying ratings and reviews
• Review submission dialog
• Most complex feature in this list

Alternative to Coach Ratings:

• Use existing NIP-25 reactions (simpler)
• Use comments only (no star ratings)
• Link to external review system
• Recommended: Start with comments, add ratings later

Shop Claiming:

• First claim wins approach (simple)
• Or allow dispute resolution (complex)
• Recommended: Simple first claim + manual dispute

Contact Info Security:

• Only show to verified users (has NIP-05)
• Prevents spam and abuse
• Builds trust in community

---

🚀 IMMEDIATE ACTIONS

Start with these 3 critical fixes (can be done in 1 hour):

1. Fix signup error - Test and debug key generation
2. Fix Plebeian links - Single clear CTA
3. Add onboarding link - Help new users

Then we can tackle the larger UI and feature work.

Would you like me to start with Phase 1 (critical fixes)?

---

📋 DETAILED TASK CHECKLIST

• Fix signup key generation error (CRITICAL)
• Consistent UI framing across devices
• Day/night theme with real contrast
• Login required notices throughout app
• Onboarding link in signup dialog
• nos2x link in onboarding extensions
• Hyperlinks for all mobile wallets
• Fix Plebeian Market links (single CTA)
• NIP-05 providers section in settings (4 options)
• Contact info for private/ask locals spots
• Coach contact details (verified users only)
• Coach rating/review system
• Shop claiming with ownership field
• Hide events from logged-out users
• OpenStreetMap credit on map
• Update homepage tagline explanation

Total Tasks: 16
Estimated Time: 12-16 hours
Estimated Budget: $58-85