Skip to main content

​
Frontend Architecture

The JARVIS frontend is a Next.js 16 application featuring a cinematic corkboard-style intelligence dashboard with real-time updates. Built with React 19, Convex for real-time data, and Framer Motion for animations.

​
Tech Stack

  • Framework: Next.js 16.1.6 with React 19.2.3
  • Real-time Database: Convex 1.32.0 for live subscriptions
  • Animation: Framer Motion 12.34.3 for paper spawn effects and transitions
  • Styling: Tailwind CSS 4 with custom cork texture backgrounds
  • Gestures: @use-gesture/react for drag-and-drop
  • Icons: Lucide React for UI icons

​
Project Structure

frontend/
├── src/
│   ├── app/
│   │   ├── page.tsx                  # Main page (IntelBoard)
│   │   ├── layout.tsx               # Root layout with Convex provider
│   │   ├── ConvexClientProvider.tsx # Convex client setup
│   │   └── globals.css              # Global styles
│   ├── components/
│   │   ├── IntelBoard.tsx           # Main intelligence board (2800+ lines)
│   │   ├── Corkboard.tsx            # Background cork texture
│   │   ├── PersonCard.tsx           # Individual person paper cards
│   │   ├── DossierView.tsx          # Zoomed dossier detail view
│   │   ├── ConnectionLine.tsx       # Red string connections
│   │   ├── Sidebar.tsx              # People list and activity feed
│   │   ├── TopBar.tsx               # Header with search and controls
│   │   ├── StatusBar.tsx            # Bottom status indicators
│   │   ├── CameraFeed.tsx           # Live glasses feed viewer
│   │   └── BrowserSessionViewer.tsx # Agent session debugging
│   ├── lib/
│   │   ├── types.ts                 # TypeScript interfaces
│   │   ├── useFrameCapture.ts       # Camera capture hook
│   │   ├── useResearchStream.ts     # SSE stream hook
│   │   └── useVoiceCommands.ts      # Voice control
│   └── hooks/                       # Custom React hooks
├── convex/
│   ├── schema.ts                    # Convex database schema
│   ├── persons.ts                   # Person queries/mutations
│   ├── captures.ts                  # Capture operations
│   ├── intel.ts                     # Intel fragment operations
│   └── connections.ts               # Relationship operations
└── public/                          # Static assets

​
Core Components

IntelBoard

Main intelligence dashboard with animated paper documents

Real-Time Updates

Convex subscriptions for live data streaming

Dossier View

Detailed person intelligence view

Convex Schema

Real-time database structure

​
Key Features

​
COD-Style Corkboard UI

The IntelBoard component (IntelBoard.tsx) is the centerpiece: 
const BW = 1100, BH = 680;  // Board dimensions
const PAPERS = [
  { bg: "linear-gradient(155deg,#f5e6d0,#ede0cc 40%,#e8d6be)", bd: "#c9b89a" },
  { bg: "linear-gradient(155deg,#f0f2f4,#e8eaed 40%,#eef0f2)", bd: "#c8ccd2" },
  { bg: "linear-gradient(155deg,#e8d5a3,#e0cc98 40%,#d9c48e)", bd: "#bfad7a" },
];

​
Real-Time Data Integration

Convex provides instant updates without WebSocket setup: 
import { useQuery } from "convex/react";
import { api } from "../../convex/_generated/api";

// Real-time person list
const persons = useQuery(api.persons.listAll);

// Real-time intel fragments for active person
const intel = useQuery(api.intel.byPerson, { personId: activePerson?.id });

// Real-time connections
const connections = useQuery(api.connections.all);

​
Animation System

Framer Motion powers all animations: 
import { motion, AnimatePresence } from "framer-motion";

<AnimatePresence>
  {sources.map(source => (
    <motion.div
      key={source.id}
      initial={{ opacity: 0, scale: 0.8, rotate: -5 }}
      animate={{ opacity: 1, scale: 1, rotate: 0 }}
      exit={{ opacity: 0, scale: 0.8 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
    >
      {/* Paper document */}
    </motion.div>
  ))}
</AnimatePresence>

​
Development Workflow

1

Install Dependencies

cd frontend
npm install
2

Configure Convex

npx convex dev
This creates .env.local with NEXT_PUBLIC_CONVEX_URL
3

Start Dev Server

npm run dev
Opens on http://localhost:3000

​
Environment Variables

# .env.local
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

​
Performance Optimizations

  • Lazy loading: Components load on-demand
  • React 19 Compiler: Automatic memoization
  • Framer Motion GPU acceleration: Hardware-accelerated transforms
  • Convex subscriptions: Only re-render when data changes
  • Tailwind CSS 4: Optimized CSS output
The IntelBoard component is 2800+ lines because it handles all UI state, animations, and real-time subscriptions in a single coordinated view. This monolithic approach simplifies state management for the complex corkboard interactions.

​
Next Steps

Corkboard UI

Deep dive into the intelligence board implementation

Real-Time Updates

Learn how Convex subscriptions work

Build docs developers (and LLMs) love

Get started for freeTalk to us