Welcome to Metabase

Your guide to understanding the codebase

Learning Path

15 units • 5 levels

Orchestration & APIs

  • Pipelines, workflows, public interfaces • 3 units
  • API Layer and State Management
  • Data Model and Entity Framework
  • Component Library and UI Patterns
  • Core Logic & Data
    • Business rules, schemas, models • 3 units
  • Database Connections and Data Management
  • Dashboard and Parameter System
  • Query Builder and Visualization Engine

Interaction & Integration

  • UI components, external connectors • 3 units
  • Enterprise Features and Embedding SDK
  • Security and Multi-tenancy
  • Actions, Alerts, and Automation
  • Cross-Cutting Concerns
    • Auth, logging, config, testing • 2 units
  • Infrastructure and Admin Systems
  • Testing, Error Handling, and Versioning
  • Edge Cases & Resilience
    • Error handling, fault tolerance • 1 units

Additional Error Handling Patterns

Test Your Knowledge

24 questions across all levels

Progress

  • 0/24 answered

Levels

  • Level 1: 6 questions
  • Level 2: 6 questions
  • Level 3: 6 questions
  • Level 4: 6 questions

Hands-On Assignment

90-120 minutes

Your Challenge

Build a custom visualization plugin that adds a new chart type to Metabase's visualization engine. Your plugin should register itself through the plugin system, accept configuration options from users, and render data from a query result. This will require understanding how Metabase's plugin architecture works, how visualizations consume data, and how the UI components integrate with the visualization system.

Starting Points

  • enterprise/frontend/src/metabase-enterprise/plugins.js:1-52

    • Examine how enterprise plugins are loaded and registered in the system

  • enterprise/frontend/src/metabase-enterprise/redux.ts:1-11

    • See how enterprise features integrate with the Redux state management

  • frontend/src/metabase/visualizations/register.js

    • This is where core visualizations are registered - you'll follow a similar pattern

  • frontend/src/metabase/visualizations/components

    • Browse existing visualization components to understand the structure and props they receive

  • frontend/src/metabase/visualizations/lib/settings

    • Study how visualization settings and configuration options are defined

  • frontend/src/metabase/visualizations/visualizations

    • Create your new visualization component here following the established patterns

Success Criteria

  • Your visualization appears in the visualization type picker with a custom icon and name.
  • The visualization correctly renders data from a query result with at least 2 columns.
  • Users can configure at least 2 settings (e.g., colors, labels) through the sidebar UI.
  • The visualization handles empty data gracefully without crashing.
  • Your code follows the same patterns as existing visualizations (proper exports, metadata structure).
  • The visualization is interactive - clicking elements triggers onVisualizationClick with appropriate data.

Hints

  • (click to reveal)
    • Hint 1: Understanding the visualization lifecycle concept.
    • Hint 2: Plugin registration mechanism code location.
    • Hint 3: Data transformation patterns implementation.
    • Hint 4: Settings and configuration UI implementation.
    • Hint 5: Testing your visualization implementation.

Prerequisites

  • React component patterns
  • Data visualization concepts
  • Plugin architecture basics
  • Redux state management (optional but helpful)