```
--------------------------------
### Input Type Registry Example (TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/lib/logging/README.md
Implements a function to get an input component based on its type from a registry. It handles unknown types by mapping them to a fallback component and logs these events.
```typescript
import { createServiceLogger } from '@/lib/logging';
const logger = createServiceLogger('dynamic-questions');
export function getInputComponent(type: string) {
if (registry.has(type)) {
return registry.get(type);
}
// Unknown type
logger.warn('dynamic_questions.input_type.unknown', 'Unknown input type discovered', {
type,
});
const mappedType = intelligentTypeMapper(type);
logger.info('dynamic_questions.input_type.mapped', 'Mapped unknown type to fallback', {
originalType: type,
mappedType,
});
return registry.get(mappedType) || TextInput;
}
```
--------------------------------
### CSS Integration Example (CSS)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/theme-implementation-summary.md
Demonstrates how to use CSS variables directly within CSS rules to style components. This example shows how elements can inherit colors for background, text, and borders from the active theme without needing JavaScript intervention within the CSS itself.
```css
/* Colors automatically adapt based on theme */
.my-component {
background: var(--background-paper); /* Uses --background-paper from :root or .light */
color: var(--text-primary); /* Uses --text-primary from :root or .light */
border-color: var(--primary-accent); /* Uses --primary-accent from :root or .light */
padding: 1rem;
border-width: 2px;
border-style: solid;
border-radius: 8px;
}
/* Example for a button */
.theme-button {
background-color: var(--primary-accent);
color: var(--text-primary);
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
.theme-button:hover {
opacity: 0.9;
}
```
--------------------------------
### Environment Variables (.env.local Example - Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/cleanup.md
Illustrates how sensitive environment variables should be configured in a `.env.local` file, which is typically ignored by Git. It includes example keys for API integrations and database connections.
```bash
# .env.local (gitignored)
CLAUDE_API_KEY=sk-...
PERPLEXITY_API_KEY=pplx-...
DATABASE_URL=postgresql://...
NEXTAUTH_SECRET=...
```
--------------------------------
### Allowed Color and Glass CSS Examples (TSX)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Shows the preferred alternatives to gradients, using solid colors or custom glass utility classes in TSX components. These are examples of compliant CSS usage.
```tsx
// Solid colors or glass effects
className="bg-blue-600"
className="glass" // Custom glass utility
```
--------------------------------
### Basic Theme Usage Example (React/JSX)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/theme-implementation-summary.md
Illustrates the fundamental steps for integrating the theme system into a React application. It shows how to wrap the application with the ThemeProvider, add a DarkModeToggle, and access theme context within components using the useTheme hook.
```jsx
// Wrap app with theme provider in your main entry file (e.g., App.tsx or index.tsx)
import { ThemeProvider } from './components/theme/ThemeProvider';
ReactDOM.render(
,
document.getElementById('root')
);
// Add theme toggle to UI in a header or settings component
import DarkModeToggle from './components/theme/DarkModeToggle';
function Header() {
return (
);
}
// Use theme in components
import { useTheme } from './components/theme/ThemeProvider';
function MyComponent() {
const { theme, setTheme } = useTheme();
return (
);
}
```
--------------------------------
### Customizing System Prompts with TypeScript
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/implementation-notes/CLAUDE_IMPLEMENTATION_COMPLETE.md
This TypeScript example demonstrates how to customize the system prompt for the Claude API, extending the default prompt with specific requirements like focusing on remote learning and collaboration tools.
```typescript
import { buildBlueprintPrompt, BLUEPRINT_SYSTEM_PROMPT } from '@/lib/claude/prompts';
// Customize system prompt
const customSystemPrompt = `${BLUEPRINT_SYSTEM_PROMPT}`
Additional Requirements:
- Focus on remote learning
- Include async collaboration tools
`;
```
--------------------------------
### Troubleshooting ESLint Not Working (Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Provides steps to troubleshoot issues with ESLint not working, including checking dependencies, verifying the ESLint configuration file, and clearing the ESLint cache.
```bash
1. Ensure dependencies are installed: `npm ci`
2. Check ESLint config: `frontend/eslint.config.mjs`
3. Clear ESLint cache: `rm -rf .eslintcache`
```
--------------------------------
### ASCII Art Module Card Example
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/dashboard-visual-guide.md
An example of a module card represented using ASCII art, showing module title, duration, topics, activities, and a progress bar. This is a visual representation, not functional code.
```text
┌─────────────────────────────────────────────────┐
│ Module 1: Introduction to Web Development [M1] │
│ 🕐 12h │ 📖 8 topics │ 🎯 5 activities │
│ ████████████████████████████████████████ 100% │
└─────────────────────────────────────────────────┘
```
--------------------------------
### Import Path Migration Example (TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/STRUCTURE_PLAN.md
Demonstrates the change in import paths from a previous structure to the new organized structure in Project Polaris-v3. This transition aims to improve maintainability and dependency clarity.
```typescript
// Before
import { Button } from '@/components/ui/button'
import { AuthService } from '@/lib/auth/service'
import { useAuth } from '@/hooks/useAuth'
// After
import { Button } from '@/src/components/ui/button'
import { AuthService } from '@/src/lib/auth/service'
import { useAuth } from '@/src/lib/hooks/useAuth'
```
--------------------------------
### Blueprint JSON Structure Example
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/implementation-notes/CLAUDE_IMPLEMENTATION_COMPLETE.md
Illustrates the expected JSON structure for a generated blueprint. This includes metadata about the blueprint, various content sections like executive summary, learning objectives, content outline, and resource details, along with generation metadata.
```json
{
"metadata": {
"title": "Enterprise Sales Training Program",
"organization": "Acme Corp",
"role": "Sales Manager",
"generated_at": "2025-10-01T12:00:00Z",
"version": "1.0",
"model": "claude-sonnet-4"
},
"executive_summary": {
"content": "Comprehensive sales training program...",
"displayType": "markdown"
},
"learning_objectives": {
"objectives": [
{
"id": "obj1",
"title": "Increase Deal Closure Rate",
"description": "Improve consultative selling",
"metric": "Deal Closure Rate",
"baseline": "32%",
"target": "50%",
"due_date": "2025-12-31"
}
],
"displayType": "infographic",
"chartConfig": { "type": "radar" }
},
"content_outline": {
"modules": [...],
"displayType": "timeline"
},
"resources": {
"human_resources": [...],
"budget": { "total": 115000, "currency": "USD" },
"displayType": "table"
},
"_generation_metadata": {
"model": "claude-sonnet-4",
"duration": 52000,
"timestamp": "2025-10-01T12:00:52Z",
"fallbackUsed": false,
"attempts": 1
}
}
```
--------------------------------
### Example CSS Token Usage (After)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/token-recommendations.md
Illustrates the usage of CSS classes with new tokens after migration. This example uses semantic tokens like 'rounded-lg', 'max-h-modal', and 'glass-10'.
```tsx
```
--------------------------------
### Customize DynamicQuestionsLoader Props (TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/src/components/features/features/wizard/dynamic-questions/INSTALLATION.md
Demonstrates how to customize the DynamicQuestionsLoader component using its various props, including 'message', 'statusText', 'showStatusIndicator', and 'className' for additional styling.
```tsx
```
--------------------------------
### DynamicQuestionsLoaderCard Standalone Usage Example (React/TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/components/wizard/dynamic-questions/IMPLEMENTATION_SUMMARY.md
Illustrates the standalone usage of the DynamicQuestionsLoaderCard component. This example shows how to customize the title, description, message, and status text for a self-contained loading card.
```tsx
import { DynamicQuestionsLoaderCard } from '@/components/wizard/dynamic-questions';
;
```
--------------------------------
### Library - Zustand Stores (JavaScript/TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/CODE_STRUCTURE.md
This snippet points to the 'lib/stores' directory, dedicated to state management using Zustand.
```JavaScript/TypeScript
src/lib/stores/
```
--------------------------------
### Perplexity Integration Example (TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/lib/logging/README.md
Demonstrates how to integrate with the Perplexity API using the service logger. It logs the request, success, and failure events with relevant metadata.
```typescript
import { createServiceLogger } from '@/lib/logging';
const logger = createServiceLogger('perplexity');
export async function generateWithPerplexity(context: any) {
const endTimer = logger.startTimer('perplexity.request', 'Generating questions with research');
try {
logger.info('perplexity.request', 'Sending request to Perplexity', {
model: 'sonar-pro',
blueprintId: context.blueprintId,
temperature: 0.1,
maxTokens: 8700,
});
const response = await perplexityAPI.generate(context);
logger.info('perplexity.success', 'Received response from Perplexity', {
blueprintId: context.blueprintId,
sectionCount: response.sections.length,
questionCount: response.sections.reduce((sum, s) => sum + s.questions.length, 0),
tokens: {
input: response.usage.input_tokens,
output: response.usage.output_tokens,
total: response.usage.total_tokens,
},
});
endTimer();
return response;
} catch (error) {
logger.error('perplexity.failure', 'Perplexity request failed', {
blueprintId: context.blueprintId,
error,
fallbackActivated: true,
});
throw error;
}
}
```
--------------------------------
### DynamicQuestionsLoaderCard Full Page Layout Example (React/TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/components/wizard/dynamic-questions/IMPLEMENTATION_SUMMARY.md
Provides an example of integrating the DynamicQuestionsLoaderCard within a larger page layout, such as a questionnaire flow. It uses a hypothetical QuestionnaireLayout component and dynamically sets the message prop.
```tsx
import { DynamicQuestionsLoaderCard } from '@/components/wizard/dynamic-questions';
import { QuestionnaireLayout } from '@/components/wizard/static-questions';
;
```
--------------------------------
### Tailwind CSS Class Sorting Example (TSX)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Compares an unsorted string of Tailwind CSS classes with its sorted equivalent, demonstrating how Prettier automatically enforces a recommended order for better readability and consistency in TSX.
```tsx
// Before (unsorted)
className="text-white bg-blue-600 p-4 flex hover:bg-blue-700"
// After (sorted by Prettier)
className="flex p-4 bg-blue-600 text-white hover:bg-blue-700"
```
--------------------------------
### Formatting All Files with Prettier Command (Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
A bash command to format all files in the frontend directory using Prettier. This ensures consistent code style across the project.
```bash
# Format all files
cd frontend && npm run format
```
--------------------------------
### Database Operations Example (TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/lib/logging/README.md
Shows how to save dynamic questions to a database using Supabase and the service logger. It logs the save operation, including blueprint ID and question counts.
```typescript
import { createServiceLogger } from '@/lib/logging';
const logger = createServiceLogger('database');
export async function saveDynamicQuestions(blueprintId: string, questions: any) {
return await logger.withLogging(
'database.save',
'Saving dynamic questions to database',
async () => {
const result = await supabase
.from('blueprint_generator')
.update({ dynamic_questions: questions })
.eq('id', blueprintId);
if (result.error) {
throw result.error;
}
return result;
},
{
blueprintId,
sectionCount: questions.sections.length,
questionCount: questions.sections.reduce((sum, s) => sum + s.questions.length, 0),
}
);
}
```
--------------------------------
### Library - Business Logic Services (JavaScript/TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/CODE_STRUCTURE.md
This snippet shows the 'lib/services' directory, where core business logic and application services are implemented.
```JavaScript/TypeScript
src/lib/services/
```
--------------------------------
### Manual Linting and Formatting Commands (Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Provides essential bash commands for manually running ESLint and Prettier, including commands for auto-fixing issues and checking formatting status within the project.
```bash
# Run ESLint
npm run lint
# Run ESLint with auto-fix
npx eslint . --fix
# Check Prettier formatting
npx prettier --check .
# Format with Prettier
npm run format
```
--------------------------------
### Create Documentation Directory Structure
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/cleanup.md
This command creates a nested directory structure for organizing project documentation. It sets up main categories like 'prds', 'implementation-notes', 'architecture', 'guides', and 'archived', with further sub-categorization within 'implementation-notes'.
```bash
mkdir -p docs/{prds,implementation-notes,architecture,guides,archived}
mkdir -p docs/implementation-notes/{feature-implementations,bug-fixes,refactoring}
```
--------------------------------
### Frontend Inline Usage Example (React)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/src/components/features/wizard/dynamic-questions/COMPARISON.md
Shows the integration of the frontend's inline loading component within a React wizard flow. It demonstrates conditional rendering and the usage of the `DynamicQuestionsLoader` component when questions are not yet available.
```tsx
// Inline variant
{active === 'dynamic' && (
{dynamicQuestions.length > 0 ? (
// Show questions
) : (
)}
)}
```
--------------------------------
### Smartslate-Polaris Spinner Integration Example (React)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/src/components/features/features/wizard/dynamic-questions/COMPARISON.md
Example of how a spinner and loading message are integrated within the smartslate-polaris wizard flow using React and CSS classes for styling. It shows conditional rendering based on component state.
```jsx
// Inside wizard flow
{
active === 'dynamic' && (
{dynamicQuestions.length > 0 ? (
// Show questions
) : (
Loading personalized questions...
)}
)
}
```
--------------------------------
### Configuration Files (TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/CODE_STRUCTURE.md
This snippet shows the 'config' directory, which holds application-wide configuration files, including constants and environment settings.
```TypeScript
src/config/constants.ts
src/config/env.ts
```
--------------------------------
### Individual Blueprint Section Components
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/implementation-notes/CLAUDE_IMPLEMENTATION_COMPLETE.md
Provides examples of various specialized components for rendering different sections of a blueprint, such as InfographicSection, TimelineSection, ChartSection, TableSection, and MarkdownSection. Each component takes a sectionKey and its corresponding data.
```typescript
import { InfographicSection } from '@/components/blueprint/InfographicSection';
import { TimelineSection } from '@/components/blueprint/TimelineSection';
import { ChartSection } from '@/components/blueprint/ChartSection';
import { TableSection } from '@/components/blueprint/TableSection';
import { MarkdownSection } from '@/components/blueprint/MarkdownSection';
// Use based on displayType
```
--------------------------------
### Library - Database Operations (JavaScript/TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/CODE_STRUCTURE.md
This snippet indicates the directory for database operations and Supabase client configuration, located in 'lib/db'.
```JavaScript/TypeScript
src/lib/db/
```
--------------------------------
### Full Page Loading Example in React (GeneratingQuestionsPage)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/components/wizard/dynamic-questions/README.md
Presents an example of using DynamicQuestionsLoaderCard for a full-page loading experience in the GeneratingQuestionsPage React component. It's typically wrapped within a layout component like QuestionnaireLayout.
```tsx
import { DynamicQuestionsLoaderCard } from '@/components/wizard/dynamic-questions';
import { QuestionnaireLayout } from '@/components/wizard/static-questions';
export default function GeneratingQuestionsPage() {
return (
);
}
```
--------------------------------
### Library - General Utilities (JavaScript/TypeScript)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/CODE_STRUCTURE.md
This snippet indicates the 'lib/utils' directory, containing general utility functions and helper methods used throughout the application.
```JavaScript/TypeScript
src/lib/utils/
```
--------------------------------
### Usage Example: Blueprint Generation Loader - React
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/LOADER_REPLACEMENT_SUMMARY.md
Provides a practical example of using the DynamicQuestionsLoader component in a different context, specifically for blueprint generation. It sets a relevant message and status text for this use case.
```javascript
// In generating/[id]/page.tsx
```
--------------------------------
### Run Specific Claude Module Tests (npm)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/guides/TESTING_GUIDE.md
Executes specific test suites related to the Claude module, including API, services, and core logic tests. Filters tests using directory or file paths.
```bash
npm test -- __tests__/claude/
npm test -- __tests__/api/claude-generate-blueprint.test.ts
npm test -- __tests__/services/blueprintGenerationService.test.ts
```
--------------------------------
### Run Frontend Lint Check in Bash
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/src/components/features/features/wizard/dynamic-questions/REPLACEMENT_GUIDE.md
This command executes the linting process for a specific TypeScript file within the frontend project using npm. It helps identify and correct code style issues and potential errors.
```bash
# Lint check
cd frontend
npm run lint app/(auth)/dynamic-wizard/[id]/page.tsx
```
--------------------------------
### Vercel Deployment Configuration (JSON)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/cleanup.md
Specifies the build, output, framework, installation, and development commands for deploying a Next.js application on Vercel. It targets the 'frontend' directory and uses npm for package management.
```json
{
"buildCommand": "npm run build",
"outputDirectory": "frontend/.next",
"framework": "nextjs",
"installCommand": "npm install",
"devCommand": "npm run dev"
}
```
--------------------------------
### Supabase Database Schema - Blueprint Generator
Source: https://context7.com/notjitin-1994/polaris-v3/llms.txt
Documentation for the `blueprint_generator` table in Supabase, including its schema, RLS policies, and example queries for retrieving and updating blueprint data.
```APIDOC
## Blueprint Generator Table
### Description
Manages blueprint generation data, including static and dynamic answers, blueprint JSON, and status.
### Method
SQL (Supabase)
### Endpoint
`blueprint_generator` table
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None (SQL schema definition)
### Schema Definition
```sql
CREATE TABLE blueprint_generator (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
version INTEGER NOT NULL DEFAULT 1,
static_answers JSONB NOT NULL DEFAULT '{}'::jsonb,
dynamic_questions JSONB NOT NULL DEFAULT '[]'::jsonb,
dynamic_answers JSONB NOT NULL DEFAULT '{}'::jsonb,
blueprint_json JSONB NOT NULL DEFAULT '{}'::jsonb,
blueprint_markdown TEXT NULL,
status TEXT NOT NULL DEFAULT 'draft' CHECK (status IN ('draft','generating','completed','error')),
title TEXT NULL,
share_token TEXT UNIQUE NULL,
created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
);
```
### Example Queries
#### Query Blueprints
Retrieves a list of completed blueprints for a specific user, ordered by creation date.
```sql
SELECT id, title, status, created_at, updated_at
FROM blueprint_generator
WHERE user_id = 'user-uuid-123'
AND status = 'completed'
ORDER BY created_at DESC
LIMIT 10;
```
#### Update Blueprint Status
Updates the status and modification timestamp of a blueprint.
```sql
UPDATE blueprint_generator
SET status = 'generating', updated_at = now()
WHERE id = 'blueprint-uuid'
AND user_id = 'user-uuid-123';
```
```
--------------------------------
### Configure Environment Variables for APIs
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/implementation-notes/CLAUDE_IMPLEMENTATION_COMPLETE.md
Sets up necessary API keys and base URLs for services like Anthropic, Perplexity, and Ollama. Ensure these are added to your .env.local or .cursor/mcp.json file for the application to connect to these services.
```bash
# Claude/Anthropic API (Required)
ANTHROPIC_API_KEY=sk-ant-...
ANTHROPIC_BASE_URL=https://api.anthropic.com (optional, has default)
ANTHROPIC_VERSION=2023-06-01 (optional, has default)
# Perplexity (Already configured for dynamic questions)
PERPLEXITY_API_KEY=...
# Ollama (Already configured)
OLLAMA_BASE_URL=http://localhost:11434/api
OLLAMA_MODEL=qwen3:30b-a3b
```
--------------------------------
### Create Initial File Structure (Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/docs/prds/CLAUDE_BLUEPRINT_IMPLEMENTATION_PLAN.md
Commands to create the initial directory structure for the project's frontend components and API endpoints. This sets up the basic organization for the application.
```bash
mkdir -p frontend/lib/services
mkdir -p frontend/app/api/claude
mkdir -p frontend/components/blueprint
```
--------------------------------
### Security Scan: Exposed Credentials Example (Text)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/cleanup.md
This text snippet illustrates potential security vulnerabilities found during a scan, specifically exposed credentials in SSH keys and Git history. It also outlines the required actions to mitigate these risks.
```text
Location: /ssh_keys/
- id_rsa (SSH private key)
- id_rsa.pub (SSH public key)
- authorized_keys
Location: Git History
- Commit abc123: Contains AWS credentials
- Commit def456: Contains API keys
Action Required:
1. Remove from working tree
2. Remove from Git history
3. Rotate all exposed credentials
4. Add to .gitignore
```
--------------------------------
### Fixing ESLint Errors Command (Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
A specific bash command to automatically fix most ESLint issues within the frontend directory of the project. This is useful for quickly resolving common linting problems.
```bash
# Auto-fix most ESLint issues
cd frontend && npx eslint . --fix
```
--------------------------------
### Frontend Inline Spinner Integration Example (React)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/src/components/features/features/wizard/dynamic-questions/COMPARISON.md
Illustrates the frontend implementation's inline variant for integrating a spinner and loading message within a React component. It utilizes a dedicated `DynamicQuestionsLoader` component for the loading state.
```jsx
// Inline variant
{
active === 'dynamic' && (
{dynamicQuestions.length > 0 ? (
// Show questions
) : (
)}
)
}
```
--------------------------------
### Environment Variables Template (.env.example Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/cleanup.md
This bash script example demonstrates a typical .env.example file for a Node.js application, covering application settings, AI API keys, database connections, authentication details, external services, feature flags, and monitoring configurations.
```bash
# Application
NODE_ENV=development
NEXT_PUBLIC_APP_URL=http://localhost:3000
# AI APIs
CLAUDE_API_KEY=sk-ant-xxxxxxxxxxxxxxxxxxxx
PERPLEXITY_API_KEY=pplx-xxxxxxxxxxxxxxxxxxxx
# Database
DATABASE_URL=postgresql://user:password@localhost:5432/smartslate
REDIS_URL=redis://localhost:6379
# Authentication
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=generate_with_openssl_rand_base64_32
# External Services
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=noreply@smartslate.com
SMTP_PASSWORD=xxxxxxxxxxxxxxxxxxxx
# Feature Flags
FEATURE_ADVANCED_ANALYTICS=false
FEATURE_BETA_FEATURES=false
# Monitoring
SENTRY_DSN=https://xxxxxxxxxxxxxxxxxxxx@sentry.io/xxxxxxxxxxxxxxxxxxxx
ANALYTICS_ID=UA-xxxxxxxxxxxxxxxxxxxx
```
--------------------------------
### React State Management Example
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/LOADING_PAGE_REPLACEMENT_SUMMARY.md
Demonstrates the use of React's `useState` hook for managing progress, status messages, completion state, and errors within a component. This is crucial for handling dynamic UI updates.
```tsx
const [progress, setProgress] = useState(0); // 0-100
const [status, setStatus] = useState('...'); // Current message
const [isComplete, setIsComplete] = useState(false);
const [error, setError] = useState
(null);
```
--------------------------------
### Disallowed Gradient CSS Examples (TSX)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Demonstrates CSS class names and inline styles that violate the no-gradient rule enforced by ESLint. These examples show forbidden gradient usages in TSX components.
```tsx
// These will trigger ESLint errors
className="bg-gradient-to-r from-blue-500 to-purple-600"
className="bg-gradient-to-br via-slate-100"
style={{ backgroundImage: 'linear-gradient(...)' }}
```
--------------------------------
### Consolidate Testing Structure
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/cleanup.md
This example presents a consolidated structure for the frontend testing suite. It categorizes tests into unit, integration, and end-to-end (e2e) tests, with further sub-organization by feature or type. It also includes a directory for shared test utilities.
```treeview
frontend/tests/
├── unit/ # Component & function tests
│ ├── components/
│ ├── hooks/
│ └── utils/
├── integration/ # Feature integration tests
│ ├── blueprint/
│ └── questionnaire/
├── e2e/ # End-to-end tests
│ ├── user-flows/
│ └── critical-paths/
└── utils/ # Test utilities
├── test-utils.tsx # React Testing Library setup
├── mock-data.ts # Mock data generators
└── test-helpers.ts # Helper functions
```
--------------------------------
### Import Services, Hooks, and Stores in TypeScript
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/CODE_STRUCTURE.md
Illustrates importing various utility modules such as services, custom hooks, and state management stores in TypeScript. This exemplifies the structured approach to accessing shared logic and application state within the project.
```typescript
// Services
import { AuthService } from '@/src/lib/services/authService';
import { BlueprintService } from '@/src/lib/services/blueprintService';
// Hooks
import { useAuth } from '@/src/lib/hooks/useAuth';
import { useBlueprint } from '@/src/lib/hooks/useBlueprint';
// Stores
import { useAuthStore } from '@/src/lib/stores/authStore';
import { useBlueprintStore } from '@/src/lib/stores/blueprintStore';
```
--------------------------------
### Prettier Ignore Comment Example (TSX)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Illustrates how to use a Prettier ignore comment to prevent Prettier from formatting a specific line of code. This is useful for maintaining custom formatting in exceptional cases.
```tsx
// prettier-ignore
const specialFormatting = 'keep-this-format';
```
--------------------------------
### ESLint Disable Comment Exception Example (TSX)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Shows how to disable a specific ESLint rule for a single line of code using an ESLint disable comment. This is used for documented exceptions where a rule must be bypassed.
```tsx
// eslint-disable-next-line no-restricted-syntax
const gradientNeededForLibrary = 'bg-gradient-to-r'; // Document why this is needed
```
--------------------------------
### Create Master Documentation Index
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/cleanup.md
This code snippet demonstrates the creation of a master documentation index file (`docs/README.md`) for the Polaris project. It includes quick links to different documentation sections and a section for recent updates, aiming to provide a centralized entry point for navigating the project's documentation.
```markdown
# SmartSlate Polaris Documentation
## Quick Links
- [Product Requirements](./prds/README.md)
- [Architecture Docs](./architecture/README.md)
- [Developer Guides](./guides/README.md)
- [Implementation Notes](./implementation-notes/README.md)
## Recent Updates
- [Latest PRD Updates](./prds/README.md#recent)
- [Recent Features](./implementation-notes/feature-implementations/)
- [Latest Architecture Changes](./architecture/README.md)
```
--------------------------------
### Troubleshooting Prettier Not Sorting Tailwind Classes (Bash)
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/linting-style-guide.md
Offers troubleshooting steps for when Prettier fails to sort Tailwind CSS classes, including verifying the installation of the Tailwind plugin, checking the Prettier configuration, and restarting the editor.
```bash
1. Verify plugin installed: `prettier-plugin-tailwindcss`
2. Check `.prettierrc` configuration
3. Restart your editor/language server
```
--------------------------------
### Share Blueprint API Endpoints (TypeScript)
Source: https://context7.com/notjitin-1994/polaris-v3/llms.txt
Provides examples for interacting with the API to share blueprints. This includes generating a shareable link via a POST request and accessing a shared blueprint using its token via a GET request. No authentication is required for accessing shared blueprints.
```typescript
// POST /api/blueprints/share/generate - Create shareable link
const response = await fetch('/api/blueprints/share/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
blueprintId: 'uuid-123',
expiresInDays: 7
})
});
const { token, shareUrl } = await response.json();
// { token: 'abc123def456', shareUrl: 'https://app.com/share/abc123def456' }
// GET /api/blueprints/share/:token - Access shared blueprint
const publicResponse = await fetch('/api/blueprints/share/abc123def456');
const { blueprint, metadata } = await publicResponse.json();
// No authentication required for public access
```
--------------------------------
### Static Wizard Steps Configuration and Persistence (TypeScript)
Source: https://context7.com/notjitin-1994/polaris-v3/llms.txt
Configures the steps for a wizard interface, including component mapping, titles, and required fields. It also demonstrates how to implement auto-saving of user answers using a custom hook and validates individual steps. Dependencies include components and hooks from '@/components/wizard/static-questions/'.
```typescript
import { RoleStep, OrganizationStep, LearningGapStep, ResourcesStep, ConstraintsStep } from '@/components/wizard/static-questions/steps';
// Define wizard step progression
const wizardSteps = [
{ id: 'role', component: RoleStep, title: 'Your Role', required: true },
{ id: 'organization', component: OrganizationStep, title: 'Organization', required: true },
{ id: 'learning-gap', component: LearningGapStep, title: 'Learning Gap', required: true },
{ id: 'resources', component: ResourcesStep, title: 'Resources', required: true },
{ id: 'constraints', component: ConstraintsStep, title: 'Constraints', required: false }
];
// Persist answers with auto-save
import { useAutoSave } from '@/components/wizard/static-questions/hooks/useAutoSave';
const { saveProgress, lastSaved } = useAutoSave({
blueprintId: 'uuid-123',
answers: formData,
debounceMs: 2000
});
// Validate step completion
import { validateStep } from '@/components/wizard/static-questions/validation';
const errors = validateStep('role', { role: 'Manager', department: 'Sales' });
// Returns: [] if valid, or [{ field: 'role', message: 'Required field' }] if invalid
```
--------------------------------
### ASCII Art Status Badge Example
Source: https://github.com/notjitin-1994/polaris-v3/blob/master/frontend/docs/dashboard-visual-guide.md
An ASCII art representation of a status badge, indicating an 'Active' state with an upward arrow. This is a purely visual example.
```text
┌──────────┐
│ ↗ Active │ Green badge (success state)
└──────────┘
```