Appearance
Spec-to-Implementation Traceability
This page maps every V2 specification section to its implementation status in the frontend codebase. Use it to trace any spec requirement back to the code that implements it.
Legend:
- Done — Implemented with functional UI and mock data
- Partial — Component exists but incomplete
- Not Started — No implementation yet
- Backend — Backend-only requirement, no frontend work needed yet
Doc 1: Core Platform and Accounts
See Accounts guide | Privacy guide | Safety guide
| Feature | Status | Notes |
|---|---|---|
| Login page | Done | Email/password form |
| Register page | Done | Email registration |
| Forgot/Reset Password | Done | Full flow |
| Email verification | Done | Verify email page |
| Google OAuth button | Partial | Button exists, not wired |
| Apple Sign-In button | Done | Mock Apple SSO button on Login + Register pages |
| Age verification gate | Done | AgeVerification.tsx — dedicated page with DOB input + tier routing |
| COPPA Tier 1 (school-only) | Done | Tier 1 flow built in RoleOnboarding (StudentTier1 sub-flow) |
| COPPA Tier 2 (parent-linked) | Done | ParentalConsent.tsx + StudentTier2 onboarding flow |
| Context switcher | Done | ContextSwitcher + AccountSwitcher components |
| User profile/settings | Done | Account page |
| Privacy settings | Partial | Page exists, no per-field granularity |
| Notification preferences | Done | NotificationPreferences.tsx — per-category grid (6x3), quiet hours, digest frequency |
| Data export request | Done | DataExportRequest.tsx — 5 data categories, export history |
| Account deletion flow | Done | AccountDeletion.tsx — confirmation flow with type DELETE |
| Linked accounts management | Done | LinkedAccounts.tsx — OAuth provider cards, link/unlink, family accounts |
Doc 2: Challenge System and Track Records
See Challenges guide | Track Records guide
| Feature | Status | Notes |
|---|---|---|
| Challenge detail page | Done | Full detail with tabs |
| Challenge card component | Done | ChallengeCard + ChallengeGrid |
| My Challenges page | Done | List view |
| My Challenges 5-tab structure | Partial | Tabs exist but not all states |
| Track Record create/edit | Done | TR page with entry form |
| TR entries (text + media) | Done | EntryCard, EntryForm, MediaUpload |
| TR gallery on challenge detail | Done | TrackRecordGallery component |
| Milestone checklist/progress | Partial | Basic, no per-milestone tracking UI |
| Verification submission flow | Partial | Submit exists, no reflection step |
| Verification status display | Partial | Basic status, no retry flow |
| TR revision after rejection | Done | TrackRecordRevision.tsx — rejection banner, editable fields, revision history, resubmit |
| Portfolio page | Done | Portfolios page + PortfolioView |
| Portfolio builder/export | Partial | PortfolioBuilder exists, no PDF export |
| User-created challenge submission | Done | SubmitChallenge.tsx — 4-step form (info, details, milestones, review) |
| Challenge versioning | Done | ChallengeVersionHistory.tsx — timeline, diff view, restore, compare |
| Sharing settings (Pattern B) | Done | SharingSettings + BatchShareModal + ShareButton + useShareStore + sharing.api.ts |
| Finalization flow | Done | 5-step finalization (Experience/Provider/Reflection/Scrapbook/Review) |
| Challenge discussion tab | Done | ChallengeDiscussion component |
Doc 3: Gifting and Invitations
See Gifting guide
| Feature | Status | Notes |
|---|---|---|
| Gifts page | Done | Gifts page |
| Gift card component | Done | GiftCard, GiftModal |
| Gift permission settings | Done | GiftPermissionSettings |
| Gift creation flow | Partial | Modal exists, not full vendor redirect |
| Gift redemption flow | Done | GiftRedemption.tsx — code entry, gift card UI, accept with confetti celebration |
| Gift status tracking | Partial | Basic status, no expiration |
| Invite flow | Partial | InvitationStore exists |
| Share/Recommend to communities | Done | BatchShareModal.tsx — two-panel batch share to communities |
| School bulk gift interface | Done | BulkGiftChallenges.tsx — 4-step wizard, class/student select, cost breakdown, discount |
Doc 4: Explore and Discovery
See Explore guide
| Feature | Status | Notes |
|---|---|---|
| Explore page | Done | Main explore with search |
| Search bar | Done | SearchFilterBar, SearchTrigger |
| Filter sidebar/modal | Done | FilterSidebar, FilterModal, AppliedFilters |
| Active filters chips | Done | ActiveFilters component |
| Curated view tabs (6 families) | Partial | Some views (Best Fit, Featured, Free, Popular, New) but not full 6-family structure |
| Category browse page | Done | ExploreCategoryView |
| Best Fit recommendations | Partial | Page exists, no real algorithm |
| Saved list (Bucket List + Interesting) | Done | SavedList page |
| Dealer's Choice | Done | DealersChoicePage.tsx — full card game (intro, deal, reveal, accept/pass, cooldown) with useDealersChoiceStore + dealersChoice.api.ts |
| Map view | Done | MapView.tsx — SVG map with colored pins, category filters, sidebar list |
| Calendar view | Partial | CalendarView component exists, basic |
| Event registration/waitlist | Done | EventDetailPanel.tsx — register/waitlist/add-to-calendar integrated into MapView |
Doc 5: Communities and Social
| Feature | Status | Notes |
|---|---|---|
| Communities browse page | Done | Communities page |
| Community detail page | Done | CommunityDetail page |
| Community card | Done | CommunityCard, CommunityHeader |
| Feed posts | Done | FeedPost component |
| Member list | Done | MemberList component |
| 3-feed structure (BL/TR/Discussion) | Partial | Feeds exist but not fully separated |
| Pattern B batch sharing | Done | BatchShareModal.tsx — two-panel dialog (items + communities) + ShareButton |
| Community type selector (6 types) | Partial | Some types, not all 6 |
| Private communities | Done | PrivateCommunities page |
| School communities | Done | SchoolCommunity page |
| Community goals | Done | CommunityGoals page + store |
| Community moderation tools | Done | CommunityModTools.tsx — remove/warn/mute/ban with confirmations, action log |
| Join request flow | Done | JoinRequestFlow.tsx — request button, pending state, admin approve/deny queue |
Doc 6: School Administration
See School guide | Teacher role | School Admin role
| Feature | Status | Notes |
|---|---|---|
| School dashboard (SA) | Done | SchoolDashboard page |
| Roster management | Done | Roster page |
| CSV roster import | Done | CSVRosterImport.tsx — drag-drop upload, column mapping, validation, preview |
| Individual student add | Partial | Basic form, no full validation |
| Class management | Done | Classes page |
| Grade levels | Done | Grades page |
| Teacher management | Done | Teachers page |
| Assignments page | Done | Assignments page |
| Assignment builder | Partial | Modal exists (AssignChallengeModal), not full builder |
| Class progress | Done | ClassProgress page |
| Teacher reviews / verification | Done | TeacherReviews page |
| Student enrollment modal | Done | StudentEnrollmentModal |
| Surveys | Done | Surveys page |
| Purchase request queue | Done | PurchaseRequestQueue.tsx — filterable list, approve/deny, budget tracking |
| School analytics | Partial | Basic stats, not full dashboard per spec |
| Parent dashboard (school) | Done | ParentDashboard page |
| SA setup wizard | Done | SA onboarding flow built in RoleOnboarding.tsx (6-step SA sub-flow) |
| Alumni transition | Done | AlumniTransition.tsx — graduating student list, transition/archive/export actions, batch ops |
Doc 7: Reflection and SEL Tracking
See Reflection guide
| Feature | Status | Notes |
|---|---|---|
| Reflection prompts on TR submit | Partial | ReflectionPrompts component exists, integrated in finalization flow |
| 7 prompt types | Done | reflection.types.ts extended with yes_no, mc_multi, and all 7 types |
| Age-appropriate defaults | Done | ReflectionDefaults.tsx — 3-tier config (6-8, 9-12, 13-17), prompt types, difficulty, min length |
| School question bank | Done | ReflectionAnalyticsAdmin.tsx includes question bank management (add/edit/delete) |
| Teacher assignment reflection config | Done | TeacherReflectionConfig.tsx — mode selector, custom prompts, SEL tags, preview |
| My Reflections page | Done | MyReflections.tsx — student view of past reflections |
| Teacher reflection analytics | Done | ReflectionAnalytics.tsx — class selector, per-prompt breakdown, SEL heat map |
| SA reflection analytics | Done | ReflectionAnalyticsAdmin.tsx — school-wide stats + question bank management |
| SEL competency tagging | Partial | SEL heat map in teacher analytics; tagging per-prompt not yet configurable |
| Keyword flagging | Backend | Deferred to v2 per spec |
Doc 8: Gamification System
| Feature | Status | Notes |
|---|---|---|
| XP counter display | Partial | LevelProgress shows XP, no animated counter |
| Level badge + progress | Done | LevelProgress component |
| Badge card + grid | Done | BadgeCard, BadgeGrid, BadgeCollection |
| Badge unlock modal | Done | NewBadgeModal |
| XP gain toast | Done | XPGainToast component |
| Streak display | Done | StreakDisplay component |
| Journey Map page | Done | JourneyMap page + component |
| Journey Map visualization | Partial | Page exists, no interactive map canvas |
| XP History page | Done | XPHistory page |
| Badges page | Done | Badges page |
| Badge showcase (top 5 on profile) | Done | BadgeShowcase.tsx — top 5 badges with tier-colored borders + tooltips |
| Learning Paths browse | Done | LearningPaths page |
| Learning Path detail | Done | LearningPathDetail page |
| Learning Path progress | Done | PathProgress, PathCard components |
| Leaderboard | Done | LeaderboardTable component |
| Leaderboard opt-in controls | Done | LeaderboardOptIn.tsx — master toggle + granular controls + display name |
| Level-up celebration modal | Done | LevelUpModal.tsx — confetti animation, gradient header, unlocked features |
| Community goals | Done | CommunityGoals page |
| Group challenges | Done | GroupChallenge.tsx — team members, group progress, milestones, team chat, leader controls |
Doc 9: Admin and Analytics
See Admin guide | Platform Admin role
| Feature | Status | Notes |
|---|---|---|
| User management | Done | UserManagement page |
| Verification queue | Done | VerificationQueue page |
| Vendor management | Done | VendorManagement page |
| Challenge management | Done | ChallengeManagement page |
| Challenge series management | Done | ChallengeSeriesManagement page |
| Coupon management | Done | CouponManagement page |
| Order management | Done | OrderManagement page |
| Review moderation | Done | ReviewModeration page |
| Schools management | Done | SchoolsManagement page |
| Platform settings | Done | PlatformSettings page |
| Analytics dashboard | Done | AnalyticsDashboard page |
| 7 admin roles with permissions | Done | AdminRoles.tsx — permission matrix + user assignment; AdminRoleGuard component; useAdminStore + admin.types.ts |
| User detail view + moderation | Done | UserDetail.tsx — profile, moderation actions, activity log |
| Challenge approval queue | Done | ChallengeApprovalQueue.tsx — filterable queue, approve/reject/request changes, assign reviewer |
| Featured content management | Done | FeaturedContent.tsx — 3-tab ordered list, reorder buttons, add/remove, preview mode |
| School health dashboard | Done | SchoolHealthDashboard.tsx — health indicators, engagement rates, expandable details |
| Flagged content moderation queue | Done | FlaggedContentQueue.tsx — card-based queue with approve/reject/escalate |
| Audit log viewer | Done | AuditLog.tsx — filterable table with date range, user, and action filters |
| Executive analytics dashboard | Partial | AnalyticsDashboard is basic, not role-specific |
| Product analytics (funnels, cohorts) | Done | ProductAnalytics.tsx — conversion funnel, cohort retention, key metrics, top content |
| Engineering analytics (system health) | Done | EngineeringAnalytics.tsx — uptime, API response times, error log, infra status, deployments |
| Content analytics | Done | ContentAnalytics.tsx — content performance, category breakdown, content gaps, trending |
| Custom report builder | Done | ReportBuilder.tsx — 4-step wizard, data sources, metrics, filters, preview, saved reports |
| Scheduled report delivery | Done | Integrated into ReportBuilder — schedule toggle (Daily/Weekly/Monthly) on saved reports |
Doc 10: Data Security and Privacy
See Privacy guide | Safety guide
| Feature | Status | Notes |
|---|---|---|
| Column-level encryption | Backend | Backend infrastructure |
| JWT RS256 auth | Backend | Backend (mock JWT in FE) |
| Rate limiting | Backend | Backend infrastructure |
| RBAC enforcement | Done | RoleGuard + AuthGuard + AdminRoleGuard with 7-role granularity |
| CSRF protection | Backend | Backend infrastructure |
| EXIF stripping on upload | Backend | Backend/media pipeline |
| Data subject access request UI | Done | DataAccessRequest.tsx — GDPR/CCPA form, 4 request types, conditional details, history |
| Privacy consent tracking UI | Done | ConsentGuard + CookieConsentBanner + useLegalStore |
Doc 11: Notifications and Communications
| Feature | Status | Notes |
|---|---|---|
| Notification center (in-app) | Done | NotificationCenter component |
| Notifications page | Done | Notifications page |
| Badge/counter in header | Partial | Header exists, basic badge |
| Notification preferences UI | Done | NotificationPreferences component on Account page |
| Per-category notification settings | Done | 6 categories x 3 channels (In-App/Email/Push) grid |
| Quiet hours setting | Done | Time range selector in NotificationPreferences |
| Digest preference | Done | Real-time/Daily/Weekly frequency selector |
| Email templates | Backend | Backend infrastructure |
| Push notifications | Backend | Backend + service worker |
Doc 12: Onboarding and Empty States
See Onboarding guide
| Feature | Status | Notes |
|---|---|---|
| General user onboarding wizard | Done | Onboarding page + OnboardingWizard + RoleOnboardingWizard component |
| Student Tier 1 onboarding | Done | RoleOnboarding.tsx — StudentTier1 flow (school-only, age-appropriate) |
| Student Tier 2 onboarding | Done | RoleOnboarding.tsx — StudentTier2 flow (parent-linked with consent) |
| Teacher onboarding (guided tour) | Done | RoleOnboarding.tsx — Teacher flow + GuidedTour component |
| Parent onboarding | Done | RoleOnboarding.tsx — Parent flow |
| SA setup wizard (6 steps) | Done | RoleOnboarding.tsx — SA flow (6-step setup) |
| Vendor onboarding | Done | RoleOnboarding.tsx — Vendor flow |
| Empty states (per screen) | Done | EmptyState.tsx reusable component integrated into AppLayout |
| Progressive disclosure tooltips | Partial | GuidedTour component built; not yet wired to every screen |
Doc 13: Performance and Scalability
| Feature | Status | Notes |
|---|---|---|
| Code splitting (React.lazy) | Done | Route-level lazy loading |
| Image optimization pipeline | Not Started | No image variants or WebP |
| Skeleton loading | Done | Skeleton component exists |
| Error boundary | Done | ErrorBoundary component |
| Virtual scrolling for long lists | Not Started | Not built |
| Service worker / PWA | Not Started | Not built |
| Performance monitoring | Backend | Backend/infrastructure |
Doc 14: Legal Policies
| Feature | Status | Notes |
|---|---|---|
| Terms of Service page | Done | TermsOfService page |
| Privacy Policy page | Done | PrivacyPolicy page |
| Accessibility Statement page | Done | AccessibilityStatement page |
| Cookie consent banner | Done | CookieConsentBanner.tsx — integrated into AppLayout; useLegalStore for state |
| Acceptable Use Policy page | Done | AcceptableUsePolicy.tsx |
| Community Guidelines page | Done | CommunityGuidelines.tsx |
| Vendor Terms page | Done | VendorTerms.tsx |
Doc 15: Reporting and Flagging
| Feature | Status | Notes |
|---|---|---|
| Report button | Done | ReportButton component |
| Report modal | Done | ReportModal component |
| Block user | Done | BlockUserButton.tsx — block + mute with confirmation + undo |
| Mute in community | Done | CommunityModTools.tsx — mute with duration selector |
| Appeals flow | Done | AppealForm.tsx — select action, appeal reason, evidence, existing appeals list |
| Safety resources display | Done | SafetyResources.tsx — emergency contacts, safety tips, report guidance, compact mode |
| Automated flagging | Backend | Backend infrastructure |
Doc 16: Internationalization
See i18n guide
| Feature | Status | Notes |
|---|---|---|
| i18n framework setup | Done | react-i18next configured |
| English locale | Done | en.json |
| Spanish locale | Done | es.json |
| French locale | Done | fr.json |
| Language switcher | Done | LanguageSwitcher component |
| Zero hardcoded strings | Partial | Most UI translated, some strings may be hardcoded |
| ICU MessageFormat (plurals) | Not Started | Not implemented |
| CSS logical properties | Not Started | Not verified |
| RTL layout support | Not Started | Not built |
| Pseudolocalization testing | Not Started | Not set up |
Doc 17: CI/CD and Deployment
| Feature | Status | Notes |
|---|---|---|
| ESLint config | Done | Configured |
| Prettier config | Done | Configured |
| TypeScript strict mode | Done | tsconfig |
| Vitest setup | Done | 1 test file |
| CI pipeline | Partial | GitHub Actions for docs validation (.github/workflows/docs.yml); no app build/test/deploy pipeline |
| Feature flags system | Done | useFeatureFlagStore + useFeatureFlag hook + FeatureGate component + admin toggle page |
Doc 18: Accessibility and Testing
| Feature | Status | Notes |
|---|---|---|
| eslint-plugin-jsx-a11y | Not Started | Not configured |
| axe-core in tests | Not Started | Not configured |
| Lighthouse CI | Not Started | Not configured |
| Keyboard navigation | Partial | Chakra provides some; SkipNavLink component added |
| Screen reader testing | Not Started | Not done |
| Reduced motion support | Done | prefers-reduced-motion CSS in index.css |
| Breadcrumb navigation | Done | Breadcrumb component |
Doc 20: Vendor Portal
See Vendor guide | Vendor role
| Feature | Status | Notes |
|---|---|---|
| Vendor dashboard | Done | VendorDashboard page |
| Vendor registration/application | Done | VendorApplication.tsx — multi-step application form |
| Vendor onboarding flow | Done | Vendor sub-flow in RoleOnboarding.tsx |
| Vendor challenge creation | Done | VendorChallengeCreate.tsx — tabbed form (details, requirements, media, pricing) |
| Vendor event management | Done | VendorEvents.tsx — event table + create event form |
| Vendor analytics | Done | VendorAnalytics.tsx — stats cards + bar charts |
| Vendor profile management | Done | VendorSettings.tsx — profile form + logo upload |
Summary
| Category | Done | Partial | Not Started | Backend |
|---|---|---|---|---|
| Accounts and Auth (Doc 1) | 12 | 1 | 0 | 0 |
| Challenges and TRs (Doc 2) | 12 | 4 | 0 | 0 |
| Gifting (Doc 3) | 6 | 3 | 0 | 0 |
| Explore and Discovery (Doc 4) | 9 | 2 | 0 | 0 |
| Communities (Doc 5) | 8 | 3 | 0 | 0 |
| School Admin (Doc 6) | 14 | 1 | 0 | 0 |
| Reflection and SEL (Doc 7) | 7 | 2 | 0 | 1 |
| Gamification (Doc 8) | 14 | 1 | 1 | 0 |
| Admin and Analytics (Doc 9) | 21 | 1 | 0 | 0 |
| Security (Doc 10) | 3 | 0 | 0 | 5 |
| Notifications (Doc 11) | 6 | 0 | 0 | 2 |
| Onboarding (Doc 12) | 8 | 1 | 0 | 0 |
| Performance (Doc 13) | 3 | 0 | 2 | 1 |
| Legal (Doc 14) | 7 | 0 | 0 | 0 |
| Reporting (Doc 15) | 6 | 0 | 0 | 1 |
| i18n (Doc 16) | 4 | 1 | 4 | 0 |
| CI/CD (Doc 17) | 4 | 1 | 0 | 0 |
| Accessibility (Doc 18) | 2 | 1 | 3 | 0 |
| Vendor Portal (Doc 20) | 7 | 0 | 0 | 0 |
| Totals | 144 | 21 | 10 | 10 |
Remaining Gaps
Most remaining gaps are infrastructure/tooling rather than feature UI:
- Automated a11y testing (Doc 18) — no eslint-plugin-jsx-a11y, axe-core, or Lighthouse CI
- Screen reader testing (Doc 18) — not done
- Virtual scrolling for long lists (Doc 13) — not built
- Image optimization pipeline (Doc 13) — no WebP/variants
- Service worker / PWA (Doc 13) — not built
- ICU MessageFormat / RTL / CSS logical properties (Doc 16) — i18n gaps
- Pseudolocalization testing (Doc 16) — not set up
- Gamification: animated XP counter (Doc 8) — partial, no animation
For a full prioritized breakdown, see Project Status & Gaps.