# 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)