useBootcampStore

Overview

The useBootcampStore hook provides centralized state management for the FHEVM Bootcamp using Zustand with persistence middleware. It manages learning modes, progress tracking, navigation state, and UI interactions.

import { useBootcampStore } from '@/state/bootcampStore';

Store Implementation

The store uses Zustand’s persist middleware to save state to local storage:

export const useBootcampStore = create<BootcampState>()()
  persist(
    (set, get) => ({ /* state and actions */ }),
    {
      name: 'fhevm-bootcamp-progress',
      partialize: (state) => ({
        learningMode: state.learningMode,
        instructorMode: state.instructorMode,
        currentWeekId: state.currentWeekId,
        currentLessonId: state.currentLessonId,
        progress: state.progress,
      }),
    }
  )
);

State Properties

Learning Mode

learningMode

LearningMode

default:"'self-paced'"

Current learning mode: 'self-paced' or 'cohort'. Affects access control for weeks and lessons.

instructorMode

boolean

default:"true"

Whether instructor mode is enabled. Provides additional controls and visibility for instructors.

currentWeekId

string

default:"'week-1'"

ID of the currently active week.

currentLessonId

string | null

default:"null"

ID of the currently active lesson, or null if viewing week overview.

Progress Data

progress

Record<string, WeekProgress>

Progress data for all weeks, indexed by week ID. See progress-tracking for detailed structure.

UI State

confettiTrigger

boolean

default:"false"

Trigger flag for confetti animation. Set to true to trigger confetti.

State for the celebration modal shown on achievement completion.

Show properties

isOpen

boolean

Whether the modal is visible.

title

string

Modal title text.

subtitle

string

Modal subtitle text.

completedCount

number

Number of items completed.

totalCount

number

Total number of items.

Action Methods

Learning Mode Actions

setLearningMode

(mode: LearningMode) => void

Sets the learning mode to either 'self-paced' or 'cohort'.

const setLearningMode = useBootcampStore((state) => state.setLearningMode);
setLearningMode('cohort');

Show parameters

mode

LearningMode

required

The learning mode to set: 'self-paced' or 'cohort'.

toggleInstructorMode

() => void

Toggles instructor mode on/off.

const toggleInstructorMode = useBootcampStore((state) => state.toggleInstructorMode);
toggleInstructorMode();

setCurrentLocation

(weekId: string, lessonId?: string | null) => void

Sets the current week and optionally the current lesson.

const setCurrentLocation = useBootcampStore((state) => state.setCurrentLocation);

// Navigate to week overview
setCurrentLocation('week-2');

// Navigate to specific lesson
setCurrentLocation('week-2', 'lesson-2-1');

Show parameters

weekId

string

required

The week ID to navigate to.

lessonId

string | null

default:"null"

The lesson ID to navigate to, or null for week overview.

Progress Actions

completeLesson

(weekId: string, lessonId: string) => void

Marks a lesson as completed and records the completion timestamp.

const completeLesson = useBootcampStore((state) => state.completeLesson);
completeLesson('week-1', 'lesson-1-1');

Show parameters

weekId

string

required

The week ID containing the lesson.

lessonId

string

required

The lesson ID to mark as completed.

setQuizScore

(weekId: string, lessonId: string, score: number, passed: boolean) => void

Records a quiz score and pass/fail status for a lesson.

const setQuizScore = useBootcampStore((state) => state.setQuizScore);
setQuizScore('week-1', 'lesson-1-1', 85, true);

Show parameters

weekId

string

required

The week ID containing the lesson.

lessonId

string

required

The lesson ID for the quiz.

score

number

required

The quiz score (typically 0-100).

passed

boolean

required

Whether the quiz was passed.

updateHomeworkStatus

(weekId: string, status: HomeworkStatus) => void

Updates the status of a week’s homework assignment. Automatically records submission timestamp when status is 'submitted'.

const updateHomeworkStatus = useBootcampStore((state) => state.updateHomeworkStatus);
updateHomeworkStatus('week-1', 'submitted');

Show parameters

weekId

string

required

The week ID for the homework.

status

HomeworkStatus

required

The homework status: 'not-started', 'in-progress', 'submitted', or 'graded'.

