> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pixlnext.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Package json

# Package.json Configuration Documentation

This document provides comprehensive documentation for the package.json configuration in the STO Education Platform.

## Package Overview

**Package Name**: `vite-react-typescript-starter`\
**Version**: `3.3.4`\
**Type**: `module` (ES Modules)\
**Private**: `true`

## Scripts Configuration

### Development Scripts

#### `dev`

```json theme={null}
"dev": "vite"
```

**Purpose**: Starts the development server\
**Usage**: `npm run dev`\
**Description**: Launches Vite development server with hot module replacement

#### `build`

```json theme={null}
"build": "set VITE_SKIP_TYPECHECK=true && vite build && npm run generate-sitemap"
```

**Purpose**: Production build with sitemap generation\
**Usage**: `npm run build`\
**Description**:

* Skips TypeScript checking for faster builds
* Builds the application for production
* Generates sitemap automatically

#### `build:seo`

```json theme={null}
"build:seo": "npm run build && npm run generate-sitemap"
```

**Purpose**: SEO-optimized build\
**Usage**: `npm run build:seo`\
**Description**: Ensures sitemap is generated for SEO purposes

#### `preview`

```json theme={null}
"preview": "vite preview"
```

**Purpose**: Preview production build locally\
**Usage**: `npm run preview`\
**Description**: Serves the production build locally for testing

### Sitemap Scripts

#### `generate-sitemap`

```json theme={null}
"generate-sitemap": "node scripts/generate-sitemap-advanced.js"
```

**Purpose**: Generate comprehensive sitemap\
**Usage**: `npm run generate-sitemap`\
**Description**: Generates advanced sitemap with all routes and metadata

#### `generate-sitemap:simple`

```json theme={null}
"generate-sitemap:simple": "node scripts/generate-sitemap.js"
```

**Purpose**: Generate simple sitemap\
**Usage**: `npm run generate-sitemap:simple`\
**Description**: Generates basic sitemap for quick deployment

### Code Quality Scripts

#### `lint`

```json theme={null}
"lint": "eslint ."
```

**Purpose**: Run ESLint code analysis\
**Usage**: `npm run lint`\
**Description**: Analyzes code for potential issues and style violations

## Dependencies

### Core Framework Dependencies

#### React Ecosystem

```json theme={null}
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.0"
```

**Purpose**: Core React framework and routing\
**Versions**: React 18 with latest features\
**Usage**: Main application framework and client-side routing

#### TypeScript

```json theme={null}
"typescript": "~5.7.2"
```

**Purpose**: TypeScript language support\
**Version**: TypeScript 5.7.2\
**Usage**: Type safety and enhanced development experience

### Video Conferencing Dependencies

#### Whereby Embedded Rooms

Video conferencing is provided via Whereby embedded rooms (iframe-based).
No additional npm packages required.

**Purpose**: Video conferencing integration\
**Features**:

* Real-time video/audio communication
* Screen sharing capabilities
* Participant management
* Host and participant differentiated URLs

### UI and Styling Dependencies

#### Tailwind CSS

```json theme={null}
"tailwindcss": "^3.4.1",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35"
```

**Purpose**: Utility-first CSS framework\
**Features**:

* Rapid UI development
* Responsive design utilities
* Dark mode support
* Custom component styling

#### Headless UI

```json theme={null}
"@headlessui/react": "^2.2.0"
```

**Purpose**: Accessible UI components\
**Features**:

* Accessible dropdown menus
* Modal components
* Toggle switches
* Navigation components

#### React Icons

```json theme={null}
"react-icons": "^5.0.1"
```

**Purpose**: Icon library\
**Features**:

* Comprehensive icon collection
* Multiple icon families
* Tree-shakeable imports

### Animation and Interaction

#### Framer Motion

```json theme={null}
"framer-motion": "^12.4.7"
```

**Purpose**: Animation library\
**Features**:

* Smooth animations
* Gesture recognition
* Layout animations
* Scroll-triggered animations

#### React Hot Toast

