# Project export: Foresight This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2026 - Tagline: ForeSight turns your daily environment into a proactive personal shopper by using first-person vision to detect low essentials and physical struggles before you even notice them - Devpost: https://devpost.com/software/foresight-97nort - GitHub: https://github.com/AkhilBod/Foresight-TreeHacks-.git - Video: https://www.youtube.com/embed/ZSxxLpMUhDM?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 0 GitHub contributor(s) — ## Devpost submission (written by the team) ### Inspiration We've all had that moment — you reach for the dish soap mid-wash, and it's empty. You're out of coffee filters on a Monday morning. The essentials we depend on daily always seem to run out at the worst possible time. We realized that the cameras and smart devices already in our homes could do more than just sit there. What if they could see what you're running low on and handle it before you even notice? That's the idea behind Foresight — turning passive home cameras into an intelligent, proactive shopping assistant that never lets you run out of the things that matter. What It Does Foresight is an AI-powered smart home commerce platform that uses your existing cameras to detect household items in use, predict when they're running low, and automatically purchase replacements through Amazon — all with a single tap of approval. Core Features Real-Time AI Vision Detection — A live camera feed powered by OpenAI's GPT-5 nano analyzes your environment in real time, identifying household products and their usage context (e.g., washing dishes → dish soap, cooking → olive oil). Complementary Item Recommendations — The AI doesn't just detect what's visible — it recommends complementary items you might need based on what it sees (see a mouse → recommend a keyboard, see a TV → recommend a streaming device). One-Tap Purchase Approval — Detected items appear as cards on your dashboard. Approve with a single tap, and Foresight's AI agent handles the rest. Autonomous Browser Shopping Agent — Powered by Browserbase and Playwright, an AI agent opens a real browser session, searches Amazon, selects the best product, and adds it to your cart — all autonomously. Live Shopping View — Watch the AI agent shop in real time through an embedded live browser view directly in the dashboard. A browser-style modal shows the agent navigating Amazon, searching, and adding items to cart. Smart Dashboard — An analytics dashboard with weekly spending charts, total savings, items tracked, and a live activity feed of all purchases and detections. Additional Features Items stack without duplicates, limited to 2 items per detection for quality recommendations Confidence scores randomized between 70-100% for realistic detection display Activity feed with timestamped entries for approvals, declines, and purchases Dynamic stats (total saved, items tracked, automation rate) update in real time Responsive design with dark theme optimized for home dashboard displays How We Built It Our tech stack combines cutting-edge AI with modern web technologies: Frontend: React 18 + TypeScript, built with Vite for instant hot module reloading. Tailwind CSS and shadcn/ui provide a sleek, dark-themed dashboard UI. Framer Motion powers smooth animations throughout. AI Vision: OpenAI's GPT-5 nano model processes camera frames via the Chat Completions API with vision capabilities. We chose GPT-5 nano for its speed — real-time detection needs sub-second responses. The model receives base64-encoded frames and returns structured JSON with item names, brands, confidence scores, and reasoning. Prompt Engineering: Carefully crafted prompts instruct the model to recommend complementary items rather than just identifying what's on screen. The AI thinks about what activities are happening and what related products would be useful. Browser Automation: Browserbase SDK creates cloud browser sessions, and Playwright-core connects via Chrome DevTools Protocol (CDP) to automate the full Amazon shopping flow — search, product selection, and add-to-cart. Live View: Browserbase's debug API provides a real-time fullscreen view URL that we embed as an iframe, letting users watch the AI agent shop in real time. Backend: A lightweight Express.js server handles Browserbase session management and Playwright automation. Runs on Node.js (required by Playwright — Bun is not supported). State Management: localStorage bridges the Camera component and Dashboard, with polling for real-time sync of pending purchases. Security: All API keys (OpenAI, Browserbase) stored in .env and loaded via dotenv — never exposed in client-side code or git history. Challenges We Ran Into Playwright + Bun Incompatibility — Discovered mid-build that Playwright doesn't support Bun's runtime. Had to set up a separate Node.js server process alongside the Bun-powered Vite frontend. GPT-5 Token Handling — GPT-5 requires max_completion_tokens instead of the older max_tokens parameter. Initial attempts with 500 tokens resulted in the model using all tokens for reasoning with no visible output — bumped to 2000. Browserbase CDP Connection — Getting Playwright to connect to Browserbase sessions via connectOverCDP required using the SDK's session.connectUrl rather than manually constructed WebSocket URLs. Amazon Selector Stability — Amazon's DOM structure varies across page loads. Went through multiple iterations of selectors, settling on broad patterns (.s-main-slot .s-result-item h2 a) with fallbacks and timeouts. Real-Time UX — Balancing the async nature of browser automation (takes 10-20 seconds) with a responsive UI. Solved by returning the live view URL immediately and running automation asynchronously. False Positive Reduction — Early prompts were too aggressive, detecting items in every frame. Refined to an evidence-based approach requiring clear visual evidence before recommendations. Accomplishments We're Proud Of Built a fully autonomous AI shopping agent that navigates real websites in under 36 hours Achieved real-time vision detection with GPT-5 nano at interactive speeds Created a live browser view that lets users watch AI agents work in real time Designed an intuitive dark-themed dashboard that feels like a premium smart home product Engineered complementary item recommendations that feel genuinely useful, not just pattern matching Seamlessly integrated 4 different APIs (OpenAI, Browserbase, Playwright, Amazon) into one cohesive flow What We Learned Advanced prompt engineering for vision models — the difference between "detect everything" and "recommend intelligently" is massive Real-time browser automation at scale with cloud browser infrastructure The nuances of connecting to remote browsers via CDP and managing session lifecycles Complex state management across independent React components using localStorage as a message bus How to build UX around async processes that take 10+ seconds without losing user engagement Web scraping resilience — Amazon's DOM is a moving target What's Next for Foresight 1. Smarter AI Usage tracking over time to predict depletion dates Multi-room camera support with unified inventory Price comparison across retailers before purchasing Learning user brand preferences from past approvals 2. Full Purchase Automation Saved payment methods for true one-click checkout Subscription detection — auto-set up Subscribe & Save for recurring items Budget limits and spending caps per category 3. Platform Expansion Integration with Walmart, Target, and Costco Smart home platform integration (HomeKit, Google Home, Alexa) Mobile app with push notifications for approval requests Voice approval — "Hey Foresight, approve the dish soap" 4. Privacy & Security On-device vision processing option (no cloud API calls) End-to-end encrypted camera feeds Granular privacy controls — exclude rooms, time windows, item categories Our vision is to make Foresight the invisible hand that keeps your home stocked so you never have to think about running out of anything again. ## README (from the GitHub repository) # Foresight — AI-Powered Smart Home Commerce > Turn your existing home cameras into a proactive shopping assistant that restocks your home before you run out. --- ## Inspiration You're mid-wash and the dish soap runs out. It's Monday morning and there are no coffee filters. The essentials we depend on daily always seem to run out at the worst possible time. The cameras and smart devices already in our homes sit idle — they watch but don't act. We asked: what if they could? Foresight turns passive home cameras into an intelligent commerce layer that sees what you're running low on and handles replenishment before you even notice. --- ## What It Does Foresight is an AI-powered smart home commerce platform. It uses your existing cameras to detect household items in use, predict when they're running low, and automatically purchase replacements through Amazon — all with a single tap of approval from you. --- ## Core Features ### Real-Time AI Vision Detection A live camera feed powered by OpenAI GPT-4o analyzes your environment in real time, identifying household products and their usage context — washing dishes triggers dish soap detection, cooking triggers olive oil. ### Complementary Item Recommendations The AI doesn't just identify what's visible. It reasons about what activity is happening and surfaces related products you're likely to need next: see a mouse, get a keyboard recommendation; see a TV, get a streaming device suggestion. ### One-Tap Purchase Approval Detected items surface as cards on your dashboard. Approve with a single tap — Foresight handles everything else. ### Autonomous Browser Shopping Agent Powered by Browserbase and Playwright, an AI agent spins up a real cloud browser session, navigates Amazon, searches for the best match, and adds it to your cart — fully autonomously. ### Live Shopping View Watch the agent shop in real time through an embedded live browser view in the dashboard. A browser-style modal shows the agent navigating Amazon, searching, and checking out. ### Smart Analytics Dashboard Weekly spending charts, total savings, items tracked, and a live activity feed of every detection, approval, and purchase — all updating in real time. --- ## Additional Details - Items deduplicate automatically — capped at 2 per detection for quality over quantity - Confidence scores displayed between 70–100% to reflect realistic detection variance - Timestamped activity feed logs approvals, declines, and completed purchases - Stats (total saved, items tracked, automation rate) update dynamically - Responsive dark theme optimized for always-on home dashboard displays --- ## How We Built It ### Frontend React 18 + TypeScript, built with Vite for instant hot module reloading. Tailwind CSS and shadcn/ui provide the dark dashboard UI. Framer Motion handles animations throughout. ### AI Vision OpenAI's GPT-4o processes camera frames via the Chat Completions API with vision capabilities. Frames are sent as base64-encoded images; the model returns structured JSON containing item names, brands, confidence scores, and reasoning. GPT-4o was chosen for its sub-second latency — real-time detection can't wait. ### Prompt Engineering Prompts are designed to make the model reason about *activities*, not just objects. Instead of "I see dish soap," the model thinks: "someone is washing dishes — what do they depend on?" That shift produces more actionable, contextually aware recommendations. ### Browser Automation Browserbase SDK provisions cloud browser sessions. Playwright-core connects via Chrome DevTools Protocol (CDP) to drive the full Amazon shopping flow: search, product selection, and add-to-cart — no human required. ### Live View Browserbase's debug API returns a real-time fullscreen URL that we embed as an iframe, letting users watch the agent shop as it happens. ### Backend Lightweight Express.js server handles Browserbase session management and Playwright automation. Runs on Node.js (Playwright requires Node — Bun is not supported). ### State Management `localStorage` bridges the Camera component and Dashboard with polling for real-time sync of pending purchase approvals. ### Security All API keys (OpenAI, Browserbase) are stored in `.env` and loaded via `dotenv`. No secrets are exposed in client-side code or committed to git history. --- ## Tech Stack | Layer | Technology | |---|---| | Frontend | React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion | | AI Vision | OpenAI GPT-4o (Chat Completions API w/ vision) | | Browser Automation | Browserbase SDK, Playwright-core, CDP | | Backend | Node.js, Express.js | | State | localStorage + polling | ## Detected evidence (automated analysis) Indexed codebase: 85 recognized source files, 270 KB. - CSS (language) — detected in the code - Express (technology) — detected in the code - HTML (language) — detected in the code - JavaScript (language) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code - FastAPI (technology) — claimed on Devpost, not found in the code - Python (language) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (94 of 94) ``` .env.example .gitignore BROWSERBASE_README.md bun.lockb components.json eslint.config.js index.html package.json postcss.config.js public/robots.txt README.md server/browserbase.js src/App.css src/App.tsx src/components/dashboard/Camera.tsx src/components/icons.tsx src/components/landing/FAQ.tsx src/components/landing/Features.tsx src/components/landing/Footer.tsx src/components/landing/Hero.tsx src/components/landing/HeroDashboardMockup.tsx src/components/landing/HowItWorks.tsx src/components/landing/Navbar.tsx src/components/landing/Pricing.tsx src/components/landing/Security.tsx src/components/landing/UseCases.tsx src/components/NavLink.tsx src/components/ui/accordion.tsx src/components/ui/alert-dialog.tsx src/components/ui/alert.tsx src/components/ui/aspect-ratio.tsx src/components/ui/avatar.tsx src/components/ui/badge.tsx src/components/ui/breadcrumb.tsx src/components/ui/button.tsx src/components/ui/calendar.tsx src/components/ui/card.tsx src/components/ui/carousel.tsx src/components/ui/chart.tsx src/components/ui/checkbox.tsx src/components/ui/collapsible.tsx src/components/ui/command.tsx src/components/ui/context-menu.tsx src/components/ui/dialog.tsx src/components/ui/drawer.tsx src/components/ui/dropdown-menu.tsx src/components/ui/form.tsx src/components/ui/hover-card.tsx src/components/ui/input-otp.tsx src/components/ui/input.tsx src/components/ui/label.tsx src/components/ui/menubar.tsx src/components/ui/navigation-menu.tsx src/components/ui/pagination.tsx src/components/ui/popover.tsx src/components/ui/progress.tsx src/components/ui/radio-group.tsx src/components/ui/resizable.tsx src/components/ui/scroll-area.tsx src/components/ui/select.tsx src/components/ui/separator.tsx src/components/ui/sheet.tsx src/components/ui/sidebar.tsx src/components/ui/skeleton.tsx src/components/ui/slider.tsx src/components/ui/sonner.tsx src/components/ui/switch.tsx src/components/ui/table.tsx src/components/ui/tabs.tsx src/components/ui/textarea.tsx src/components/ui/toast.tsx src/components/ui/toaster.tsx src/components/ui/toggle-group.tsx src/components/ui/toggle.tsx src/components/ui/tooltip.tsx src/components/ui/use-toast.ts src/hooks/use-mobile.tsx src/hooks/use-toast.ts src/index.css src/lib/browserbase.ts src/lib/utils.ts src/main.tsx src/pages/Dashboard.tsx src/pages/Index.tsx src/pages/NotFound.tsx src/test/example.test.ts src/test/setup.ts src/vite-env.d.ts tailwind.config.ts tsconfig.app.json tsconfig.json tsconfig.node.json vite.config.ts vitest.config.ts ``` ### Dependencies - package.json: @browserbasehq/sdk@^2.6.0, @eslint/js@^9.32.0, @hookform/resolvers@^3.10.0, @radix-ui/react-accordion@^1.2.11, @radix-ui/react-alert-dialog@^1.1.14, @radix-ui/react-aspect-ratio@^1.1.7, @radix-ui/react-avatar@^1.1.10, @radix-ui/react-checkbox@^1.3.2, @radix-ui/react-collapsible@^1.1.11, @radix-ui/react-context-menu@^2.2.15, @radix-ui/react-dialog@^1.1.14, @radix-ui/react-dropdown-menu@^2.1.15, @radix-ui/react-hover-card@^1.1.14, @radix-ui/react-label@^2.1.7, @radix-ui/react-menubar@^1.1.15, @radix-ui/react-navigation-menu@^1.2.13, @radix-ui/react-popover@^1.1.14, @radix-ui/react-progress@^1.1.7, @radix-ui/react-radio-group@^1.3.7, @radix-ui/react-scroll-area@^1.2.9, @radix-ui/react-select@^2.2.5, @radix-ui/react-separator@^1.1.7, @radix-ui/react-slider@^1.3.5, @radix-ui/react-slot@^1.2.3, @radix-ui/react-switch@^1.2.5, @radix-ui/react-tabs@^1.1.12, @radix-ui/react-toast@^1.2.14, @radix-ui/react-toggle@^1.1.9, @radix-ui/react-toggle-group@^1.1.10, @radix-ui/react-tooltip@^1.2.7, @tailwindcss/typography@^0.5.16, @tanstack/react-query@^5.83.0, @testing-library/jest-dom@^6.6.0, @testing-library/react@^16.0.0, @types/cors@^2.8.19, @types/express@^5.0.6, @types/node@^22.16.5, @types/react@^18.3.23, @types/react-dom@^18.3.7, @vitejs/plugin-react-swc@^3.11.0, autoprefixer@^10.4.21, class-variance-authority@^0.7.1, clsx@^2.1.1, cmdk@^1.1.1, cors@^2.8.6, date-fns@^3.6.0, dotenv@^17.3.1, embla-carousel-react@^8.6.0, eslint@^9.32.0, eslint-plugin-react-hooks@^5.2.0, eslint-plugin-react-refresh@^0.4.20, express@^5.2.1, framer-motion@^12.34.0, globals@^15.15.0, input-otp@^1.4.2, jsdom@^20.0.3, lovable-tagger@^1.1.13, lucide-react@^0.462.0, next-themes@^0.3.0, playwright-core@^1.58.2, postcss@^8.5.6, react@^18.3.1, react-day-picker@^8.10.1, react-dom@^18.3.1, react-hook-form@^7.61.1, react-resizable-panels@^2.1.9, react-router-dom@^6.30.1, recharts@^2.15.4, sonner@^1.7.4, tailwind-merge@^2.6.0, tailwindcss@^3.4.17, tailwindcss-animate@^1.0.7, typescript@^5.8.3, typescript-eslint@^8.38.0, vaul@^0.9.9, vite@^5.4.19, vitest@^3.2.4, zod@^3.25.76 ### Recent commits (newest first) - Revise README for improved project description - Revise README for Foresight project details - move browserbase keys to .env, remove from public code - browser base - fixed - tailored prompt - fixed - fixed - updated ui - updated confidence - uopdated backend - Security: Remove old API key from history and add .env protection - camlive - cam - finished - finished - fixed images - updated visuals - up[dated visuals - Remove Security and Pricing sections from landing page ## Key source files (fetched from GitHub, selected and truncated for size) ### BROWSERBASE_README.md ```markdown # Browserbase Server Setup This server handles the Browserbase automation for adding items to Amazon cart. ## Running the Server ### Terminal 1: Start the Browserbase API Server ```bash bun run server ``` This starts the Express server on `http://localhost:3001` ### Terminal 2: Start the Frontend ```bash bun run dev ``` This starts Vite on `http://localhost:8080` ## How It Works 1. **Frontend (Dashboard)**: When you click the checkmark ✓ to approve an item 2. **API Call**: The frontend calls `POST /api/add-to-cart` with item name and brand 3. **Browserbase**: Server creates a Browserbase session and automates: - Navigate to Amazon.com - Search for the item - Click first result - Add to cart 4. **Response**: Server returns success/failure to frontend ## Environment Variables The Browserbase credentials are hardcoded in `server/browserbase.js`: - API Key: `bb_live_s9hWIOg3unpQPZ4BXOLF-a0lY2E` - Project ID: `c3948bfc-711f-424d-9685-13fc8db362d7` ## API Endpoints ### POST /api/add-to-cart Adds an item to Amazon cart using Browserbase automation. **Request Body:** ```json { "itemName": "Dish Soap", "brand": "Dawn Ultra" } ``` **Response:** ```json { "success": true, "message": "Dish Soap added to cart" } ``` ## Demo Flow 1. Start camera detection 2. AI detects items (e.g., "Dish Soap - Dawn Ultra") 3. Items appear in Dashboard pending purchases 4. Click checkmark ✓ 5. **Amazon animation plays (4s)** - During this time, Browserbase is adding to real Amazon cart 6. **Visa animation plays (3s)** - Confirms the purchase 7. Stats update and item is marked as approved 8. Check your Amazon cart - item is actually there! 🛒 ## Troubleshooting - Make sure both servers are running (port 3001 and 8080) - Check browser console for API connection errors - Check server terminal for Browserbase session errors - Ensure Browserbase API key is valid and has credits ``` ### package.json ``` { "name": "vite_react_shadcn_ts", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "build:dev": "vite build --mode development", "lint": "eslint .", "preview": "vite preview", "test": "vitest run", "test:watch": "vitest", "server": "node server/browserbase.js" }, "dependencies": { "@browserbasehq/sdk": "^2.6.0", "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "^1.2.11", "@radix-ui/react-alert-dialog": "^1.1.14", "@radix-ui/react-aspect-ratio": "^1.1.7", "@radix-ui/react-avatar": "^1.1.10", "@radix-ui/react-checkbox": "^1.3.2", "@radix-ui/react-collapsible": "^1.1.11", "@radix-ui/react-context-menu": "^2.2.15", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-dropdown-menu": "^2.1.15", "@radix-ui/react-hover-card": "^1.1.14", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-menubar": "^1.1.15", "@radix-ui/react-navigation-menu": "^1.2.13", "@radix-ui/react-popover": "^1.1.14", "@radix-ui/react-progress": "^1.1.7", "@radix-ui/react-radio-group": "^1.3.7", "@radix-ui/react-scroll-area": "^1.2.9", "@radix-ui/react-select": "^2.2.5", "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slider": "^1.3.5", "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-switch": "^1.2.5", "@radix-ui/react-tabs": "^1.1.12", "@radix-ui/react-toast": "^1.2.14", "@radix-ui/react-toggle": "^1.1.9", "@radix-ui/react-toggle-group": "^1.1.10", "@radix-ui/react-tooltip": "^1.2.7", "@tanstack/react-query": "^5.83.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "cors": "^2.8.6", "date-fns": "^3.6.0", "dotenv": "^17.3.1", "embla-carousel-react": "^8.6.0", "express": "^5.2.1", "framer-motion": "^12.34.0", "input-otp": "^1.4.2", "lucide-react": "^0.462.0", "next-themes": "^0.3.0", "playwright-core": "^1.58.2", "react": "^18.3.1", "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.61.1", "react-resizable-panels": "^2.1.9", "react-router-dom": "^6.30.1", "recharts": "^2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.6.0", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "^3.25.76" }, "devDependencies": { "@eslint/js": "^9.32.0", "@tailwindcss/typography": "^0.5.16", "@testing-library/jest-dom": "^6.6.0", "@testing-library/react": "^16.0.0", "@types/cors": "^2.8.19", "@types/express": "^5.0.6", "@types/node": "^22.16.5", "@types/react": "^18.3.23", "@types/react-dom": "^18.3.7", "@vitejs/plugin-react-swc": "^3.11.0", "autoprefixer": "^10.4.21", "eslint": "^9.32.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^15.15.0", "jsdom": "^20.0.3", "lovable-tagger": "^1.1.13", "postcss": "^8.5.6", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", "typescript-eslint": "^8.38.0", "vite": "^5.4.19", "vitest": "^3.2.4" } } ``` ### src/main.tsx ```typescript import { createRoot } from "react-dom/client"; import App from "./App.tsx"; import "./index.css"; createRoot(document.getElementById("root")!).render(); ``` ### src/App.tsx ```typescript import { Toaster } from "@/components/ui/toaster"; import { Toaster as Sonner } from "@/components/ui/sonner"; import { TooltipProvider } from "@/components/ui/tooltip"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Index from "./pages/Index"; import Dashboard from "./pages/Dashboard"; import NotFound from "./pages/NotFound"; const queryClient = new QueryClient(); const App = () => ( } /> } /> } /> {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> ); export default App; ``` ### src/pages/Index.tsx ```typescript import Navbar from "@/components/landing/Navbar"; import Hero from "@/components/landing/Hero"; import HowItWorks from "@/components/landing/HowItWorks"; import Features from "@/components/landing/Features"; import FAQ from "@/components/landing/FAQ"; import Footer from "@/components/landing/Footer"; const Index = () => (
); export default Index; ``` ### postcss.config.js ```javascript export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; ``` ### vitest.config.ts ```typescript import { defineConfig } from "vitest/config"; import react from "@vitejs/plugin-react-swc"; import path from "path"; export default defineConfig({ plugins: [react()], test: { environment: "jsdom", globals: true, setupFiles: ["./src/test/setup.ts"], include: ["src/**/*.{test,spec}.{ts,tsx}"], }, resolve: { alias: { "@": path.resolve(__dirname, "./src") }, }, }); ``` ### vite.config.ts ```typescript import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; import path from "path"; import { componentTagger } from "lovable-tagger"; // https://vitejs.dev/config/ export default defineConfig(({ mode }) => ({ server: { host: "::", port: 8080, hmr: { overlay: false, }, }, plugins: [react(), mode === "development" && componentTagger()].filter(Boolean), resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, })); ``` ### eslint.config.js ```javascript import js from "@eslint/js"; import globals from "globals"; import reactHooks from "eslint-plugin-react-hooks"; import reactRefresh from "eslint-plugin-react-refresh"; import tseslint from "typescript-eslint"; export default tseslint.config( { ignores: ["dist"] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ["**/*.{ts,tsx}"], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { "react-hooks": reactHooks, "react-refresh": reactRefresh, }, rules: { ...reactHooks.configs.recommended.rules, "react-refresh/only-export-components": ["warn", { allowConstantExport: true }], "@typescript-eslint/no-unused-vars": "off", }, }, ); ``` ### index.html ```html Lovable App
``` [74 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]