Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CodeSignal

Personalized Shelf and Progress Tracking

via CodeSignal

Go to class Write review

Overview

Build a personalized reading shelf where users can track and update their progress. You’ll fetch and filter shelf data, implement optimistic updates for a smooth UX, add form validation with React Hook Form and Zod, and display reading statistics in a compact dashboard.

Syllabus

  • Unit 1: Fetching User Shelf
    • Exploring the My Shelf Page
    • Building the Shelf API Function
    • Defining Shelf Types and Skeleton Loader
    • Implementing Shelf Filters Component
    • Implementing the My Shelf Page
  • Unit 2: Optimistic Progress Updates
    • Observing Optimistic Progress Updates
    • Implementing Progress Updates and BookCard
    • Implementing the Progress Editor
    • Rendering Shelf Items with Progress Editor
  • Unit 3: Editing Shelf Status
    • Observing Shelf Status Editing
    • Implementing the ShelfItem Component
    • Mapping Shelf Items in MyShelfPage
    • Implementing the Status Editor
  • Unit 4: Client Side Form Validation
    • Observing Client-Side Form Validation
    • Implementing the FormError Component
    • Adding Zod Validation to Progress Editor
    • Implementing Progress Mutations with Optimistic UI
    • Adding Zod Validation to Login Form
    • Adding Zod Validation to Register Form
  • Unit 5: Building a User Dashboard
    • Observing the User Stats Dashboard
    • Implementing the User Stats API Helper
    • Implementing ProgressBar and StatsHeader Components
    • Implementing Normalization Helpers
    • Implementing Normalized Status Updates in MyShelfPage

Reviews

Start your review of Personalized Shelf and Progress Tracking

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.