Skip to main content

​
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

​
100ms (HMS) Video SDK

"@100mslive/hms-video-store": "^0.12.38",
"@100mslive/react-sdk": "^0.10.38",
"@100mslive/roomkit-react": "^0.3.38"
Purpose: Video conferencing integration
Features:
  • Real-time video/audio communication
  • Screen sharing capabilities
  • Participant management
  • Recording functionality

​
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