⚠️ Prerequisites

There is no prerequisits

Introduction

Real-time tire search is one of the most critical features in automotive e-commerce. Customers need to find the perfect tires for their vehicle quickly and effortlessly. The Vdim Tire API provides powerful endpoints that make building intelligent, fast tire search systems straightforward. This guide walks you through implementing a production-ready real-time tire search feature using the Vdim Tire API.

Prerequisites

  • Node.js v14 or higher
  • npm or yarn package manager
  • Active Vdim Tire API account with valid API credentials
  • Basic JavaScript knowledge (ES6+ syntax)
  • Understanding of REST APIs and HTTP requests
  • Familiarity with axios or fetch for HTTP calls
  • Basic knowledge of async/await patterns

API Overview: Key Endpoints

The Vdim Tire API provides five main endpoints for building tire search functionality:

1. Basic Data Endpoints

GET /search_allyear - Retrieve all available vehicle years

This endpoint returns a list of all years available in the tire database. Use this to populate year dropdowns in your search interface.

Response: Array of year values (e.g., [2015, 2016, 2017, ..., 2026])

GET /search_allwidth - Retrieve all available tire widths

Returns all tire widths in the system. Useful for building tire width filters and search suggestions.

Response: Array of width values (e.g., [165, 175, 185, 195, 205, 215, 225, 235, 245, 255, 265, 275, 285, 295, 305, 315, 325, 335])

2. Vehicle Data Endpoint

GET /by_vehicle/{query} - Get vehicle data by query type

This is the primary endpoint for retrieving vehicle information. The {query} parameter specifies what vehicle attribute you're searching for (make, model, year, or combination).

Query Parameters:

  • make: Vehicle manufacturer (e.g., "Toyota", "Ford", "Chevrolet")
  • model: Vehicle model (e.g., "Camry", "F-150", "Silverado")
  • year: Vehicle year (e.g., 2020, 2021, 2022)

Example Requests:

  • GET /by_vehicle/make=Toyota - Get all Toyota models
  • GET /by_vehicle/make=Toyota&model=Camry - Get all years for Toyota Camry
  • GET /by_vehicle/make=Toyota&model=Camry&year=2020 - Get specific Toyota Camry 2020 data

3. Tire Size Data Endpoint

GET /by_size/{query} - Get tire size data

Retrieve tire information based on tire size specifications. This endpoint handles tire size-based queries and returns compatible tire data.

Query Parameters:

  • size: Tire size in standard format (e.g., "225/45R17", "275/60R20")

Example Request:

  • GET /by_size/size=225/45R17 - Get all tires matching size 225/45R17

4. Tire Dimensions Endpoint

GET /tire_dimensions - Get tire dimensions for a specific vehicle

Retrieves the standard tire dimensions (width, aspect ratio, diameter) for a given vehicle, eliminating the need for users to know or look up their tire size.

Query Parameters:

  • make: Vehicle manufacturer
  • model: Vehicle model
  • year: Vehicle year

Example Request:

  • GET /tire_dimensions?make=Toyota&model=Camry&year=2020 - Get tire dimensions for 2020 Toyota Camry

5. Account Endpoint

GET /usage - Get API usage statistics

Monitor your API usage, including current requests, rate limits, and quota information. Essential for understanding consumption and managing costs.

Step 1: Setting Up Your Project

Create a new project and install dependencies:

mkdir tire-search-app
cd tire-search-app
npm init -y
npm install axios dotenv express cors
npm install --save-dev nodemon

Create a .env file:

TIRE_API_BASE_URL=https://tire.vdim.app/api/v1
TIRE_API_KEY=your_api_key_here
PORT=5000
NODE_ENV=development

Update package.json scripts:

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

Step 2: Creating the API Service Layer

Create services/tireApiService.js:

const axios = require('axios');
require('dotenv').config();

const apiClient = axios.create({
  baseURL: process.env.TIRE_API_BASE_URL,
  headers: {
    'Authorization': `Bearer ${process.env.TIRE_API_KEY}`,
    'Content-Type': 'application/json'
  }
});

class TireApiService {
  // Get all available vehicle years
  async getAllYears() {
    try {
      const response = await apiClient.get('/search_allyear');
      return response.data;
    } catch (error) {
      console.error('Error fetching years:', error.message);
      throw new Error('Unable to fetch available years');
    }
  }

  // Get all available tire widths
  async getAllWidths() {
    try {
      const response = await apiClient.get('/search_allwidth');
      return response.data;
    } catch (error) {
      console.error('Error fetching widths:', error.message);
      throw new Error('Unable to fetch available widths');
    }
  }

  // Get vehicle data by query parameters
  async getVehicleData(query) {
    try {
      const response = await apiClient.get('/by_vehicle/' + query);
      return response.data;
    } catch (error) {
      console.error('Error fetching vehicle data:', error.message);
      throw new Error('Unable to fetch vehicle data');
    }
  }

  // Get tires by size
  async getTiresBySize(size) {
    try {
      const response = await apiClient.get('/by_size/size=' + size);
      return response.data;
    } catch (error) {
      console.error('Error fetching tires by size:', error.message);
      throw new Error('Unable to fetch tires');
    }
  }

  // Get tire dimensions for a vehicle
  async getTireDimensions(make, model, year) {
    try {
      const response = await apiClient.get('/tire_dimensions', {
        params: { make, model, year }
      });
      return response.data;
    } catch (error) {
      console.error('Error fetching tire dimensions:', error.message);
      throw new Error('Unable to fetch tire dimensions');
    }
  }

  // Get API usage statistics
  async getUsageStats() {
    try {
      const response = await apiClient.get('/usage');
      return response.data;
    } catch (error) {
      console.error('Error fetching usage stats:', error.message);
      throw new Error('Unable to fetch usage statistics');
    }
  }
}