toggleHomeworkChecklistItem

(weekId: string, itemId: string) => void

Toggles a checklist item in a week’s homework.

const toggleHomeworkChecklistItem = useBootcampStore((state) => state.toggleHomeworkChecklistItem);
toggleHomeworkChecklistItem('week-1', 'task-1');

Show parameters

weekId

string

required

The week ID for the homework.

itemId

string

required

The checklist item ID to toggle.

addTimeSpent

(weekId: string, lessonId: string, minutes: number) => void

Adds time spent on a lesson to the running total.

const addTimeSpent = useBootcampStore((state) => state.addTimeSpent);
addTimeSpent('week-1', 'lesson-1-1', 15);

Show parameters

weekId

string

required

The week ID containing the lesson.

lessonId

string

required

The lesson ID to add time to.

minutes

number

required

Number of minutes to add.

Derived Getter Methods

getWeekProgress

(weekId: string) => { completed: number; total: number; percentage: number }

Calculates progress statistics for a specific week.

const getWeekProgress = useBootcampStore((state) => state.getWeekProgress);
const progress = getWeekProgress('week-1');
// { completed: 3, total: 5, percentage: 60 }

Show parameters

weekId

string

required

The week ID to calculate progress for.

Show returns

completed

number

Number of completed lessons.

total

number

Total number of lessons.

percentage

number

Completion percentage (0-100), rounded to nearest integer.

getOverallProgress

() => { completed: number; total: number; percentage: number }

Calculates progress statistics across all weeks.

const getOverallProgress = useBootcampStore((state) => state.getOverallProgress);
const progress = getOverallProgress();
// { completed: 12, total: 24, percentage: 50 }

Show returns

completed

number

Total number of completed lessons across all weeks.

total

number

Total number of lessons in the bootcamp.

percentage

number

Overall completion percentage (0-100), rounded to nearest integer.

isLessonCompleted

(weekId: string, lessonId: string) => boolean

Checks if a specific lesson has been completed.

const isLessonCompleted = useBootcampStore((state) => state.isLessonCompleted);
const completed = isLessonCompleted('week-1', 'lesson-1-1');

Show parameters

weekId

string

required

The week ID containing the lesson.

lessonId

string

required

The lesson ID to check.

isWeekCompleted

(weekId: string) => boolean

Checks if all lessons in a week have been completed.

const isWeekCompleted = useBootcampStore((state) => state.isWeekCompleted);
const completed = isWeekCompleted('week-1');

Show parameters

weekId

string

required

The week ID to check.

canAccessWeek

(weekId: string) => boolean

Determines if a week is accessible based on learning mode and progress.In self-paced mode, all weeks are accessible. In cohort mode, the previous week must be completed.

const canAccessWeek = useBootcampStore((state) => state.canAccessWeek);
const accessible = canAccessWeek('week-3');

Show parameters

weekId

string

required

The week ID to check access for.

canAccessLesson

(weekId: string, lessonId: string) => boolean

Determines if a lesson is accessible based on learning mode and progress.First checks if the week is accessible. In self-paced mode, all lessons are accessible. In cohort mode, the previous lesson in the same week must be completed.

const canAccessLesson = useBootcampStore((state) => state.canAccessLesson);
const accessible = canAccessLesson('week-2', 'lesson-2-3');

Show parameters

weekId

string

required

The week ID containing the lesson.

lessonId

string

required

The lesson ID to check access for.

UI Actions

triggerConfetti

() => void

Triggers the confetti animation by setting confettiTrigger to true.

const triggerConfetti = useBootcampStore((state) => state.triggerConfetti);
triggerConfetti();

showCelebration

(title: string, subtitle: string, completedCount?: number, totalCount?: number) => void

Shows the celebration modal with custom content.

const showCelebration = useBootcampStore((state) => state.showCelebration);
showCelebration(
  'Week 1 Complete!',
  'Great job completing all lessons',
  5,
  5
);

Show parameters

title

string

required

The modal title text.

subtitle

string

required

The modal subtitle text.

completedCount

number

default:"0"

Number of items completed to display.

totalCount

number

default:"0"

Total number of items to display.

hideCelebration

