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`

"dev": "vite"

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

`build`

"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`

"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`

"preview": "vite preview"

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

Sitemap Scripts

`generate-sitemap`

"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`

"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`

"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

"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

"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

"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

"@headlessui/react": "^2.2.0"

Purpose: Accessible UI components
Features:

Accessible dropdown menus
Modal components
Toggle switches
Navigation components

React Icons

"react-icons": "^5.0.1"

Purpose: Icon library
Features:

Comprehensive icon collection
Multiple icon families
Tree-shakeable imports

Animation and Interaction

Framer Motion

"framer-motion": "^12.4.7"

Purpose: Animation library
Features:

Smooth animations
Gesture recognition
Layout animations
Scroll-triggered animations

React Hot Toast

"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

"@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

"@sendbird/uikit-react": "^3.15.12"

Purpose: Real-time messaging
Features:

Chat functionality
File sharing
Push notifications
Group messaging

Payment Processing

PayMob Integration

"axios": "^1.8.4"

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

Analytics and Monitoring

PostHog Analytics

"posthog-js": "^1.248.1"

Purpose: Product analytics
Features:

User behavior tracking
Feature flags
A/B testing
Event tracking

LogRocket

"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

"@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

"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

"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

"@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

"cloudinary": "^2.6.0"

Purpose: Cloud image management
Features:

Image upload
Image transformation
CDN delivery
Image optimization

Calendar and Scheduling

FullCalendar

"@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

"react-calendar": "^5.1.0"

Purpose: Date picker component
Features:

Date selection
Range selection
Custom styling
Localization support

Content Management

Editor.js

"@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

"@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

"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

"@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

"face-api.js": "^0.20.0"

Purpose: Face recognition
Features:

Face detection
Face recognition
Emotion detection
Age/gender estimation

ONNX Runtime

"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

"react-calendar": "^5.1.0"

Purpose: Date handling
Features: Date selection and manipulation

UUID Generation

"uuid": "^9.0.1"

Purpose: Unique identifier generation
Features: UUID v4 generation

Color Processing

"fast-average-color": "^9.5.0"

Purpose: Color analysis
Features: Average color calculation from images

HTML Processing

"cheerio": "^1.0.0"

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

Canvas Processing

"html2canvas": "^1.4.1"

Purpose: Screenshot generation
Features: DOM to canvas conversion

Computer Vision

"jsfeat": "^0.0.8"

Purpose: Computer vision algorithms
Features: Image processing and analysis

Development and Build Tools

Vite

"vite": "^6.0.7"

Purpose: Build tool and dev server
Features:

Fast development server
Hot module replacement
Optimized production builds
Plugin ecosystem

React Plugin

"@vitejs/plugin-react": "^4.3.4"

Purpose: React support for Vite
Features:

React Fast Refresh
JSX transformation
React-specific optimizations

Mobile and Desktop

Tauri

"@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

"driver.js": "^1.3.5"

Purpose: User onboarding
Features:

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

Emoji Picker

"emoji-picker-react": "^4.13.2"

Purpose: Emoji selection
Features:

Emoji picker component
Unicode emoji support
Search functionality
Custom emoji categories

Parallax Effects

"react-just-parallax": "^3.1.16"

Purpose: Parallax scrolling effects
Features:

Smooth parallax animations
Performance optimized
Customizable effects

Intersection Observer

"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

"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

"recharts": "^2.15.1"

Purpose: Chart and graph library
Features:

Responsive charts
Multiple chart types
Interactive features
Customizable styling

Frame Components

React Frame Component

"react-frame-component": "^5.2.7"

Purpose: Iframe integration
Features:

Iframe components
Isolated styling
Cross-origin communication
Sandboxed content

CORS and Security

CORS

"cors": "^2.8.5"

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

Environment and Configuration

Dotenv

"dotenv": "^17.2.1"

Purpose: Environment variable management
Features: Environment variable loading

DevDependencies

TypeScript Support

"@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

"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

"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

"globals": "^15.14.0"

Purpose: Global variable definitions
Features: ESLint global variable support

Build Tools

Supabase CLI

"supabase": "^2.12.1"

Purpose: Supabase development tools
Features:

Local development
Database management
Function deployment
Migration handling

Babel Support

"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

​Package.json Configuration Documentation

​Package Overview

​Scripts Configuration

​Development Scripts

​dev

​build

​build:seo

​preview

​Sitemap Scripts

​generate-sitemap

​generate-sitemap:simple

​Code Quality Scripts

​lint

​Dependencies

​Core Framework Dependencies

​React Ecosystem

​TypeScript

​Video Conferencing Dependencies

​Whereby Embedded Rooms

​UI and Styling Dependencies

​Tailwind CSS

​Headless UI

​React Icons

​Animation and Interaction

​Framer Motion

​React Hot Toast

​Backend Integration

​Supabase

​Communication Dependencies

​SendBird Chat

​Payment Processing

​PayMob Integration

​Analytics and Monitoring

​PostHog Analytics

​LogRocket

​Email and Communication

​React Email

​File and Document Processing

​PDF Processing

​Excel Processing

​Image and Media Processing

​Image Processing

​Cloudinary

​Calendar and Scheduling

​FullCalendar

​React Calendar

​Content Management

​Editor.js

​Craft.js

​Maps and Location

​Mapbox

​Machine Learning and AI

​TensorFlow.js

​Face API

​ONNX Runtime

​Utility Libraries

​Date and Time

​UUID Generation

​Color Processing

​HTML Processing

​Canvas Processing

​Computer Vision

​Development and Build Tools

​Vite

​React Plugin

​Mobile and Desktop

​Tauri

​User Experience

​Driver.js

​Emoji Picker

​Parallax Effects

​Intersection Observer

​SEO and Meta

​React Helmet

​Data Visualization

​Recharts

​Frame Components

​React Frame Component

​CORS and Security

​CORS