Built With

Frontend Technologies

Core Framework

• Next.js 15.3.4 - React framework with App Router for server-side rendering and static generation
• React 19.0.0 - Modern React with concurrent features and improved performance
• TypeScript 5 - Type-safe JavaScript for better development experience and code reliability

UI & Styling

• Tailwind CSS 4 - Utility-first CSS framework for rapid UI development
• Radix UI - Accessible, unstyled UI components:
  • @radix-ui/react-dialog - Modal dialogs
  • @radix-ui/react-dropdown-menu - Dropdown menus
  • @radix-ui/react-progress - Progress indicators
  • @radix-ui/react-tabs - Tabbed interfaces
  • @radix-ui/react-theme-toggle - Dark/light mode switching
• Framer Motion 12.23.3 - Animation library for smooth transitions
• Lucide React 0.523.0 - Beautiful, customizable icons

State Management & Forms

• React Hook Form 7.60.0 - Performant forms with minimal re-renders
• Zod 3.25.74 - TypeScript-first schema validation
• next-themes 0.4.6 - Theme management with system preference detection

Backend & APIs

Serverless Functions

• Next.js API Routes - Serverless functions for backend logic
• Vercel Edge Runtime - Global edge computing for low-latency responses

External APIs

• OpenAI API 5.8.0 - GPT-4 integration for content analysis and vision capabilities
• Cloudinary 2.7.0 - Cloud image storage and CDN

File Processing

• JSZip 3.10.1 - Client-side ZIP file processing
• Adm-zip 0.5.16 - Server-side ZIP handling
• Multer 2.0.1 - File upload middleware

Development & Build Tools

Package Management

• npm - Node.js package manager
• pnpm - Fast, disk space efficient package manager

Development Tools

• ESLint 9 - Code linting and quality assurance
• TypeScript 5 - Static type checking
• Turbopack - Next.js fast bundler for development

Build & Deployment

• Vercel - Platform for deployment and hosting
• Next.js Build System - Optimized production builds

Content Processing & Display

Document Processing

• React Markdown 10.1.0 - Markdown rendering with custom components
• KaTeX 0.16.22 - Fast math typesetting
• React KaTeX 3.1.0 - React wrapper for KaTeX
• Rehype plugins - Markdown processing pipeline:
  • rehype-katex - Math rendering
  • rehype-raw - HTML support in markdown

Data Visualization

• Recharts 3.0.2 - Composable charting library for React

Performance & Optimization

Client-Side Processing

• Web Workers - Background processing for ZIP files
• Canvas API - Client-side image optimization and compression
• IndexedDB - Local storage for caching processed documents

Caching & State Management

• React useRef - Persistent state without re-renders
• Local Storage - Browser-based caching
• Memory Management - Automatic cache cleanup and garbage collection

Cloud Services & Infrastructure

Hosting & CDN

• Vercel - Global edge network for fast content delivery
• Cloudinary - Image optimization and global CDN

Environment Management

• Environment Variables - Secure API key management
• Next.js Config - Optimized build configuration

Mobile & Accessibility

Responsive Design

• Mobile-first approach - Optimized for all screen sizes
• Touch-friendly interfaces - Gesture support for mobile devices

Progressive Web App Features

• Service Worker ready - Offline capability preparation
• App-like experience - Native mobile app feel

Development Experience

Code Quality

• ESLint - Code linting and style enforcement
• TypeScript - Compile-time error checking
• Prettier - Code formatting

Developer Tools

• React DevTools - Component debugging
• Next.js DevTools - Performance monitoring
• Browser DevTools - Network and performance analysis

Key Technical Decisions

Why These Technologies?

1. Next.js 15 - Chosen for its excellent performance, SEO capabilities, and serverless deployment options
2. TypeScript - Essential for maintaining code quality in a complex application with multiple APIs
3. Tailwind CSS - Rapid development and consistent design system
4. Client-side processing - Reduces server load and enables offline functionality
5. Web Workers - Prevents UI blocking during heavy computations
6. Adaptive algorithms - Ensures the app works efficiently across different device capabilities

Resource-Constrained Optimizations

• Lazy loading - Components load only when needed
• Code splitting - Automatic bundle optimization
• Image optimization - Client-side compression and resizing
• Efficient caching - Smart cache invalidation and cleanup
• Minimal dependencies - Carefully selected packages to reduce bundle size

This technology stack enables the application to work efficiently in resource-constrained environments while providing a modern, responsive user experience.

Built With

• axios
• canvas-api
• class-variance-authority
• cloudinary
• clsx
• css3
• date-fns
• embla-carousel
• eslint
• framer-motion
• git
• html5
• input-otp
• javascript
• jszip
• katex
• lucide-react
• multer
• next.js
• node.js
• openai-api
• postcss
• radix-ui
• react
• react-day-picker
• react-dropzone
• react-hook-form
• react-katex
• react-markdown
• react-resizable-panels
• recharts
• rehype-katex
• rehype-raw
• remark-math
• sonner
• tailwind-css
• tailwind-merge
• typescript
• vaul
• vercel
• web-workers
• webpack
• zod