PROGRAM PLANNING & DESIGN, 124 steps

Administrator — Sun, 18 Jan 2026 13:13:54 -0500

# Project TODO

## Completed Features
- [x] Basic homepage layout with Taylor Pope image
- [x] Quote display system
- [x] Music player with iTunes previews
- [x] Share quote as image functionality
- [x] Favorites system with localStorage
- [x] Guess the Song quiz game
- [x] Daily Challenge mode with obscure lyrics
- [x] Upgrade to full-stack with database and auth

## In Progress
- [x] Database schema for leaderboard (daily_challenge_completions table)
- [x] Backend API for leaderboard (submit score, get rankings)
- [x] Leaderboard UI component
- [x] Integrate leaderboard with Daily Challenge

## New Features
- [x] Social sharing for leaderboard achievements (generate image card with rank and streak)

- [x] Add one-click Twitter sharing button with pre-populated tweet
- [x] Add Instagram sharing helper (copy message to clipboard)

## Achievement Badge System
- [x] Define badge milestones (7-day, 30-day, 100-day streaks)
- [x] Create badge component with visual designs
- [x] Update database schema to track earned badges
- [x] Add backend API to retrieve user badges
- [x] Display badges on leaderboard entries
- [x] Display badges on achievement card

## Friend Challenges
- [x] Create database schema for challenges
- [x] Add backend API to create and retrieve challenges
- [x] Create challenge generation UI with shareable link
- [x] Create challenge acceptance page
- [x] Implement side-by-side comparison view
- [ ] Add challenge notifications (optional enhancement)

## User Profile Pages
- [x] Create database schema for user stats (quotes viewed, quiz attempts, etc.)
- [x] Add backend API to retrieve user profile data
- [x] Create Profile page component with badges display
- [x] Add challenge history section (sent and received challenges)
- [x] Add personal statistics section
- [x] Add shareable profile link functionality
- [x] Add profile route to App.tsx

## Album Era Themes
- [x] Define theme configurations for each album era (colors, fonts, gradients)
- [x] Create theme unlock requirements based on achievements
- [x] Add database schema to track unlocked themes and selected theme
- [x] Create theme selector UI component
- [x] Implement theme switching functionality
- [x] Update CSS variables dynamically based on selected theme
- [x] Add theme preview in selector
- [x] Integrate theme selector into home page

## In-App Notifications
- [x] Create database schema for notifications table
- [x] Add backend API for creating and retrieving notifications
- [x] Create notification bell component with unread count
- [ ] Implement streak reminder notifications (daily check - requires cron job)
- [x] Implement challenge acceptance notifications
- [ ] Implement achievement unlock notifications (to be added when unlocking badges)
- [x] Add mark as read functionality
- [x] Test notification delivery and display

## Quote Collections
- [x] Create database schema for collections and collection_quotes tables
- [x] Add backend API for creating, updating, and deleting collections
- [x] Add backend API for adding/removing quotes from collections
- [x] Create Collections UI component
- [x] Implement collection sharing with unique links
- [ ] Add collections view page (optional - can view from dialog)

## Weekly Trivia Events
- [ ] Create database schema for trivia events and event participants
- [ ] Add backend API for creating and managing events
- [ ] Implement real-time leaderboard using polling or WebSockets
- [ ] Create event scheduling system
- [ ] Create event participation UI
- [ ] Add special event badges for winners
- [ ] Test event flow end-to-end

## Quote Search & Filtering
- [x] Add search input component to Home page
- [x] Implement client-side quote filtering by keyword
- [x] Add filter dropdowns for category
- [x] Add sort options (default, alphabetical)
- [x] Display search results count
- [x] Add clear filters button

## User Profile Customization
- [x] Add profile picture upload to database schema
- [x] Add bio field to user_stats table
- [x] Add featured quotes to profile
- [x] Create profile edit page/dialog
- [x] Implement image upload to S3 for profile pictures
- [x] Update profile page to display custom bio and picture
- [ ] Add profile picture to leaderboard and notifications (optional enhancement)

## Weekly Trivia Events
- [x] Create database schema for trivia_events table (id, title, description, startTime, endTime, status, questions)
- [x] Create database schema for event_participants table (eventId, userId, score, completedAt)
- [x] Create database schema for event_badges table (id, name, description, eventId, placement)
- [x] Add backend API for retrieving active/upcoming/past events
- [x] Add backend API for joining events and submitting answers
- [x] Add backend API for retrieving event leaderboard
- [x] Add backend API for awarding event badges
- [x] Create EventsDialog component with calendar view
- [x] Create ActiveEventDialog component with live leaderboard
- [x] Create event badge display component
- [x] Integrate events button on home page
- [ ] Add event notifications for new events and results
- [x] Write vitest tests for event creation, participation, and leaderboards

## Event Badge Display on Profile
- [x] Update Profile page to fetch and display user's event badges
- [x] Create badge grid layout with EventBadge components
- [x] Add tooltips showing event details (title, date, placement)
- [x] Show badge count and achievement summary
- [ ] Test badge display with multiple badges

ANYHOO 360: PROGRAM PLANNING & DESIGN, 124 steps}

PROGRAM PLANNING & DESIGN, 124 steps