Deal Agent Forge

AI-powered tech builder driven by Algolia Agent Studio from PCs to drones.

---

Overview

Deal Agent Forge is a modern web application that helps users build and configure custom tech projects including Gaming PCs, Professional Drones, and Solar Power Kits. The platform provides:

• 🔍 ProductLens - Explore and discover pre-configured builds
• 🤖 AI-Powered Recommendations - Intelligent component suggestions via Algolia Agent Studio
• 🎮 3D Visualization - Interactive 3D models for component exploration
• 💰 Best Price Discovery - Find the best deals across products

---

Features

• Secure Authentication: All features are protected by Clerk authentication.
• Animated Landing Page: Modern glassmorphism UI with interactive Ballpit background.
• Home Dashboard: Feature cards for ProductLens, Add Product, Report Issue, and Algolia Studio, plus quick stats.
• ProductLens: Curated builds for PC, Drone, and Solar Power Kit. Search and filter by tags.
• Modular Builders: Step-by-step component selection for PC, Drone, and Solar Power Kit, with dedicated detail pages for each part.
• Add Product: Authenticated users can submit new products via a form. Submissions are sent as Algolia-ready JSON via email, with confetti feedback on success.
• Report Issue: Quickly report broken data or URLs to help maintain data quality.
• AI Chatbot: Algolia Agent Studio chatbot is always available for recommendations, support, and best price discovery.
• 3D Visualization: Interactive 3D models for exploring components (Three.js, React Three Fiber).
• Best Price Discovery: Find the best deals across products, powered by Algolia search.
• Responsive Design: Modern, mobile-friendly UI with accent color and glassmorphism.

How It Works / User Flows

1. Landing & Authentication

   • Unauthenticated users see a modern landing page and can sign in or sign up.
   • After authentication, users access the Home dashboard.

2. Home Dashboard

   • Feature cards for ProductLens, Add Product, Report Issue, and Algolia Studio.
   • Quick stats for available builds and insights.

3. ProductLens

   • Browse curated builds for PC, Drone, and Solar Power Kit.
   • Search and filter builds by tags.

4. Modular Builders

   • Select and explore components for PC, Drone, or Solar Power Kit.
   • Each builder provides a grid of components, with navigation to detail pages.

5. Add Product

   • Authenticated users can submit new products via a form.
   • Submissions are sent as Algolia-ready JSON via email for verification.
   • Confetti animation on successful submission.

6. AI Chatbot

   • Algolia Agent Studio chatbot is available on all authenticated pages.
   • Provides recommendations, support, and best price discovery.

7. 3D Visualization

   • Explore interactive 3D models of components in supported sections.

8. Report Issue

   • Quickly report broken data or URLs to help maintain data quality.

---

Tech Stack

Technology	Purpose
React 19	Frontend framework
Vite (Rolldown)	Build tool & dev server
React Router DOM	Client-side routing
Clerk	Authentication
Algolia	Search & AI Agent
Three.js	3D visualization
React Three Fiber	React renderer for Three.js
TailwindCSS 4	Styling

---

📁 Project Structure

Deal-agent-forge/
├── public/
│   └── assets/          # 3D models and static assets
├── src/
│   ├── assets/          # Images and icons
│   ├── components/
│   │   ├── AnimatedBackground.jsx
│   │   ├── Ballpit.jsx
│   │   ├── ComponentLayout.jsx
│   │   ├── ModelViewer.jsx
│   │   ├── Navbar.jsx
│   │   └── ProductLensChatbot.jsx
│   ├── pages/
│   │   ├── LandingPage.jsx
│   │   ├── HomePage.jsx
│   │   ├── ProductLensPage.jsx
│   │   ├── PCBuildPage.jsx
│   │   ├── DroneBuildPage.jsx
│   │   ├── SolarPowerKitPage.jsx
│   │   ├── pc-build/       # PC component detail pages
│   │   ├── drone-builder/  # Drone component pages
│   │   └── solar-power-kit/ # Solar kit component pages
│   ├── App.jsx          # Main app with routing
│   ├── main.jsx         # Entry point
│   └── index.css        # Global styles
├── .env                 # Environment variables
├── index.html
├── package.json
└── vite.config.js

---

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd agent-forge

2. Install dependencies

   npm install

3. Configure environment variables

   Create a .env file in the root directory:

   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   VITE_ALGOLIA_APP_ID=your_algolia_app_id
   VITE_ALGOLIA_API_KEY=your_algolia_api_key
   VITE_PRODUCT_LENS_AGENT_ID=your_agent_id

4. Start the development server

   npm run dev

5. Open in browser

   http://localhost:5173
   

---

Environment Variables

Variable	Description	Required
VITE_CLERK_PUBLISHABLE_KEY	Clerk authentication key	✅
VITE_ALGOLIA_APP_ID	Algolia Application ID	✅
VITE_ALGOLIA_API_KEY	Algolia Search API Key	✅
VITE_PRODUCT_LENS_AGENT_ID	Algolia Agent Studio ID	✅

---

Acknowledgments

• Algolia - Search & AI Agent Studio
• Clerk - Authentication
• Three.js - 3D Graphics
• React Three Fiber - React renderer for Three.js

---

⚡ Built with ❤️ powered by Algolia Search & Algolia Agent Studio