```json theme={null}
"react-hot-toast": "^2.5.2",
"react-toastify": "^11.0.3"
```

**Purpose**: Notification system\
**Features**:

* Toast notifications
* Success/error messages
* Customizable styling
* Auto-dismiss functionality

### Backend Integration

#### Supabase

```json theme={null}
"@supabase/supabase-js": "^2.49.3"
```

**Purpose**: Backend-as-a-Service\
**Features**:

* Database operations
* Authentication
* Real-time subscriptions
* File storage
* Edge functions

### Communication Dependencies

#### SendBird Chat

```json theme={null}
"@sendbird/uikit-react": "^3.15.12"
```

**Purpose**: Real-time messaging\
**Features**:

* Chat functionality
* File sharing
* Push notifications
* Group messaging

### Payment Processing

#### PayMob Integration

```json theme={null}
"axios": "^1.8.4"
```

**Purpose**: HTTP client for API calls\
**Usage**: Payment processing and external API integration

### Analytics and Monitoring

#### PostHog Analytics

```json theme={null}
"posthog-js": "^1.248.1"
```

**Purpose**: Product analytics\
**Features**:

* User behavior tracking
* Feature flags
* A/B testing
* Event tracking

#### LogRocket

```json theme={null}
"logrocket": "^10.1.0",
"logrocket-react": "^6.0.3"
```

**Purpose**: Error tracking and session replay\
**Features**:

* Error monitoring
* User session replay
* Performance monitoring
* Debug information

### Email and Communication

#### React Email

```json theme={null}
"@react-email/components": "^0.0.13",
"@react-email/render": "^1.0.5",
"resend": "^4.1.2"
```

**Purpose**: Email template system\
**Features**:

* HTML email templates
* React-based email components
* Email delivery service
* Template rendering

### File and Document Processing

#### PDF Processing

```json theme={null}
"pdf-lib": "^1.17.1",
"pdfjs-dist": "^3.11.174",
"react-pdf": "^7.7.1"
```

**Purpose**: PDF handling\
**Features**:

* PDF viewing
* PDF manipulation
* PDF generation
* Document annotation

#### Excel Processing

```json theme={null}
"xlsx": "^0.18.5"
```

**Purpose**: Excel file handling\
**Features**:

* Excel file reading
* Excel file writing
* Data export/import
* Spreadsheet manipulation

### Image and Media Processing

#### Image Processing

```json theme={null}
"@imgly/background-removal-node": "^1.4.5",
"remove.bg": "^1.3.0",
"sharp": "^0.33.5"
```

**Purpose**: Image manipulation\
**Features**:

* Background removal
* Image optimization
* Image resizing
* Format conversion

#### Cloudinary

```json theme={null}
"cloudinary": "^2.6.0"
```

**Purpose**: Cloud image management\
**Features**:

* Image upload
* Image transformation
* CDN delivery
* Image optimization

### Calendar and Scheduling

#### FullCalendar

```json theme={null}
"@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/interaction": "^6.1.15",
"@fullcalendar/react": "^6.1.15",
"@fullcalendar/timegrid": "^6.1.15"
```

**Purpose**: Calendar functionality\
**Features**:

* Calendar display
* Event scheduling
* Drag and drop
* Multiple view types

#### React Calendar

```json theme={null}
"react-calendar": "^5.1.0"
```

**Purpose**: Date picker component\
**Features**:

* Date selection
* Range selection
* Custom styling
* Localization support

### Content Management

#### Editor.js

```json theme={null}
"@editorjs/editorjs": "^2.30.8",
"@editorjs/header": "^2.8.8",
"@editorjs/image": "^2.10.2",
"@editorjs/list": "^2.0.6",
"@editorjs/paragraph": "^2.11.7",
"@editorjs/quote": "^2.7.6"
```

**Purpose**: Rich text editor\
**Features**:

* Block-based editing
* Multiple content types
* Extensible plugins
* Clean JSON output

#### Craft.js

```json theme={null}
"@craftjs/core": "^0.2.12"
```

