AxisX v3 — TypeScript Edition 🚀

The industry's most comprehensive camera cross-reference tool, now rebuilt from the ground up with TypeScript.

What's New in v3

Feature	v2 (JS)	v3 (TS)
Type Safety	❌ None	✅ 100% typed
Voice Search	❌ No	✅ Web Speech API
URL Accuracy	🟡 Hit or miss	✅ Verified URL table
Search Speed	Good	✅ Indexed lookups
Error Prevention	🟡 Runtime	✅ Compile-time
AI Coding	🟡 Guesswork	✅ Precise context

Quick Start

# Install dependencies
npm install

# Start dev server
npm run dev

# Run tests
npm test

# Build for production
npm run build

# Deploy to Vercel
npm run deploy

Project Structure

axisx-v3/
├── src/
│   ├── types/              # TypeScript type definitions
│   │   └── index.ts        # All types in one file
│   │
│   ├── core/               # Pure business logic (no React)
│   │   ├── search/         # Search engine
│   │   │   ├── engine.ts   # Main search orchestrator
│   │   │   ├── fuzzy.ts    # Levenshtein + scoring
│   │   │   └── queryParser.ts
│   │   │
│   │   ├── url/            # URL resolution
│   │   │   ├── resolver.ts # URL resolution cascade
│   │   │   ├── verified.ts # Known-good URLs
│   │   │   └── aliases.ts  # Typo corrections
│   │   │
│   │   ├── msrp/           # Pricing lookup
│   │   │   └── lookup.ts
│   │   │
│   │   └── voice/          # Voice input
│   │       └── recognition.ts
│   │
│   ├── hooks/              # React hooks
│   │   ├── useSearch.ts
│   │   ├── useVoice.ts
│   │   └── useCart.ts
│   │
│   ├── components/         # React UI components
│   │   └── (port your UI here)
│   │
│   ├── data/               # Static data (bundled at build)
│   │   ├── crossref_data.json
│   │   └── axis_msrp_data.json
│   │
│   ├── App.tsx             # Main application
│   ├── main.tsx            # Entry point
│   └── theme.ts            # Axis branding
│
├── tests/                  # Test files
│   ├── search.test.ts
│   └── url.test.ts
│
├── tsconfig.json           # TypeScript config
├── vite.config.ts          # Vite config
└── package.json

Architecture

The Type System

Every function has typed inputs and outputs. No more guessing.

// Search returns a fully typed response
const result: SearchResponse = engine.search("DS-2CD2143G2-I");

result.queryType    // 'competitor' | 'legacy' | 'axis-model' | ...
result.confidence   // 'high' | 'medium' | 'low' | 'none'
result.results      // SearchResult[] - fully typed

URL Resolution Cascade

URLs are resolved with 100% accuracy through a 4-step cascade:

1. Verified URLs - Hardcoded known-good URLs
2. Model Aliases - Typo/variant corrections
3. Base Model - Strip suffixes and try again
4. Search Fallback - axis.com/products?q=

const { url, confidence, isDiscontinued } = resolver.resolve("P3265-LVE");
// confidence: 'verified' | 'alias' | 'generated' | 'search-fallback'

Search Engine

Intelligent routing based on query type:

// Competitor model → replacement search
engine.search("DS-2CD2143G2-I")

// Axis model → reverse lookup (what does it replace?)
engine.search("P3265-LVE")

// Manufacturer → all models from that vendor
engine.search("Hikvision")

// Legacy Axis → upgrade path
engine.search("P3364-LVE")

Voice Input

Built-in Web Speech API integration:

const { isListening, toggle } = useVoice({
  onResult: (text) => setQuery(text),
});

Migration from v2

1. Copy Your Data Files

Replace the sample data with your real files:

cp path/to/crossref_data.json src/data/
cp path/to/axis_msrp_data.json src/data/

2. Port Your UI Components

The App.tsx includes stubs for all views. Port your existing UI:

// Your existing ResultCard, CartView, etc.
// Just add TypeScript annotations to props

3. Build Verified URL Table

Populate src/core/url/verified.ts with known-good URLs:

export const VERIFIED_URLS: Record<string, string> = {
  'P3265-LVE': 'https://www.axis.com/products/axis-p3265-lve',
  // Add more...
};

Testing

# Run all tests
npm test

# Watch mode
npm test -- --watch

# Coverage report
npm run test:coverage

# Visual UI
npm run test:ui

Building for Production

# Build
npm run build

# Preview build locally
npm run preview

# Deploy to Vercel
npm run deploy

TypeScript Tips

Import Types

import type { SearchResult, CartItem, CompetitorMapping } from '@/types';

Path Aliases

Clean imports with @/ prefix:

import { createSearchEngine } from '@/core/search';
import { useCart } from '@/hooks';
import { theme } from '@/theme';

Working with AI Coding Tools

TypeScript makes Claude Code, Copilot, and Cursor significantly more accurate:

// Claude knows exactly what this function needs
function filterHighConfidence(results: SearchResult[]): SearchResult[] {
  return results.filter(r => r.score >= 90);
}

Contributing

1. All code must be TypeScript (no .js files in src/)
2. Run npm run typecheck before committing
3. Add tests for new features
4. Update types when changing data structures

License

MIT © Axis Communications Partners

---

Built with 💛 for the Axis family