RV Market Intelligence Dashboard Setup

This skill helps you work with the RV Market Intelligence Dashboard project, a FastAPI + React analytics platform with dual backend modes (Delta Lake and GraphQL).

What This Skill Does

Architecture Overview

The project has two main applications:

1. **Sales Platform** (main) at `/` - Territory management, dealer directory, competitive intelligence

2. **Analytics Dashboard** (legacy) at `/analytics` - Data visualizations with A/B/C/M versions

The backend supports two modes:

Step-by-Step Instructions

1. Starting the Development Environment

When the user asks to start the servers or run the application:

1. **Check if you're in the project root** by looking for `api/` and `mobile-app/` directories

2. **Start the backend** in Delta Lake mode (recommended):

```bash

cd api && USE_DELTALAKE=true python -m uvicorn main:app --port 8000

```

- For GraphQL mode (legacy), omit `USE_DELTALAKE=true`

- Backend will be available at `http://localhost:8000`

- Wait for "Application startup complete" message

3. **Start the frontend** in a separate terminal:

```bash

cd mobile-app && npm run dev -- --port 5175

```

- Frontend will be available at `http://localhost:5175`

4. **Inform the user** about the routes:

- `/` or `/sales/*` - Sales Platform (main entry point)

- `/analytics` - Analytics Dashboard with A/B/C/M versions

2. Switching Backend Modes

When the user wants to change backend modes:

**To enable Delta Lake mode:**

**To enable GraphQL mode:**

3. Working with the Sales Platform

When the user asks about filters, dealer directory, or sales features:

**Key files to reference:**

**Multi-select filters:**

4. Working with Analytics Dashboard

When the user asks about charts, visualizations, or cross-filtering:

**Four versions available:**

**Cross-filtering:**

1. User clicks a chart element

2. `CrossFilterContext` stores the filter

3. All charts re-fetch data with filter params

4. API returns filtered aggregations

**Key files:**

5. Applying Thor Industries Branding

When the user asks about styling, colors, or design:

**Thor Industries color palette:**

**Typography:**

**Key files:**

**Usage in components:**

```typescript

import { THOR_COLORS } from '../styles/thorTheme'

className="text-[var(--thor-sage)] card-thor btn-thor-sage"

```

6. Working with the Database

When the user asks about schema, data, or database operations:

**Schema files:**

**Delta Lake tables:**

**Performance note:**

7. Troubleshooting

**Backend won't start:**

**Frontend won't start:**

**Slow API responses:**

**Authentication errors:**

Examples

**Example 1: Starting the application**

```

User: "Start the RV dashboard"

Assistant: I'll start both the backend and frontend servers.

[Use Bash tool to start backend with Delta Lake mode]

[Use Bash tool to start frontend]

The servers are now running:

Main routes:

```

**Example 2: Explaining filters**

```

User: "How do the multi-select filters work?"

Assistant: The Sales Platform uses multi-select filters for Dealer Group, Manufacturer, and Model.

Here's the flow:

1. FilterPanel.tsx stores selected values as arrays in SalesContext

2. useSalesData.ts converts arrays to comma-separated strings

3. API receives: ?manufacturer=Thor,Forest River,Winnebago

4. Backend (deltalake_adapter.py) splits the string and uses .isin()

[Read FilterPanel.tsx to show implementation details]

```

**Example 3: Applying Thor branding**

```

User: "Add a new button with Thor styling"

Assistant: I'll create a button using Thor Industries' sage green accent color.

[Read thorTheme.ts to get color constants]

[Show example using btn-thor-sage class or var(--thor-sage)]

The Thor style guide uses:

```

Important Notes