() => void

Hides the celebration modal.

const hideCelebration = useBootcampStore((state) => state.hideCelebration);
hideCelebration();

Reset Actions

resetProgress

() => void

Resets all progress to initial state. Clears all lesson completions, quiz scores, homework status, and navigation state.

const resetProgress = useBootcampStore((state) => state.resetProgress);
resetProgress();

Usage Examples

Basic Hook Usage

import { useBootcampStore } from '@/state/bootcampStore';

function MyComponent() {
  // Subscribe to specific state
  const learningMode = useBootcampStore((state) => state.learningMode);
  const currentWeekId = useBootcampStore((state) => state.currentWeekId);
  
  // Get actions
  const completeLesson = useBootcampStore((state) => state.completeLesson);
  const setLearningMode = useBootcampStore((state) => state.setLearningMode);
  
  return (
    <div>
      <p>Current mode: {learningMode}</p>
      <p>Current week: {currentWeekId}</p>
    </div>
  );
}

Progress Tracking

function LessonView({ weekId, lessonId }) {
  const completeLesson = useBootcampStore((state) => state.completeLesson);
  const addTimeSpent = useBootcampStore((state) => state.addTimeSpent);
  const isCompleted = useBootcampStore((state) => 
    state.isLessonCompleted(weekId, lessonId)
  );
  
  const handleComplete = () => {
    completeLesson(weekId, lessonId);
    addTimeSpent(weekId, lessonId, 30);
  };
  
  return (
    <button onClick={handleComplete} disabled={isCompleted}>
      {isCompleted ? 'Completed' : 'Mark as Complete'}
    </button>
  );
}

Quiz Submission

function QuizComponent({ weekId, lessonId }) {
  const setQuizScore = useBootcampStore((state) => state.setQuizScore);
  const triggerConfetti = useBootcampStore((state) => state.triggerConfetti);
  
  const handleSubmit = (score: number) => {
    const passed = score >= 70;
    setQuizScore(weekId, lessonId, score, passed);
    
    if (passed) {
      triggerConfetti();
    }
  };
  
  return <div>{/* Quiz UI */}</div>;
}

Access Control

function WeekCard({ weekId }) {
  const canAccess = useBootcampStore((state) => state.canAccessWeek(weekId));
  const isCompleted = useBootcampStore((state) => state.isWeekCompleted(weekId));
  const progress = useBootcampStore((state) => state.getWeekProgress(weekId));
  
  return (
    <div>
      <h3>Week {weekId}</h3>
      <p>Progress: {progress.percentage}%</p>
      {!canAccess && <p>Complete previous week to unlock</p>}
      {isCompleted && <p>✓ Completed</p>}
    </div>
  );
}

Persistence

The store automatically persists the following state to local storage under the key 'fhevm-bootcamp-progress':

learningMode
instructorMode
currentWeekId
currentLessonId
progress

UI state (confetti, celebration modal) is not persisted and resets on page reload.

Core Types

State Management

Components

Overview

Store Implementation

State Properties

Learning Mode

Navigation State

Progress Data

UI State

Action Methods

Learning Mode Actions

Navigation Actions

Progress Actions

Derived Getter Methods

UI Actions

Reset Actions

Usage Examples

Basic Hook Usage

Progress Tracking

Quiz Submission

Access Control

Persistence

Build docs developers (and LLMs) love

Core Types

State Management

Components

Documentation Index

​Overview

​Store Implementation

​State Properties

​Learning Mode

​Navigation State

​Progress Data

​UI State

​Action Methods

​Learning Mode Actions

​Navigation Actions

​Progress Actions

​Derived Getter Methods

​UI Actions

​Reset Actions

​Usage Examples

​Basic Hook Usage

​Progress Tracking

​Quiz Submission

​Access Control

​Persistence

Build docs developers (and LLMs) love

Overview

Store Implementation

State Properties

Learning Mode

Navigation State

Progress Data

UI State

Action Methods

Learning Mode Actions

Navigation Actions

Progress Actions

Derived Getter Methods

UI Actions

Reset Actions

Usage Examples

Basic Hook Usage

Progress Tracking

Quiz Submission

Access Control

Persistence