Welcome to sim

Your guide to understanding the codebase

Learning Path

14 units • 4 levels

Orchestration & APIs

Pipelines, workflows, public interfaces • 3 units

Monorepo Architecture & Project Structure

Architecture

Data Layer & Authentication

Data Model·11

State Management & Data Fetching

Patterns·1

Core Logic & Data

Business rules, schemas, models • 3 units

LLM Integration & AI Copilot

Integration·5

Tool & Integration Framework

Integration·17

Workflow Canvas & Block System

Patterns·9

Interaction & Integration

UI components, external connectors • 3 units

Knowledge Base & RAG System

Data Model·6

Execution Infrastructure & Monitoring

Infrastructure·25

Workflow Execution & Automation

Workflow·5

Cross-Cutting Concerns

Auth, logging, config, testing • 2 units

Production & Collaboration

Concurrency·20

Security & API Management

Security·6

Test Your Knowledge

24 questions across all levels

Hands-On Assignment

45-60 minutes

Your Challenge

Build a custom React Query devtools panel that visualizes the query cache state and allows developers to inspect active queries, their data, and refetch status in real-time. The panel should integrate with the existing QueryProvider and display query keys, cache times, and stale status. This will help developers debug data fetching issues and understand how React Query manages state across the application.

Starting Points

  • apps/sim/app/_shell/providers/query-provider.tsx:1-43
    Examine how QueryClientProvider is configured and the default query options being used

  • apps/sim/app/_shell/providers/query-provider.tsx:10-30
    This is where you'll add your custom devtools component alongside the existing QueryClientProvider

  • apps/sim/app/_shell/providers/query-provider.tsx:1-15
    Note the provider pattern and how children are wrapped - your devtools should follow this pattern

Success Criteria

  • Devtools panel appears only in development mode (NODE_ENV !== 'production')
  • Panel displays all active queries with their query keys in a readable format
  • Clicking a query shows detailed information: data, fetch status, stale state, and last updated time
  • Panel updates in real-time when queries are added, removed, or refetched
  • Includes a manual refetch button for each query that triggers query.refetch()
  • Panel can be toggled open/closed without breaking existing functionality
  • Existing application behavior remains unchanged when devtools are closed

Hints

  • Hint 1: Understanding React Query's cache structureconceptual
  • Hint 2: Real-time updates for the devtoolsimplementation
  • Hint 3: Conditional rendering for developmentcode location
  • Hint 4: Displaying query informationimplementation

Prerequisites:

  • React hooks (useState, useEffect)
  • React Query basics
  • TypeScript interfaces