Merge pull request #28 from PetarRan/main

feat(docs): add PerplexiGrid showcase

Author: kesku

docs/showcase/perplexigrid.mdx

@@ -0,0 +1,78 @@
+---
+title: PerplexiGrid | Interactive Analytics Dashboards
+description: Instantly generate analytics dashboards from natural language using live data via Perplexity Sonar API.
+sidebar_position: 5
+keywords: [perplexigrid, dashboard, analytics, BI, AI, Perplexity, sonar, echarts, supabase]
+---
+
+**PerplexiGrid** turns natural language into rich, interactive dashboards. Connect your data and mix it with live web data, ask a question, and let the Sonar API do the rest! Complete with drag-and-drop layout, AI widget generation, and ECharts-powered visualizations.
+
+## Features
+
+* **Natural Language to Dashboards**: Convert plain English prompts into fully functional analytics dashboards with 25+ widget types
+* **Live Data Integration**: Blend your own data sources with real-time web data for comprehensive insights
+* **Interactive Grid Layout**: Drag-and-drop interface for customizing dashboard layouts and styling
+* **AI-Powered Refinement**: Refine or add widgets using conversational updates
+* **Export & Share**: Generate PDF exports, high-res images, and shareable dashboard links
+
+## How it uses Sonar
+
+PerplexiGrid leverages the Sonar API through four specialized modes:
+
+* **Full Dashboard Generation (f1)**: Creates comprehensive dashboards with multiple widgets using Sonar-pro's advanced capabilities
+* **Lightweight Mode (l1)**: Generates quick visualizations for embedded systems and real-time applications
+* **Dashboard Updates (r1)**: Enables dynamic modifications through natural language while maintaining context
+* **Widget Refinement (r2)**: Provides precise control over individual widget updates
+
+The system uses structured JSON schema responses to ensure consistent, ECharts-compatible output that can be directly rendered as interactive visualizations.
+
+## Usage
+
+1. Open the app and start a new dashboard  
+2. Prompt it like: _"Show me market trends in AI startups in 2024"_  (Sonar generates chart configs, which are parsed and rendered as live widgets)
+
+![Prompt #1](https://www.perplexigrid.com/guide/prompt_dark.gif)
+
+3. Rearrange and style the widgets with the grid interface  
+
+![Prompt #2](https://www.perplexigrid.com/guide/move_dark.gif)
+![Prompt #3](https://www.perplexigrid.com/guide/customize_dark.gif)
+
+5. Add your own datasources to blend your data with live web data
+
+![Prompt #4](https://www.perplexigrid.com/guide/datasource_dark.gif)
+
+6. Refine them via text prompts or export the dashboard as needed  
+7. Collaborate and share easily
+
+![Prompt #5](https://www.perplexigrid.com/guide/invite_dark.gif)
+
+## Code Explanation
+
+The user sends messages that are turned into prompts to a Supabase Edge Function that wraps the Perplexity Sonar API.  
+Depending on the mode (`f1`, `l1`, `r1`, or `r2`), the function generates full structured outputs for dashboards, lightweight visualizations, or targeted updates.  
+The generated layout is parsed into structured widget definitions and passed through our widget creation engine.
+
+Explore our [main sonar-api service here.](https://github.com/PetarRan/perplexigrid/blob/main/server/supabase/functions/_shared/perplexityService.ts)
+
+## Prompt Modes
+
+| Mode | Description | Use Case | Notes |
+|------|-------------|----------|-------|
+| `f1` | First-time full dashboard generation | User starts with an empty canvas and enters an initial prompt | Produces a complete dashboard layout with multiple widgets |
+| `l1` | Lightweight dashboard generation | Used for quick insights or previews with minimal tokens | Faster and cheaper, but returns fewer widgets with less instruction depth |
+| `r1` | Full dashboard regeneration | User wants to replace all existing widgets with a new prompt | Rebuilds the entire dashboard while keeping layout intact |
+| `r2` | Targeted widget update | User wants to change a specific widget (e.g. "make this a pie chart") | Only the selected widget is modified based on the new instruction |
+
+## Tech Stack
+
+* **Frontend**: React + Vite (TypeScript), ECharts, react-grid-layout
+* **Backend**: Supabase Edge Functions (TypeScript on Deno)
+* **AI Engine**: Perplexity Sonar-Pro
+* **Infrastructure**: Supabase (PostgreSQL, RLS, Auth), Vercel deployment
+
+## Links
+
+- [GitHub Repository](https://github.com/PetarRan/perplexigrid)
+- [Live Demo](https://app.perplexigrid.com)
+- [Website](https://www.perplexigrid.com)