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

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

  • (click to reveal)
    • Hint 1: Understanding React Query's cache structure conceptual
    • Hint 2: Real-time updates for the devtools implementation
    • Hint 3: Conditional rendering for development code location
    • Hint 4: Displaying query information implementation

Prerequisites

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