Appearance
Store Reference
Auto-generated from
src/store/index.tsbyscripts/generate-docs.mjs. Do not edit manually -- re-run the generator to update.
DoCurious uses Zustand for state management. All stores are exported from src/store/index.ts.
Total stores: 29
Quick Reference
| Store | Description |
|---|---|
useAuthStore | Authentication Store Manages authentication state using Zustand with persistence to localStorage. Handles login (email/password, Google, Apple), logout, registration, and session initialization. Supports workspace switching between personal and school contexts, and provides role-based selectors for authorization checks. Persists only tokens and active workspace; user data is rehydrated from the API on app load via {@link AuthActions.initialize}. @module useAuthStore @example tsx import { useAuthStore, selectUserRole, selectHasAnyRole } from '@/store/useAuthStore' function ProfileHeader() { const { user, isAuthenticated, logout } = useAuthStore() const role = useAuthStore(selectUserRole) const isAdmin = useAuthStore(selectHasAnyRole(['platform_admin', 'school_admin'])) if (!isAuthenticated) return <LoginPrompt /> return ( <header> <span>{user?.displayName} ({role})</span> {isAdmin && <AdminBadge />} <button onClick={logout}>Log out</button> </header> ) } |
useUserStore | User Store Manages user profile, settings, and preferences state. Provides actions for fetching and updating the user's profile (with stats like XP and level), notification settings, and privacy settings. Also supports GDPR-related operations: data export and account deletion. @module useUserStore @example tsx import { useUserStore, selectProfile, selectXpProgress } from '@/store/useUserStore' function ProfilePage() { const { fetchProfile, updateProfile } = useUserStore() const profile = useUserStore(selectProfile) const xpPercent = useUserStore(selectXpProgress) useEffect(() => { fetchProfile() }, []) return ( <div> <Avatar src={profile?.avatarUrl} /> <span>Level {profile?.level} - {xpPercent}% to next</span> </div> ) } |
useChallengeStore | Challenge Store Manages challenge state including browsing, filtering, and user challenges. Provides selectors for common access patterns like featured challenges and per-user challenge stats. Also handles vendor challenge creation and submission workflows. @module useChallengeStore @example tsx import { useChallengeStore, selectFeatured, selectMyChallengeStats } from '@/store/useChallengeStore' function ChallengeHub() { const { fetchChallenges, fetchFeaturedChallenges } = useChallengeStore() const featured = useChallengeStore(selectFeatured) const stats = useChallengeStore(selectMyChallengeStats) useEffect(() => { fetchChallenges() fetchFeaturedChallenges() }, []) return <FeaturedCarousel challenges={featured} inProgressCount={stats.inProgress} /> } |
useTrackRecordStore | Track Record Store Manages track record state for challenge documentation and verification. A track record is the user's evidence of completing a challenge, consisting of entries (text + media) and optional milestone checkpoints. Supports the full lifecycle: create, add entries, attach media, submit for verification, and share. Also includes teacher review actions for approving or rejecting student track records with templated rejection reasons. @module useTrackRecordStore @example tsx import { useTrackRecordStore, selectTrackRecord, selectEntries } from '@/store/useTrackRecordStore' function TrackRecordEditor({ challengeId }: { challengeId: string }) { const { fetchTrackRecord, addEntry, submitForVerification } = useTrackRecordStore() const record = useTrackRecordStore(selectTrackRecord) const entries = useTrackRecordStore(selectEntries) useEffect(() => { fetchTrackRecord(challengeId) }, [challengeId]) return <EntryList entries={entries} onAddEntry={addEntry} /> } |
useExploreStore | Explore Store Manages explore/discovery state including curated views, separated Bucket List and Interesting lists, search with suggestions, pinned view favorites, and the Dealer's Choice random challenge feature. @module useExploreStore |
useCommunityStore | Community Store Manages community state including memberships, feeds, and social features. Supports 6 community types: school (full_school, grade, class), private/friend, and public. Handles three feed types (Bucket List, Track Record, Discussion), challenge assignments within class communities, and batch sharing of track records. @module useCommunityStore @example tsx import { useCommunityStore, selectMyCommunities, selectCurrentFeed } from '@/store/useCommunityStore' function CommunityPage() { const { fetchMyCommunities, fetchFeed } = useCommunityStore() const communities = useCommunityStore(selectMyCommunities) const feed = useCommunityStore(selectCurrentFeed) useEffect(() => { fetchMyCommunities() }, []) return <CommunityList items={communities} feed={feed} /> } |
useGiftStore | Gift Store Manages gift state including sent/received gifts, pending gift notifications, and gift permissions. Users can gift challenges to others by user ID or email. Gift permissions control who can send gifts to the user (everyone, friends only, specific allow/block lists). Not available to Tier 1 (school-only) accounts. @module useGiftStore @example tsx import { useGiftStore, selectPendingGiftCount } from '@/store/useGiftStore' function GiftBadge() { const { fetchPendingGifts } = useGiftStore() const pendingCount = useGiftStore(selectPendingGiftCount) useEffect(() => { fetchPendingGifts() }, []) return pendingCount > 0 ? <Badge count={pendingCount} /> : null } |
useSchoolStore | School Store Manages school administration state for the SA (School Admin) and Teacher roles. Covers the full school hierarchy: school settings, classes, student/teacher rosters, grade levels, class assignments, challenge requests, and survey campaigns. Supports CSV bulk import for student enrollment and class-level dashboard stats. @module useSchoolStore @example tsx import { useSchoolStore, selectClasses, selectStudents } from '@/store/useSchoolStore' function SchoolDashboard() { const { fetchMySchool, fetchClasses, fetchStudents } = useSchoolStore() const classes = useSchoolStore(selectClasses) const students = useSchoolStore(selectStudents) useEffect(() => { fetchMySchool() fetchClasses() }, []) return <ClassRoster classes={classes} students={students} /> } |
useGamificationStore | Gamification Store Manages XP, badges, levels, streaks, and leaderboard state. Tracks 15 levels, 7 badge categories, weekly streaks, and provides leaderboard rankings by XP, challenges completed, or streak length. Triggers badge-earned notifications when milestones are reached. @module useGamificationStore @example tsx import { useGamificationStore } from '@/store/useGamificationStore' function XpBar() { const { totalXp, currentLevel, xpProgress, fetchStats } = useGamificationStore() useEffect(() => { fetchStats(userId) }, [userId]) return ( <ProgressBar label={`Level ${currentLevel.level}: ${currentLevel.name}`} value={xpProgress.progress} max={xpProgress.toNext} /> ) } |
useNotificationStore | Notification Store Manages notification state, pagination, read/unread counts, and user notification preferences. Supports paginated fetching, mark-as-read (individual and bulk), deletion, and preference updates for controlling which notification categories the user receives. @module useNotificationStore @example tsx import { useNotificationStore, selectUnreadCount } from '@/store/useNotificationStore' function NotificationBell() { const { fetchCounts, markAllAsRead } = useNotificationStore() const unread = useNotificationStore(selectUnreadCount) useEffect(() => { fetchCounts() }, []) return ( <button onClick={markAllAsRead}> Notifications {unread > 0 && <Badge count={unread} />} </button> ) } |
useLearningPathStore | Learning Path Store State management for learning paths. |
usePortfolioStore | Portfolio Store State management for portfolios. |
useCommunityGoalStore | Community Goal Store Zustand store for community goals state management. |
useVendorStore | Vendor Store Manages vendor state for the multi-step onboarding flow, profile management, and admin approval workflows. Persists onboarding progress to localStorage so vendors can resume where they left off. The 4-step onboarding covers: Step 1 (profile + billing), Step 2 (commission terms), Step 3 (venues), and Step 4 (review + submit). Integrates with the real vendor API for backend persistence. @module useVendorStore @example tsx import { useVendorStore, selectOnboardingProgress, selectIsVendorApproved } from '@/store/useVendorStore' function VendorDashboard() { const { loadVendor } = useVendorStore() const progress = useVendorStore(selectOnboardingProgress) const isApproved = useVendorStore(selectIsVendorApproved) useEffect(() => { loadVendor(vendorId) }, [vendorId]) return isApproved ? <VendorHome /> : <OnboardingWizard progress={progress} /> } |
useInvitationStore | Invitation Store Manages invitation state for coordinating challenges together. NOTE: Invitations are DISTINCT from Gifts - they coordinate doing challenges TOGETHER |
useOnboardingStore | Onboarding Store Manages role-specific onboarding flow state. |
useShareStore | Share Store Manages Pattern B batch sharing state. |
useAdminStore | Admin Store Manages admin dashboard state: audit logs, flagged content, roles, and verification queue. |
useDealersChoiceStore | Dealer's Choice Store Manages the Dealer's Choice gamified challenge discovery game. |
useLegalStore | Legal Store Manages cookie consent and legal preferences, persisted to localStorage. |
useWalletStore | Wallet Store Manages wallet/balance state for users and vendors. Provides the wallet summary (balance, total in/out, pending amounts), paginated transaction history, and vendor payout records. Transaction types include challenge purchases, gift credits, and vendor payouts. @module useWalletStore @example tsx import { useWalletStore, selectWalletBalance, selectWalletTransactions } from '@/store/useWalletStore' function WalletPage({ userId }: { userId: string }) { const { fetchWalletSummary, fetchTransactions } = useWalletStore() const balance = useWalletStore(selectWalletBalance) const transactions = useWalletStore(selectWalletTransactions) useEffect(() => { fetchWalletSummary(userId) fetchTransactions(userId) }, [userId]) return <WalletDashboard balance={balance} transactions={transactions} /> } |
useCheckoutStore | Checkout Store Manages shopping cart and checkout flow state. Uses existing payment types and paymentApi for processing. |
useFeatureFlagStore | Feature Flag Store Manages feature flag definitions, CRUD operations, and flag evaluation. Persists to localStorage as the mock backend -- designed to swap to a real API by replacing the persist layer with async API calls. Supports boolean, multivariate (A/B), and JSON flag types with targeting rules based on role, user ID, account tier, percentage rollout, and environment. Evaluation uses deterministic hashing so a user always gets the same result for a given flag. @module useFeatureFlagStore @example tsx import { useFeatureFlagStore, selectFlagByKey } from '@/store/useFeatureFlagStore' function WalletFeature() { const { evaluateFlag } = useFeatureFlagStore() const walletFlag = useFeatureFlagStore(selectFlagByKey('wallet_v2')) const result = evaluateFlag('wallet_v2', { userId: 'user-123', role: 'platform_admin', accountTier: 'standard', environment: 'production', }) return result.enabled ? <WalletV2 /> : <WalletV1 /> } |
useDebugPanelStore | Debug Panel Store Manages the debug panel UI state (open/closed, active tab). Persisted to localStorage so it remembers across page refreshes. Only used in development mode. |
useNetworkLogStore | Network Log Store In-memory circular buffer for API request/response logs. NOT persisted — network logs are session-only. Consumed by the Debug Panel's Network tab. |
useDemoModeStore | Demo Mode Store Manages demo mode state -- active flag, current persona, and saved session for seamless entry/exit. Used by the DemoModeBar and DemoLanding page to drive the demo experience. Only functional when mock API is active. When entering demo mode, the store snapshots the current auth session, resets the mock database, and logs in as the selected persona. On exit, the previous session is restored. Supports 6 personas: Student, Teacher, Parent, School Admin, Vendor, and Platform Admin. @module useDemoModeStore @example tsx import { useDemoModeStore, getDemoPersona, DEMO_PERSONAS } from '@/store/useDemoModeStore' function DemoBar() { const { isActive, activePersonaKey, switchPersona, exitDemo } = useDemoModeStore() const navigate = useNavigate() if (!isActive) return null return ( <div> Demo: {getDemoPersona(activePersonaKey!)?.label} <button onClick={() => switchPersona('teacher', navigate)}>Switch to Teacher</button> <button onClick={() => exitDemo(navigate)}>Exit Demo</button> </div> ) } |
useReflectionStore | Reflection Store Manages reflection state including prompts, responses, user reflections, and analytics. Provides selectors for common access patterns. @module useReflectionStore @example tsx import { useReflectionStore, selectPrompts, selectUserReflections } from '@/store/useReflectionStore' function ReflectionPage() { const { fetchPrompts, fetchUserReflections } = useReflectionStore() const prompts = useReflectionStore(selectPrompts) const reflections = useReflectionStore(selectUserReflections) useEffect(() => { fetchPrompts() fetchUserReflections() }, []) return <ReflectionList reflections={reflections} /> } |
useImpersonationStore | Impersonation Store Lets platform admins and staff "become" any user to see exactly what they see. Saves the admin session and restores on exit. Only accessible to platform_admin and staff roles. |
useToastStore | Toast Notification Store Manages transient, auto-dismissing notifications (toasts) for action confirmations, errors, and success messages. Distinct from useNotificationStore which manages persistent in-app notifications (notification bell/inbox). |
useAuthStore
Authentication Store Manages authentication state using Zustand with persistence to localStorage. Handles login (email/password, Google, Apple), logout, registration, and session initialization. Supports workspace switching between personal and school contexts, and provides role-based selectors for authorization checks. Persists only tokens and active workspace; user data is rehydrated from the API on app load via {@link AuthActions.initialize}. @module useAuthStore @example tsx import { useAuthStore, selectUserRole, selectHasAnyRole } from '@/store/useAuthStore' function ProfileHeader() { const { user, isAuthenticated, logout } = useAuthStore() const role = useAuthStore(selectUserRole) const isAdmin = useAuthStore(selectHasAnyRole(['platform_admin', 'school_admin'])) if (!isAuthenticated) return <LoginPrompt /> return ( <header> <span>{user?.displayName} ({role})</span> {isAdmin && <AdminBadge />} <button onClick={logout}>Log out</button> </header> ) }
File: src/store/useAuthStore.ts
Hook
useAuthStore
Selectors
selectUserRoleselectIsUnder13selectIsMinorselectHasRoleselectHasAnyRoleselectHasSchoolselectNeedsConsentselectIsSchoolContextselectCanAccessSchoolselectIsSchoolAdminselectIsTier1selectCanCreateCommunityselectCanAccessSavedListselectCanReceiveGiftsselectCanUseDealersChoiceselectActiveContextselectAvailableContextsselectHasContextselectRoleInContextselectHasLinkedChildrenselectIsVendor
Types
WorkspaceContext
useUserStore
User Store Manages user profile, settings, and preferences state. Provides actions for fetching and updating the user's profile (with stats like XP and level), notification settings, and privacy settings. Also supports GDPR-related operations: data export and account deletion. @module useUserStore @example tsx import { useUserStore, selectProfile, selectXpProgress } from '@/store/useUserStore' function ProfilePage() { const { fetchProfile, updateProfile } = useUserStore() const profile = useUserStore(selectProfile) const xpPercent = useUserStore(selectXpProgress) useEffect(() => { fetchProfile() }, []) return ( <div> <Avatar src={profile?.avatarUrl} /> <span>Level {profile?.level} - {xpPercent}% to next</span> </div> ) }
File: src/store/useUserStore.ts
Hook
useUserStore
Selectors
selectProfileselectLevelselectXpselectXpToNextLevelselectXpProgress
useChallengeStore
Challenge Store Manages challenge state including browsing, filtering, and user challenges. Provides selectors for common access patterns like featured challenges and per-user challenge stats. Also handles vendor challenge creation and submission workflows. @module useChallengeStore @example tsx import { useChallengeStore, selectFeatured, selectMyChallengeStats } from '@/store/useChallengeStore' function ChallengeHub() { const { fetchChallenges, fetchFeaturedChallenges } = useChallengeStore() const featured = useChallengeStore(selectFeatured) const stats = useChallengeStore(selectMyChallengeStats) useEffect(() => { fetchChallenges() fetchFeaturedChallenges() }, []) return <FeaturedCarousel challenges={featured} inProgressCount={stats.inProgress} /> }
File: src/store/useChallengeStore.ts
Hook
useChallengeStore
Selectors
selectChallengesselectCategoriesselectFeaturedselectMyChallengesselectMyChallengeStatsselectVendorChallengesselectCurrentChallenge
useTrackRecordStore
Track Record Store Manages track record state for challenge documentation and verification. A track record is the user's evidence of completing a challenge, consisting of entries (text + media) and optional milestone checkpoints. Supports the full lifecycle: create, add entries, attach media, submit for verification, and share. Also includes teacher review actions for approving or rejecting student track records with templated rejection reasons. @module useTrackRecordStore @example tsx import { useTrackRecordStore, selectTrackRecord, selectEntries } from '@/store/useTrackRecordStore' function TrackRecordEditor({ challengeId }: { challengeId: string }) { const { fetchTrackRecord, addEntry, submitForVerification } = useTrackRecordStore() const record = useTrackRecordStore(selectTrackRecord) const entries = useTrackRecordStore(selectEntries) useEffect(() => { fetchTrackRecord(challengeId) }, [challengeId]) return <EntryList entries={entries} onAddEntry={addEntry} /> }
File: src/store/useTrackRecordStore.ts
Hook
useTrackRecordStore
Selectors
selectTrackRecordselectEntriesselectIsSubmittedselectIsVerified
useExploreStore
Explore Store Manages explore/discovery state including curated views, separated Bucket List and Interesting lists, search with suggestions, pinned view favorites, and the Dealer's Choice random challenge feature. @module useExploreStore
File: src/store/useExploreStore.ts
Hook
useExploreStore
Selectors
selectCuratedViewsselectPinnedViewIdsselectSavedListselectDealersChoice
useCommunityStore
Community Store Manages community state including memberships, feeds, and social features. Supports 6 community types: school (full_school, grade, class), private/friend, and public. Handles three feed types (Bucket List, Track Record, Discussion), challenge assignments within class communities, and batch sharing of track records. @module useCommunityStore @example tsx import { useCommunityStore, selectMyCommunities, selectCurrentFeed } from '@/store/useCommunityStore' function CommunityPage() { const { fetchMyCommunities, fetchFeed } = useCommunityStore() const communities = useCommunityStore(selectMyCommunities) const feed = useCommunityStore(selectCurrentFeed) useEffect(() => { fetchMyCommunities() }, []) return <CommunityList items={communities} feed={feed} /> }
File: src/store/useCommunityStore.ts
Hook
useCommunityStore
Selectors
selectCommunitiesselectMyCommunitiesselectCurrentCommunityselectCurrentFeed
useGiftStore
Gift Store Manages gift state including sent/received gifts, pending gift notifications, and gift permissions. Users can gift challenges to others by user ID or email. Gift permissions control who can send gifts to the user (everyone, friends only, specific allow/block lists). Not available to Tier 1 (school-only) accounts. @module useGiftStore @example tsx import { useGiftStore, selectPendingGiftCount } from '@/store/useGiftStore' function GiftBadge() { const { fetchPendingGifts } = useGiftStore() const pendingCount = useGiftStore(selectPendingGiftCount) useEffect(() => { fetchPendingGifts() }, []) return pendingCount > 0 ? <Badge count={pendingCount} /> : null }
File: src/store/useGiftStore.ts
Hook
useGiftStore
Selectors
selectSentGiftsselectReceivedGiftsselectPendingGiftsselectPendingGiftCount
useSchoolStore
School Store Manages school administration state for the SA (School Admin) and Teacher roles. Covers the full school hierarchy: school settings, classes, student/teacher rosters, grade levels, class assignments, challenge requests, and survey campaigns. Supports CSV bulk import for student enrollment and class-level dashboard stats. @module useSchoolStore @example tsx import { useSchoolStore, selectClasses, selectStudents } from '@/store/useSchoolStore' function SchoolDashboard() { const { fetchMySchool, fetchClasses, fetchStudents } = useSchoolStore() const classes = useSchoolStore(selectClasses) const students = useSchoolStore(selectStudents) useEffect(() => { fetchMySchool() fetchClasses() }, []) return <ClassRoster classes={classes} students={students} /> }
File: src/store/useSchoolStore.ts
Hook
useSchoolStore
Selectors
selectSchoolselectSchoolStatsselectClassesselectStudentsselectTeachersselectAssignmentsselectGraduatingStudents
useGamificationStore
Gamification Store Manages XP, badges, levels, streaks, and leaderboard state. Tracks 15 levels, 7 badge categories, weekly streaks, and provides leaderboard rankings by XP, challenges completed, or streak length. Triggers badge-earned notifications when milestones are reached. @module useGamificationStore @example tsx import { useGamificationStore } from '@/store/useGamificationStore' function XpBar() { const { totalXp, currentLevel, xpProgress, fetchStats } = useGamificationStore() useEffect(() => { fetchStats(userId) }, [userId]) return ( <ProgressBar label={`Level ${currentLevel.level}: ${currentLevel.name}`} value={xpProgress.progress} max={xpProgress.toNext} /> ) }
File: src/store/useGamificationStore.ts
Hook
useGamificationStore
useNotificationStore
Notification Store Manages notification state, pagination, read/unread counts, and user notification preferences. Supports paginated fetching, mark-as-read (individual and bulk), deletion, and preference updates for controlling which notification categories the user receives. @module useNotificationStore @example tsx import { useNotificationStore, selectUnreadCount } from '@/store/useNotificationStore' function NotificationBell() { const { fetchCounts, markAllAsRead } = useNotificationStore() const unread = useNotificationStore(selectUnreadCount) useEffect(() => { fetchCounts() }, []) return ( <button onClick={markAllAsRead}> Notifications {unread > 0 && <Badge count={unread} />} </button> ) }
File: src/store/useNotificationStore.ts
Hook
useNotificationStore
Selectors
selectNotificationsselectUnreadCountselectNotificationCountsselectPreferencesselectGroupedNotifications
useLearningPathStore
Learning Path Store State management for learning paths.
File: src/store/useLearningPathStore.ts
Hook
useLearningPathStore
Selectors
selectPathsselectUserPathsselectSelectedPath
usePortfolioStore
Portfolio Store State management for portfolios.
File: src/store/usePortfolioStore.ts
Hook
usePortfolioStore
Selectors
selectPortfoliosselectSelectedPortfolio
useCommunityGoalStore
Community Goal Store Zustand store for community goals state management.
File: src/store/useCommunityGoalStore.ts
Hook
useCommunityGoalStore
useVendorStore
Vendor Store Manages vendor state for the multi-step onboarding flow, profile management, and admin approval workflows. Persists onboarding progress to localStorage so vendors can resume where they left off. The 4-step onboarding covers: Step 1 (profile + billing), Step 2 (commission terms), Step 3 (venues), and Step 4 (review + submit). Integrates with the real vendor API for backend persistence. @module useVendorStore @example tsx import { useVendorStore, selectOnboardingProgress, selectIsVendorApproved } from '@/store/useVendorStore' function VendorDashboard() { const { loadVendor } = useVendorStore() const progress = useVendorStore(selectOnboardingProgress) const isApproved = useVendorStore(selectIsVendorApproved) useEffect(() => { loadVendor(vendorId) }, [vendorId]) return isApproved ? <VendorHome /> : <OnboardingWizard progress={progress} /> }
File: src/store/useVendorStore.ts
Hook
useVendorStore
Selectors
selectVendorApprovalStatusselectIsVendorApprovedselectNeedsModificationselectNeedsAgreementselectOnboardingProgressselectVendorOrdersselectVendorAnalyticsselectVendorMonthlyDataselectVendorTopChallengesselectVendorEvents
useInvitationStore
Invitation Store Manages invitation state for coordinating challenges together. NOTE: Invitations are DISTINCT from Gifts - they coordinate doing challenges TOGETHER
File: src/store/useInvitationStore.ts
Hook
useInvitationStore
Selectors
selectSentInvitationsselectReceivedInvitationsselectPendingInvitationsselectPendingInvitationCount
useOnboardingStore
Onboarding Store Manages role-specific onboarding flow state.
File: src/store/useOnboardingStore.ts
Hook
useOnboardingStore
Selectors
selectOnboardingStepselectIsOnboardingCompleteselectTourActive
useShareStore
Share Store Manages Pattern B batch sharing state.
File: src/store/useShareStore.ts
Hook
useShareStore
Selectors
selectSelectedItemsselectTargetCommunitiesselectIsSharing
useAdminStore
Admin Store Manages admin dashboard state: audit logs, flagged content, roles, and verification queue.
File: src/store/useAdminStore.ts
Hook
useAdminStore
Selectors
selectAuditLogsselectFlaggedContentselectSelectedUserselectAdminRolesselectVerificationQueue
useDealersChoiceStore
Dealer's Choice Store Manages the Dealer's Choice gamified challenge discovery game.
File: src/store/useDealersChoiceStore.ts
Hook
useDealersChoiceStore
Selectors
selectCurrentGameselectDealtCardsselectGameStatusselectDCHistoryselectOnCooldown
useLegalStore
Legal Store Manages cookie consent and legal preferences, persisted to localStorage.
File: src/store/useLegalStore.ts
Hook
useLegalStore
Selectors
selectConsentStatusselectCookiePreferencesselectShowBanner
useWalletStore
Wallet Store Manages wallet/balance state for users and vendors. Provides the wallet summary (balance, total in/out, pending amounts), paginated transaction history, and vendor payout records. Transaction types include challenge purchases, gift credits, and vendor payouts. @module useWalletStore @example tsx import { useWalletStore, selectWalletBalance, selectWalletTransactions } from '@/store/useWalletStore' function WalletPage({ userId }: { userId: string }) { const { fetchWalletSummary, fetchTransactions } = useWalletStore() const balance = useWalletStore(selectWalletBalance) const transactions = useWalletStore(selectWalletTransactions) useEffect(() => { fetchWalletSummary(userId) fetchTransactions(userId) }, [userId]) return <WalletDashboard balance={balance} transactions={transactions} /> }
File: src/store/useWalletStore.ts
Hook
useWalletStore
Selectors
selectWalletBalanceselectWalletSummaryselectWalletTransactionsselectPayouts
useCheckoutStore
Checkout Store Manages shopping cart and checkout flow state. Uses existing payment types and paymentApi for processing.
File: src/store/useCheckoutStore.ts
Hook
useCheckoutStore
Selectors
selectCartItemCountselectCartTotal
useFeatureFlagStore
Feature Flag Store Manages feature flag definitions, CRUD operations, and flag evaluation. Persists to localStorage as the mock backend -- designed to swap to a real API by replacing the persist layer with async API calls. Supports boolean, multivariate (A/B), and JSON flag types with targeting rules based on role, user ID, account tier, percentage rollout, and environment. Evaluation uses deterministic hashing so a user always gets the same result for a given flag. @module useFeatureFlagStore @example tsx import { useFeatureFlagStore, selectFlagByKey } from '@/store/useFeatureFlagStore' function WalletFeature() { const { evaluateFlag } = useFeatureFlagStore() const walletFlag = useFeatureFlagStore(selectFlagByKey('wallet_v2')) const result = evaluateFlag('wallet_v2', { userId: 'user-123', role: 'platform_admin', accountTier: 'standard', environment: 'production', }) return result.enabled ? <WalletV2 /> : <WalletV1 /> }
File: src/store/useFeatureFlagStore.ts
Hook
useFeatureFlagStore
Selectors
selectFlagsselectActiveFlagsselectFlagByKey
useDebugPanelStore
Debug Panel Store Manages the debug panel UI state (open/closed, active tab). Persisted to localStorage so it remembers across page refreshes. Only used in development mode.
File: src/store/useDebugPanelStore.ts
Hook
useDebugPanelStore
Types
DebugTab
useNetworkLogStore
Network Log Store In-memory circular buffer for API request/response logs. NOT persisted — network logs are session-only. Consumed by the Debug Panel's Network tab.
File: src/store/useNetworkLogStore.ts
Hook
useNetworkLogStore
Types
NetworkLogEntry
useDemoModeStore
Demo Mode Store Manages demo mode state -- active flag, current persona, and saved session for seamless entry/exit. Used by the DemoModeBar and DemoLanding page to drive the demo experience. Only functional when mock API is active. When entering demo mode, the store snapshots the current auth session, resets the mock database, and logs in as the selected persona. On exit, the previous session is restored. Supports 6 personas: Student, Teacher, Parent, School Admin, Vendor, and Platform Admin. @module useDemoModeStore @example tsx import { useDemoModeStore, getDemoPersona, DEMO_PERSONAS } from '@/store/useDemoModeStore' function DemoBar() { const { isActive, activePersonaKey, switchPersona, exitDemo } = useDemoModeStore() const navigate = useNavigate() if (!isActive) return null return ( <div> Demo: {getDemoPersona(activePersonaKey!)?.label} <button onClick={() => switchPersona('teacher', navigate)}>Switch to Teacher</button> <button onClick={() => exitDemo(navigate)}>Exit Demo</button> </div> ) }
File: src/store/useDemoModeStore.ts
Hooks
useDemoModeStoreDEMO_PERSONASgetDemoPersona
Types
DemoPersona
useReflectionStore
Reflection Store Manages reflection state including prompts, responses, user reflections, and analytics. Provides selectors for common access patterns. @module useReflectionStore @example tsx import { useReflectionStore, selectPrompts, selectUserReflections } from '@/store/useReflectionStore' function ReflectionPage() { const { fetchPrompts, fetchUserReflections } = useReflectionStore() const prompts = useReflectionStore(selectPrompts) const reflections = useReflectionStore(selectUserReflections) useEffect(() => { fetchPrompts() fetchUserReflections() }, []) return <ReflectionList reflections={reflections} /> }
File: src/store/useReflectionStore.ts
Hook
useReflectionStore
Selectors
selectPromptsselectResponsesselectUserReflectionsselectAnalyticsselectIsLoading as selectReflectionIsLoading
Types
UserReflectionReflectionAnalyticsData
useImpersonationStore
Impersonation Store Lets platform admins and staff "become" any user to see exactly what they see. Saves the admin session and restores on exit. Only accessible to platform_admin and staff roles.
File: src/store/useImpersonationStore.ts
Hook
useImpersonationStore
useToastStore
Toast Notification Store Manages transient, auto-dismissing notifications (toasts) for action confirmations, errors, and success messages. Distinct from useNotificationStore which manages persistent in-app notifications (notification bell/inbox).
File: src/store/useToastStore.ts
Hook
useToastStore
Selectors
selectToasts
Other Exports
toast
Types
ToastToastVariant