**Purpose**: Page builder\
**Features**:

* Drag and drop interface
* Component-based building
* Real-time editing
* Responsive design

### Maps and Location

#### Mapbox

```json theme={null}
"mapbox-gl": "^3.13.0",
"@types/mapbox-gl": "^3.4.1"
```

**Purpose**: Maps and geolocation\
**Features**:

* Interactive maps
* Address autocomplete
* Geolocation services
* Custom map styling

### Machine Learning and AI

#### TensorFlow\.js

```json theme={null}
"@tensorflow/tfjs": "^4.22.0",
"@tensorflow-models/body-segmentation": "^1.0.2"
```

**Purpose**: Machine learning in browser\
**Features**:

* Body segmentation
* Face detection
* Image recognition
* Client-side ML

#### Face API

```json theme={null}
"face-api.js": "^0.20.0"
```

**Purpose**: Face recognition\
**Features**:

* Face detection
* Face recognition
* Emotion detection
* Age/gender estimation

#### ONNX Runtime

```json theme={null}
"onnxruntime-web": "^1.21.0"
```

**Purpose**: ONNX model execution\
**Features**:

* Model inference
* Cross-platform compatibility
* High performance
* Multiple model formats

### Utility Libraries

#### Date and Time

```json theme={null}
"react-calendar": "^5.1.0"
```

**Purpose**: Date handling\
**Features**: Date selection and manipulation

#### UUID Generation

```json theme={null}
"uuid": "^9.0.1"
```

**Purpose**: Unique identifier generation\
**Features**: UUID v4 generation

#### Color Processing

```json theme={null}
"fast-average-color": "^9.5.0"
```

**Purpose**: Color analysis\
**Features**: Average color calculation from images

#### HTML Processing

```json theme={null}
"cheerio": "^1.0.0"
```

**Purpose**: Server-side HTML parsing\
**Features**: jQuery-like server-side DOM manipulation

#### Canvas Processing

```json theme={null}
"html2canvas": "^1.4.1"
```

**Purpose**: Screenshot generation\
**Features**: DOM to canvas conversion

#### Computer Vision

```json theme={null}
"jsfeat": "^0.0.8"
```

**Purpose**: Computer vision algorithms\
**Features**: Image processing and analysis

### Development and Build Tools

#### Vite

```json theme={null}
"vite": "^6.0.7"
```

**Purpose**: Build tool and dev server\
**Features**:

* Fast development server
* Hot module replacement
* Optimized production builds
* Plugin ecosystem

#### React Plugin

```json theme={null}
"@vitejs/plugin-react": "^4.3.4"
```

**Purpose**: React support for Vite\
**Features**:

* React Fast Refresh
* JSX transformation
* React-specific optimizations

### Mobile and Desktop

#### Tauri

```json theme={null}
"@tauri-apps/api": "^2.4.0"
```

**Purpose**: Desktop app development\
**Features**:

* Desktop app capabilities
* Native OS integration
* File system access
* Native notifications

### User Experience

#### Driver.js

```json theme={null}
"driver.js": "^1.3.5"
```

**Purpose**: User onboarding\
**Features**:

* Interactive tutorials
* Feature highlighting
* Step-by-step guides
* User onboarding flows

#### Emoji Picker

```json theme={null}
"emoji-picker-react": "^4.13.2"
```

**Purpose**: Emoji selection\
**Features**:

* Emoji picker component
* Unicode emoji support
* Search functionality
* Custom emoji categories

#### Parallax Effects

```json theme={null}
"react-just-parallax": "^3.1.16"
```

**Purpose**: Parallax scrolling effects\
**Features**:

* Smooth parallax animations
* Performance optimized
* Customizable effects

#### Intersection Observer

```json theme={null}
"react-intersection-observer": "^9.15.1"
```

**Purpose**: Scroll-based animations\
**Features**:

* Intersection detection
* Lazy loading
* Scroll-triggered animations
* Performance monitoring

### SEO and Meta

#### React Helmet

