How vinayvermavlogs/vinaytypeimage works
AirInk is a browser-based air-writing app: a user draws in front of a camera, sees gesture-controlled ink, and can save snapshots or request handwriting recognition and speech output. The main page handles camera setup, tracking, gesture interpretation, stroke state, and the drawing interface; a separate server route proxies recognition requests to Lovable’s AI gateway. Routing and server error handling provide the application shell. The index page excerpt is partial, so its unshown recognition-request wiring is not asserted.
Main entry points: index.tsx Air-writing app · routeTree.gen.ts Route registry · sidebar.tsx Responsive sidebar · recognize.ts Recognition endpoint
Components 17
Air-writing experience
- Air-writing app
src/routes/index.tsx - MediaPipe tracking
- Browser camera
Recognition service
- Recognition endpoint
src/routes/api/recognize.ts - Lovable AI gateway
Routing and runtime
- Router setup
src/router.tsx - Route registry
src/routeTree.gen.ts - Root application shell
src/routes/__root.tsx - HTTP server entry
src/server.ts - Error capture
src/lib/error-capture.ts - Server error page
src/lib/error-page.ts - Client error reporting
src/lib/lovable-error-reporting.ts
Reusable UI
- UI primitives
src/components/ui - Responsive sidebar
src/components/ui/sidebar.tsx - Mobile breakpoint hook
src/hooks/use-mobile.tsx - Class utilities
src/lib/utils.ts
Other components
- Camera user
Connections 16
- Camera user → Air-writing app: uses
src/routes/index.tsx - Air-writing app → Browser camera: starts capture
src/routes/index.tsx - Air-writing app → MediaPipe tracking: loads tracking
src/routes/index.tsx - Air-writing app → Recognition endpoint: requests recognition
- Recognition endpoint → Lovable AI gateway: sends image
src/routes/api/recognize.ts - Router setup → Route registry: uses routes
src/router.tsx - Route registry → Root application shell: registers root
src/routeTree.gen.ts - Route registry → Air-writing app: registers page
src/routeTree.gen.ts - Route registry → Recognition endpoint: registers endpoint
src/routeTree.gen.ts - Root application shell → Client error reporting: reports errors
src/routes/__root.tsx - HTTP server entry → Error capture: consumes errors
src/server.ts - HTTP server entry → Server error page: renders fallback
src/server.ts - Responsive sidebar → Mobile breakpoint hook: checks viewport
src/components/ui/sidebar.tsx - Responsive sidebar → UI primitives: uses primitives
src/components/ui/sidebar.tsx - Responsive sidebar → Class utilities: merges classes
src/components/ui/sidebar.tsx - UI primitives → Class utilities: merges classes
src/components/ui/context-menu.tsx