HomeworkPage - Journey - FHEVM Developer Bootcamp

Overview

The HomeworkPage component displays comprehensive homework assignments for each week, including requirements checklist, code templates, grading criteria, and submission instructions. Location: src/pages/HomeworkPage.tsx

Features

Interactive requirements checklist with completion tracking
Status management (not-started, in-progress, submitted, graded)
Code templates with starter and solution code
Detailed grading rubric display
Submission instructions with portal integration
Progress persistence across sessions
Automatic status updates based on checklist completion

Component Interface

const HomeworkPage: React.FC = () => {
  // No props - uses URL params via React Router
}

URL Parameters

weekId

string

required

The unique identifier for the week (e.g., “week1”)

Dependencies

State Management

useBootcampStore - Manages homework progress, status, and checklist
useTranslatedCurriculum - Provides localized curriculum data

Data Helpers

getWeekById() - Retrieves week data including homework

Child Components

GradingRubric - Displays grading criteria
CodeTemplate - Shows starter and solution code

Usage Example

Route Configuration

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomeworkPage from '@/pages/HomeworkPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/week/:weekId/homework" element={<HomeworkPage />} />
      </Routes>
    </BrowserRouter>
  );
}

import { useNavigate } from 'react-router-dom';

function WeekOverview() {
  const navigate = useNavigate();
  
  const openHomework = (weekId: string) => {
    navigate(`/week/${weekId}/homework`);
  };
  
  return (
    <button onClick={() => openHomework('week1')}>
      View Week 1 Homework
    </button>
  );
}

Homework Data Structure

interface Homework {
  id: string;
  title: string;
  description: string;
  requirements: Requirement[];
  gradingCriteria: GradingCriterion[];
  starterCode?: CodeSnippet;
  solutionCode?: CodeSnippet;
  estimatedHours: number;
  submissionInstructions: string[];
}

interface Requirement {
  id: string;
  title: string;
  description: string;
  type: 'code' | 'written' | 'practical' | 'screenshot';
}

Status Management

Status Types

not-started

status

Initial state - homework not yet begunBadge Color: Muted gray

in-progress

status

At least one requirement checkedBadge Color: Amber/yellow

submitted

status

All requirements completed and marked as submittedBadge Color: Blue

graded

status

Homework reviewed by instructor (future feature)Badge Color: Green

Status Transitions

// Auto-transition: not-started → in-progress
toggleHomeworkChecklistItem(weekId, req.id);
if (hwStatus === 'not-started') {
  updateHomeworkStatus(weekId, 'in-progress');
}

// Manual transition: in-progress → submitted
<Button 
  onClick={() => updateHomeworkStatus(weekId, 'submitted')}
  disabled={!allChecked}
>
  Mark as Submitted
</Button>

Requirements Checklist

Checklist State

const checklist = hwProgress?.checklist ?? {}; // { [reqId]: boolean }
const allChecked = hw.requirements.every((r) => checklist[r.id]);

Requirement Display

Each requirement shows:

Checkbox for completion tracking
Requirement title
Type badge (code, written, practical, screenshot)
Description text
Visual feedback when checked (green border/background)

Interaction

<Checkbox
  checked={checklist[req.id] ?? false}
  onCheckedChange={() => {
    toggleHomeworkChecklistItem(weekId, req.id);
    if (hwStatus === 'not-started') {
      updateHomeworkStatus(weekId, 'in-progress');
    }
  }}
/>

Code Templates

Display Conditions

{hw.starterCode && hw.solutionCode && (
  <CodeTemplate
    starterCode={hw.starterCode}
    solutionCode={hw.solutionCode}
    description={t('ui.homework.codeTemplateDescription')}
  />
)}

Code Snippet Structure

interface CodeSnippet {
  language: string;      // e.g., "solidity", "typescript"
  code: string;          // The actual code
  filename?: string;     // e.g., "Counter.sol"
  description?: string;  // Code description
}

Grading Rubric

Displays detailed grading criteria via GradingRubric component:

interface GradingCriterion {
  name: string;          // Criterion name
  weight: number;        // Percentage weight
  description: string;   // What's being evaluated
  rubric: {             // Score levels
    score: string;       // e.g., "Excellent", "Good"
    description: string; // What qualifies for this score
  }[];
}

Submission Instructions

Instruction Display

<ol className="space-y-2">
  {hw.submissionInstructions.map((instruction, i) => {
    const isComingSoon = instruction.includes('[Submission portal coming soon]');
    return (
      <li key={i}>
        <span className="step-number">{i + 1}</span>
        <span>{instruction}</span>
        {isComingSoon && (
          <Badge variant="outline">Coming Soon</Badge>
        )}
      </li>
    );
  })}
</ol>

Coming Soon Badge

Automatically detects and highlights placeholder instructions:

const isComingSoon = instruction.includes('[Submission portal coming soon]');

Action Buttons

Not Started State

<Button
  variant="outline"
  onClick={() => updateHomeworkStatus(weekId, 'in-progress')}