```json theme={null}
"react-helmet": "^6.1.0",
"react-helmet-async": "^2.0.5"
```

**Purpose**: Document head management\
**Features**:

* Dynamic meta tags
* SEO optimization
* Social media tags
* Title management

### Data Visualization

#### Recharts

```json theme={null}
"recharts": "^2.15.1"
```

**Purpose**: Chart and graph library\
**Features**:

* Responsive charts
* Multiple chart types
* Interactive features
* Customizable styling

### Frame Components

#### React Frame Component

```json theme={null}
"react-frame-component": "^5.2.7"
```

**Purpose**: Iframe integration\
**Features**:

* Iframe components
* Isolated styling
* Cross-origin communication
* Sandboxed content

### CORS and Security

#### CORS

```json theme={null}
"cors": "^2.8.5"
```

**Purpose**: Cross-origin resource sharing\
**Features**: CORS middleware for API requests

### Environment and Configuration

#### Dotenv

```json theme={null}
"dotenv": "^17.2.1"
```

**Purpose**: Environment variable management\
**Features**: Environment variable loading

## DevDependencies

### TypeScript Support

```json theme={null}
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@types/uuid": "^9.0.8"
```

**Purpose**: TypeScript type definitions\
**Features**: Type safety for React and utilities

### Code Quality Tools

#### ESLint

```json theme={null}
"eslint": "^9.17.0",
"@eslint/js": "^9.17.0",
"typescript-eslint": "^8.19.1"
```

**Purpose**: Code linting and formatting\
**Features**:

* Code quality analysis
* Style enforcement
* Error detection
* Best practice enforcement

#### ESLint Plugins

```json theme={null}
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16"
```

**Purpose**: React-specific linting rules\
**Features**:

* React Hooks validation
* React Refresh support
* React best practices

#### Globals

```json theme={null}
"globals": "^15.14.0"
```

**Purpose**: Global variable definitions\
**Features**: ESLint global variable support

### Build Tools

#### Supabase CLI

```json theme={null}
"supabase": "^2.12.1"
```

**Purpose**: Supabase development tools\
**Features**:

* Local development
* Database management
* Function deployment
* Migration handling

### Babel Support

```json theme={null}
"babel-plugin-add-react-displayname": "^0.0.5"
```

**Purpose**: React display name support\
**Features**: Automatic display name generation

## Package Management

### NPM Configuration

* **Lock File**: `package-lock.json` present
* **Registry**: Default NPM registry
* **Engine**: Node.js 18+ recommended

### Dependency Management

* **Version Strategy**: Caret (^) for most dependencies
* **Security**: Regular security audits
* **Updates**: Regular dependency updates

### Bundle Analysis

* **Size Optimization**: Tree shaking enabled
* **Code Splitting**: Automatic code splitting
* **Minification**: Production builds minified

## Performance Considerations

### Bundle Optimization

* **Vendor Chunks**: Separate vendor bundles
* **Lazy Loading**: Route-based code splitting
* **Tree Shaking**: Unused code elimination
* **Minification**: Production code minification

### Development Experience

* **Hot Reload**: Fast development server
* **Type Checking**: TypeScript integration
* **Error Overlay**: Clear error messages
* **Source Maps**: Debug-friendly builds

## Security Considerations

### Dependency Security

* **Regular Audits**: `npm audit` for security issues
* **Version Pinning**: Critical dependencies pinned
* **Vulnerability Scanning**: Automated security scanning

### Environment Variables

* **Sensitive Data**: Never committed to repository
* **Validation**: Runtime validation of required variables
* **Documentation**: Clear documentation of required variables

## Maintenance and Updates

### Update Strategy

* **Regular Updates**: Monthly dependency updates
* **Security Patches**: Immediate security updates
* **Breaking Changes**: Careful evaluation before major updates
* **Testing**: Comprehensive testing after updates

### Monitoring

* **Bundle Size**: Monitor bundle size changes
* **Performance**: Track performance metrics
* **Dependencies**: Monitor dependency health
* **Security**: Regular security assessments