Overview

Add centralized state management using Zustand or Redux Toolkit.

Background

App lacks centralized state management, causing prop drilling and inconsistent UI state.

Specifications

State Slices to Create:

• User state (profile, preferences)
• Quest state (list, filters, pagination)
• Submission state (drafts, status)
• Notification state (unread count, list)
• Wallet state (address, balance)
• UI state (modals, theme, sidebar)
• API state (loading, errors, cache)

Tasks:

• Choose state library (Zustand recommended)
• Configure store
• Create state slices
• Implement selectors
• Add persistence middleware
• Create devtools integration
• Build optimistic updates
• Add state hydration
• Write store tests

Impacted Files:

• lib/store/index.ts (new)
• lib/store/slices/userSlice.ts (new)
• lib/store/slices/questSlice.ts (new)
• lib/store/slices/submissionSlice.ts (new)
• lib/store/slices/notificationSlice.ts (new)
• lib/store/slices/uiSlice.ts (new)
• lib/store/middleware/persistence.ts (new)
• components/* (update to use store)

Labels: frontend, state-management, zustand, architecture, redux

Acceptance Criteria

• Store configured correctly
• All state slices created
• Selectors work efficiently
• Persistence saves to localStorage
• Devtools show state changes
• Optimistic updates function
• Components connected to store
• No prop drilling needed
• Tests validate behavior

FIGMA link

🙌Contribution Guidelines:

Assignment required before PR submission
Timeframe: 96-120 hours
PR description must include: Close #[issue-number]
Include te screenshot of your implementation/s
Star the repo⭐
For more context, please refer to the frontend README 🚀