>
  <Circle className="h-4 w-4" />
  Start Homework
</Button>

In Progress State

<Button
  onClick={() => updateHomeworkStatus(weekId, 'submitted')}
  disabled={!allChecked}
>
  <CheckCircle className="h-4 w-4" />
  Mark as Submitted
</Button>

Disabled when:

Not all requirements are checked
Prevents incomplete submissions

Submitted State

<Badge className="bg-blue-500/10 text-blue-600">
  <CheckCircle className="h-4 w-4" />
  Submitted — Awaiting Review
</Badge>

Header Information

Metadata Badges

<Badge variant="outline">Week {week.number}</Badge>
<Badge variant="outline">
  <FileText className="h-3 w-3" />
  Homework
</Badge>
<Badge variant="outline">
  <Clock className="h-3 w-3" />
  {hw.estimatedHours} hours
</Badge>
<Badge className={statusColors[hwStatus]}>
  {statusLabel}
</Badge>

Title and Description

<h1 className="text-3xl font-display font-bold">{hw.title}</h1>
<p className="text-lg text-muted-foreground">{hw.description}</p>

// Top of page
<Button onClick={() => navigate(`/week/${weekId}`)}>
  <ArrowLeft /> Back to Week {week.number}
</Button>

// Bottom of page
<Button variant="ghost" onClick={() => navigate(`/week/${weekId}`)}>
  <ArrowLeft /> Back to Week
</Button>

Error Handling

Week Not Found

if (!week || !weekId) {
  return (
    <div className="max-w-4xl mx-auto p-8 text-center">
      <h1 className="text-2xl font-bold mb-4">Homework not found</h1>
      <Button onClick={() => navigate('/')}>Back to Dashboard</Button>
    </div>
  );
}

Progress Persistence

Homework progress is automatically saved to the bootcamp store:

interface HomeworkProgress {
  status: 'not-started' | 'in-progress' | 'submitted' | 'graded';
  checklist: Record<string, boolean>; // { [requirementId]: completed }
  submittedAt?: string;
  grade?: number;
  feedback?: string;
}

Internationalization

Supports translation for all UI text:

const { t } = useTranslation();

t('ui.homework.notFound')
t('ui.homework.backToWeek', { number: week.number })
t('ui.homework.label')
t('ui.homework.requirements')
t('ui.homework.submissionInstructions')

Animation

Uses Framer Motion for header animation:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  className="space-y-3"
>
  {/* Header content */}
</motion.div>

Best Practices

Checklist Design

Keep requirements focused and specific
Use clear, actionable titles
Include 4-8 requirements per homework
Mix requirement types (code, written, practical)

Code Templates

// ✅ Good: Provide both starter and solution
starterCode: {
  language: 'solidity',
  code: '// TODO: Implement contract',
  filename: 'MyContract.sol'
}
solutionCode: {
  language: 'solidity',
  code: '// Complete implementation',
  filename: 'MyContract.sol'
}

// ❌ Bad: Missing solution code
starterCode: { ... }
// solutionCode omitted

Status Flow

// ✅ Good: Natural progression
not-started → in-progress → submitted → graded

// ❌ Bad: Skipping steps
not-started → submitted (missing checklist validation)

LessonView - Main lesson display
GradingRubric - Grading criteria display
CodeTemplate - Code template viewer

Core Types

State Management

Components

Documentation Index

​Overview

​Features

​Component Interface

​URL Parameters

​Dependencies

​State Management

​Data Helpers

​Child Components

​Usage Example

​Route Configuration

​Navigation to Homework

​Homework Data Structure

​Status Management

​Status Types

​Status Transitions

​Requirements Checklist

​Checklist State

​Requirement Display

​Interaction

​Code Templates

​Display Conditions

​Code Snippet Structure

​Grading Rubric

​Submission Instructions

​Instruction Display

​Coming Soon Badge

​Action Buttons

​Not Started State

​In Progress State

​Submitted State

​Header Information

​Metadata Badges

​Title and Description

​Navigation

​Back Navigation

​Error Handling

​Week Not Found

​Progress Persistence

​Internationalization

​Animation

​Best Practices

​Checklist Design

​Code Templates

​Status Flow

​Related Components

​See Also

Overview

Features

Component Interface

URL Parameters

Dependencies

State Management

Data Helpers

Child Components

Usage Example

Route Configuration

Navigation to Homework

Homework Data Structure

Status Management

Status Types

Status Transitions

Requirements Checklist

Checklist State

Requirement Display

Interaction

Code Templates

Display Conditions

Code Snippet Structure

Grading Rubric

Submission Instructions

Instruction Display

Coming Soon Badge

Action Buttons

Not Started State

In Progress State

Submitted State

Header Information

Metadata Badges

Title and Description

Navigation

Back Navigation

Error Handling

Week Not Found

Progress Persistence

Internationalization

Animation

Best Practices

Checklist Design

Code Templates

Status Flow

Related Components

See Also