151 lines
4.4 KiB
Markdown
151 lines
4.4 KiB
Markdown
# Technology Stack
|
|
|
|
**Analysis Date:** 2026-03-13
|
|
|
|
## Languages
|
|
|
|
**Primary:**
|
|
- TypeScript (React) - All application logic and components
|
|
- CSS - Styling via Tailwind CSS with custom theme variables
|
|
|
|
**Secondary:**
|
|
- JavaScript - Build tool configuration
|
|
|
|
## Runtime
|
|
|
|
**Environment:**
|
|
- Node.js (latest LTS recommended)
|
|
|
|
**Package Manager:**
|
|
- pnpm (evidenced by `pnpm.overrides` in `package.json`)
|
|
- Lockfile: Not committed to repository
|
|
|
|
## Frameworks
|
|
|
|
**Core:**
|
|
- **React 18.3.1** - UI library with hooks and functional components
|
|
- Peer dependency (optional, for compatibility with Figma Make)
|
|
- **React Router 7.13.0** - Client-side routing with Data API mode
|
|
- Router configuration in `src/app/routes.ts`
|
|
- Uses `createBrowserRouter` for SPA navigation
|
|
|
|
**UI Component Framework:**
|
|
- **Radix UI** - Headless accessible UI primitives
|
|
- 23 Radix primitives including: accordion, dialog, dropdown-menu, select, tabs, tooltip, etc.
|
|
- Provides accessibility and keyboard navigation out of the box
|
|
|
|
**Styling:**
|
|
- **Tailwind CSS 4.1.12** - Utility-first CSS framework
|
|
- Integrated via `@tailwindcss/vite` plugin
|
|
- Custom theme configuration in `src/styles/theme.css`
|
|
- Uses CSS variables for theming with light/dark mode support
|
|
- Animation support via `tw-animate-css`
|
|
|
|
**Animation:**
|
|
- **Framer Motion ("motion" package 12.23.24)** - React animation library
|
|
|
|
## Build Tools
|
|
|
|
**Build System:**
|
|
- **Vite 6.3.5** - Fast development server and production bundler
|
|
- Config: `vite.config.ts`
|
|
- Uses `@vitejs/plugin-react` for React support
|
|
- Path alias `@` configured to `./src`
|
|
- Asset support: `.svg`, `.csv` files
|
|
|
|
**CSS Processing:**
|
|
- **PostCSS** - CSS transformation (via Vite plugin)
|
|
- Config: `postcss.config.mjs` (empty - Tailwind v4 handles this automatically)
|
|
|
|
## Key Dependencies
|
|
|
|
**Critical UI Components:**
|
|
- `@radix-ui/react-*` (23 packages) - Accessible UI primitives
|
|
- `class-variance-authority` 0.7.1 - Type-safe Tailwind variant generation
|
|
- `clsx` 2.1.1 - Conditional class name joining
|
|
- `tailwind-merge` 3.2.0 - Tailwind class deduplication
|
|
- `lucide-react` 0.487.0 - Icon library
|
|
|
|
**Form & Input:**
|
|
- `react-hook-form` 7.55.0 - Form state management and validation
|
|
- `cmdk` 1.1.1 - Command palette/Combobox component
|
|
- `input-otp` 1.4.2 - OTP input component
|
|
|
|
**Data Visualization:**
|
|
- `recharts` 2.15.2 - React charting library
|
|
|
|
**Date Handling:**
|
|
- `date-fns` 3.6.0 - Date formatting and manipulation
|
|
- `react-day-picker` 8.10.1 - Date picker component
|
|
|
|
**Theming:**
|
|
- `next-themes` 0.4.6 - Theme switching (dark/light mode)
|
|
|
|
**Notifications:**
|
|
- `sonner` 2.0.3 - Toast notifications
|
|
|
|
**Carousels & Layout:**
|
|
- `embla-carousel-react` 8.6.0 - Touch carousel
|
|
- `react-resizable-panels` 2.1.7 - Resizable panel layouts
|
|
- `react-responsive-masonry` 2.7.1 - Masonry grid layout
|
|
|
|
**Drag & Drop:**
|
|
- `react-dnd` 16.0.1 + `react-dnd-html5-backend` 16.0.1 - Drag and drop functionality
|
|
|
|
**Drawer/Modal:**
|
|
- `vaul` 1.1.2 - Drawer component for mobile
|
|
|
|
**Slider:**
|
|
- `react-slick` 0.31.0 - Image/content carousel
|
|
|
|
**Optional/Peer Dependencies:**
|
|
- `@emotion/react` / `@emotion/styled` - CSS-in-JS (for MUI compatibility)
|
|
- `@mui/material` / `@mui/icons-material` - Material UI (peer dependency for Figma Make)
|
|
|
|
## Configuration
|
|
|
|
**Environment:**
|
|
- No `.env` file detected in repository
|
|
- Configuration appears to be hardcoded or passed at build time
|
|
- No environment-specific configs visible
|
|
|
|
**Build:**
|
|
- `vite.config.ts` - Vite configuration with React and Tailwind plugins
|
|
- `postcss.config.mjs` - Empty config (Tailwind v4 handles PostCSS internally)
|
|
- `tsconfig.json` - Not present in repository (TypeScript handled by Vite)
|
|
|
|
## Platform Requirements
|
|
|
|
**Development:**
|
|
- Node.js (latest LTS)
|
|
- pnpm package manager
|
|
- Modern browser with ES2020+ support
|
|
|
|
**Production:**
|
|
- Static file hosting (SPA)
|
|
- Target: 7-inch industrial touchscreen displays (800x480 to 1024x600)
|
|
- Optimized for landscape orientation
|
|
- Touch-friendly interface design
|
|
|
|
**Browser Support:**
|
|
- Modern Chromium-based browsers (Chrome, Edge)
|
|
- WebKit (Safari)
|
|
- Firefox (ESR)
|
|
|
|
## Notable Architecture Decisions
|
|
|
|
**Design System:**
|
|
- Uses shadcn/ui pattern (Radix + Tailwind + CVA)
|
|
- Custom theme tokens defined in CSS variables
|
|
- Dark theme by default for industrial use
|
|
- Touch-optimized sizing (minimum 44x44px touch targets)
|
|
|
|
**Component Organization:**
|
|
- UI components: `src/app/components/ui/`
|
|
- View components: `src/app/components/views/`
|
|
- Layout components: `src/app/components/` (root level)
|
|
|
|
---
|
|
|
|
*Stack analysis: 2026-03-13*
|