module.exports = new TireApiService();

Step 3: Building the Real-Time Search Backend

Create routes/search.js:

const express = require('express');
const router = express.Router();
const tireApiService = require('../services/tireApiService');

// Get all available years
router.get('/years', async (req, res) => {
  try {
    const years = await tireApiService.getAllYears();
    res.json({ success: true, data: years });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Get all available tire widths
router.get('/widths', async (req, res) => {
  try {
    const widths = await tireApiService.getAllWidths();
    res.json({ success: true, data: widths });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Search vehicles (real-time)
router.get('/vehicles', async (req, res) => {
  try {
    const { make, model, year } = req.query;
    
    // Build query string
    const queryParts = [];
    if (make) queryParts.push(`make=${make}`);
    if (model) queryParts.push(`model=${model}`);
    if (year) queryParts.push(`year=${year}`);
    const query = queryParts.join('&');
    
    const vehicleData = await tireApiService.getVehicleData(query);
    res.json({ success: true, data: vehicleData });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Search tires by size
router.get('/tires', async (req, res) => {
  try {
    const { size } = req.query;
    if (!size) {
      return res.status(400).json({ error: 'Tire size is required' });
    }
    
    const tires = await tireApiService.getTiresBySize(size);
    res.json({ success: true, data: tires });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Get tire dimensions for vehicle
router.get('/dimensions', async (req, res) => {
  try {
    const { make, model, year } = req.query;
    if (!make || !model || !year) {
      return res.status(400).json({ error: 'Make, model, and year are required' });
    }
    
    const dimensions = await tireApiService.getTireDimensions(make, model, year);
    res.json({ success: true, data: dimensions });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

module.exports = router;

Step 4: Creating the Express Server

Create server.js:

const express = require('express');
const cors = require('cors');
require('dotenv').config();
const searchRoutes = require('./routes/search');

const app = express();

// Middleware
app.use(cors());
app.use(express.json());

// Routes
app.use('/api/search', searchRoutes);

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'ok', message: 'Tire search API is running' });
});

// Error handling
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ error: 'Internal server error' });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Tire search server running on port ${PORT}`);
});

Step 5: Implementing Real-Time Search in Frontend

Create public/search.js:

class TireSearch {
  constructor() {
    this.apiBaseUrl = 'http://localhost:5000/api/search';
    this.cache = new Map();
  }

  // Cache results to reduce API calls
  async getCached(key, fetchFn) {
    if (this.cache.has(key)) {
      return this.cache.get(key);
    }
    const result = await fetchFn();
    this.cache.set(key, result);
    return result;
  }

  // Debounce search to prevent excessive API calls
  debounce(func, wait) {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => func(...args), wait);
    };
  }

  // Search vehicles in real-time
  async searchVehicles(make, model, year) {
    try {
      let url = `${this.apiBaseUrl}/vehicles?`;
      if (make) url += `make=${encodeURIComponent(make)}&`;
      if (model) url += `model=${encodeURIComponent(model)}&`;
      if (year) url += `year=${year}`;
      
      const response = await fetch(url.replace(/&$/, ''));
      return await response.json();
    } catch (error) {
      console.error('Search error:', error);
      return { error: 'Search failed' };
    }
  }

  // Search tires by size
  async searchTiresBySize(size) {
    try {
      const response = await fetch(`${this.apiBaseUrl}/tires?size=${encodeURIComponent(size)}`);
      return await response.json();
    } catch (error) {
      console.error('Search error:', error);
      return { error: 'Search failed' };
    }
  }
}

// Initialize on page load
const tireSearch = new TireSearch();

Best Practices for Real-Time Search

1. Implement Debouncing

Prevent excessive API calls by debouncing user input. Wait 300-500ms after the user stops typing before making a request.

2. Use Caching Strategically

Cache static data (years, widths) for the session. Cache search results with expiration (5-15 minutes) to balance freshness with performance.

3. Rate Limiting

Monitor your API usage via the /usage endpoint. Implement client-side rate limiting to stay within quota.

4. Error Handling

Always provide fallback UI when API calls fail. Show friendly error messages: "Unable to fetch results. Please try again."

5. Loading States

Show loading indicators during searches. Disable submit buttons while requests are in flight to prevent duplicate submissions.

Performance Optimization

Lazy Load Data: Fetch years and widths only when the page loads, not on every search.

Batch Requests: If searching multiple attributes, combine queries when possible.

Client-Side Filtering: Cache results and filter locally before making new API calls.

CDN Caching: Cache API responses using HTTP headers (Cache-Control, ETag) where appropriate.

Monitoring & Debugging

Regularly check your API usage with GET /usage. Monitor:

  • Requests count and rate
  • Quota utilization
  • Error rates
  • Response times

Use browser DevTools Network tab to inspect API responses and identify slow requests.

Common Issues & Solutions

Issue: "API Key Invalid" Error

Solution: Verify your API key in .env file. Ensure it's passed in Authorization header with "Bearer" prefix.

Issue: Slow Response Times

Solution: Implement caching. Use debouncing. Check rate limits via /usage endpoint.

Issue: No Results for Vehicle

Solution: Ensure make/model/year match exactly what API returns. Some vehicles may not be in database.

Conclusion

The Vdim Tire API provides powerful endpoints for building real-time tire search functionality. By following this guide, you can implement a fast, responsive search experience that helps customers find the right tires instantly. Start with the basic endpoints, implement caching and debouncing for performance, and monitor your usage to stay within quota.

Ready to build? Clone the sample code, add your API key, and launch a real-time tire search that will delight your customers.

Tags

API JavaScript Search Real-time