useBootcampStore

Zustand store hook for managing bootcamp state, progress tracking, and UI interactions

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.

Navigation State

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.

celebrationModal · object

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();

Navigation Actions

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.