Welcome to Metabase

Your guide to understanding the codebase.

Learning Path

5 levels

15 learning units

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

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

Hints

  • Hint 1: Understanding the visualization lifecycle
  • Hint 2: Plugin registration mechanism
  • Hint 3: Data transformation patterns
  • Hint 4: Settings and configuration UI
  • Hint 5: Testing your visualization

Prerequisites:

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