Gadget SaaS API & SDK Architecture

# .env.local
PIXAHUNT_API_URL="https://pixahunt.com/api/v1/gadgets"
PIXAHUNT_API_KEY="pk_gadget_your_api_key_here"
PIXAHUNT_CLIENT_DOMAIN="yourstore.com"

2. Next.js Server Route Handler (app/api/gadget/[model]/route.ts)

Proxies requests through your Next.js server to prevent key leaks and enforce your registered domain.

import { NextResponse } from 'next/server';

export async function GET(
  request: Request,
  { params }: { params: { model: string } }
) {
  try {
    const res = await fetch(
      `${process.env.PIXAHUNT_API_URL}/product?model=${encodeURIComponent(params.model)}`,
      {
        headers: {
          'X-API-KEY': process.env.PIXAHUNT_API_KEY!,
          'X-CLIENT-DOMAIN': process.env.PIXAHUNT_CLIENT_DOMAIN!,
        },
        next: { revalidate: 86400 }, // Cache on Next.js edge for 24 hours
      }
    );

    const payload = await res.json();
    if (payload.status !== 'success') {
      return NextResponse.json({ error: payload.message }, { status: 404 });
    }

    return NextResponse.json(payload.data);
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

3. Hybrid SSR Product Page with Category SVG (app/products/[slug]/page.tsx)

Merges your local database price & inventory with Pixahunt's master specs and default vector category SVG.

import Image from 'next/image';
import { notFound } from 'next/navigation';

export default async function ProductDetailPage({ params }: { params: { slug: string } }) {
  // 1. Fetch your local store data (Price, Stock) from Prisma / MySQL / Drizzle
  const localProduct = {
    model_name: 'Corsair Vengeance RGB DDR5',
    client_price: 129.99,
    stock_count: 18,
    custom_badge: 'Flash Sale'
  };

  // 2. Fetch master technical specs from Pixahunt Gateway (Server-to-Server)
  const res = await fetch(
    `${process.env.PIXAHUNT_API_URL}/product?model=${encodeURIComponent(localProduct.model_name)}`,
    {
      headers: {
        'X-API-KEY': process.env.PIXAHUNT_API_KEY!,
        'X-CLIENT-DOMAIN': process.env.PIXAHUNT_CLIENT_DOMAIN!,
      },
      next: { revalidate: 86400 } // 24h ISR Cache
    }
  );

  const json = await res.json();
  if (json.status !== 'success') return notFound();
  const gadget = json.data;

  return (
    <div className="max-w-6xl mx-auto px-4 py-12 text-white">
      {/* Category with Official Vector SVG */}
      <div className="flex items-center gap-2 text-sm text-blue-400 mb-4">
        {gadget.category?.icon_svg_url && (
          <img src={gadget.category.icon_svg_url} alt="" className="w-5 h-5 object-contain" />
        )}
        <span>{gadget.category?.name}</span>
        <span className="text-gray-600">/</span>
        <span className="text-gray-400">{gadget.brand?.name}</span>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
        {/* Gallery / Thumbnail */}
        <div className="bg-gray-900/60 p-6 rounded-3xl border border-gray-800">
          <img src={gadget.thumbnail_url} alt={gadget.model_name} className="w-full h-80 object-contain mx-auto" />
        </div>

        {/* Pricing & Actions */}
        <div className="space-y-6">
          <h1 className="text-3xl font-extrabold text-white">{gadget.official_title}</h1>

          <div className="flex items-baseline gap-4">
            <span className="text-4xl font-black text-orange-500">${localProduct.client_price}</span>
            <span className="text-xs px-2.5 py-1 rounded-full bg-emerald-500/20 text-emerald-400 font-semibold">
              {localProduct.stock_count > 0 ? `In Stock (${localProduct.stock_count})` : 'Out of Stock'}
            </span>
          </div>

          {/* Key Highlights */}
          <div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-2">
            <h3 className="text-xs font-bold uppercase tracking-wider text-orange-400">Key Features</h3>
            <ul className="space-y-1.5 text-sm text-gray-300">
              {gadget.highlights?.map((h: string, i: number) => (
                <li key={i} className="flex items-center gap-2">
                  <span className="text-emerald-400 font-bold">&#10003;</span> {h}
                </li>
              ))}
            </ul>
          </div>

          <button className="w-full py-4 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white font-bold text-base transition shadow-xl shadow-orange-500/25">
            Add to Shopping Cart
          </button>
        </div>
      </div>

      {/* Specifications Matrix */}
      <div className="mt-16 space-y-8">
        <h2 className="text-2xl font-bold text-white border-b border-gray-800 pb-4">Full Technical Specifications</h2>
        {Object.entries(gadget.specs || {}).map(([section, items]: [string, any]) => (
          <div key={section} className="bg-gray-900/40 border border-gray-800 rounded-2xl overflow-hidden">
            <div className="bg-blue-950/30 px-5 py-3 text-xs font-bold uppercase tracking-wider text-blue-400 border-b border-gray-800">
              {section}
            </div>
            <table className="w-full text-sm">
              <tbody className="divide-y divide-gray-800">
                {Object.entries(items).map(([specKey, specVal]: [string, any]) => (
                  <tr key={specKey} className="hover:bg-white/5">
                    <td className="px-5 py-3 text-gray-400 w-1/3">{specKey}</td>
                    <td className="px-5 py-3 text-white font-medium">{String(specVal)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
      </div>
    </div>
  );
}

import 'dart:convert';
import 'package:http/http.dart' as http;

class GadgetApiService {
  static const String baseUrl = 'https://pixahunt.com/api/v1/gadgets';
  static const String apiKey = 'pk_gadget_your_client_key_here';
  static const String clientDomain = 'your-mobile-app.com';

  static Map<String, String> get _headers => {
    'X-API-KEY': apiKey,
    'X-CLIENT-DOMAIN': clientDomain,
    'Accept': 'application/json',
  };

  /// Fetch unified product specifications
  static Future<Map<String, dynamic>?> getProduct(String modelName) async {
    final uri = Uri.parse('$baseUrl/product?model=${Uri.encodeComponent(modelName)}');
    final response = await http.get(uri, headers: _headers);

    if (response.statusCode == 200) {
      final json = jsonDecode(response.body);
      return json['data'];
    }
    return null;
  }

  /// Fetch all categories with vector SVG URLs
  static Future<List<dynamic>> getCategories() async {
    final uri = Uri.parse('$baseUrl/categories');
    final response = await http.get(uri, headers: _headers);

    if (response.statusCode == 200) {
      final json = jsonDecode(response.body);
      return json['data'] ?? [];
    }
    return [];
  }
}

2. Flutter Category Widget with Official Vector SVG (lib/widgets/category_icon.dart)

Renders the official vector SVG using flutter_svg with fallback to local assets if overridden.

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class GadgetCategoryChip extends StatelessWidget {
  final String categoryName;
  final String? iconSvgUrl;
  final String? localOverrideSvg;

  const GadgetCategoryChip({
    Key? key,
    required this.categoryName,
    this.iconSvgUrl,
    this.localOverrideSvg,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 1. If client store overrides the SVG locally, use it
    if (localOverrideSvg != null && localOverrideSvg!.isNotEmpty) {
      return Chip(
        avatar: SvgPicture.asset(localOverrideSvg!, width: 18, height: 18),
        label: Text(categoryName),
      );
    }

    // 2. Otherwise default to Pixahunt Bunny CDN Vector SVG
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration: BoxDecoration(
        color: const Color(0xFF151A7B).withOpacity(0.2),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFF223BC9).withOpacity(0.3)),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          if (iconSvgUrl != null)
            SvgPicture.network(
              iconSvgUrl!,
              width: 18,
              height: 18,
              placeholderBuilder: (_) => const SizedBox(width: 18, height: 18),
            ),
          const SizedBox(width: 8),
          Text(
            categoryName,
            style: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold),
          ),
        ],
      ),
    );
  }
}

React Native / Expo Custom Hook (useGadget.ts)

Leverages react-native-svg to render sharp category icons on mobile screens.

import { useState, useEffect } from 'react';

const API_BASE = 'https://pixahunt.com/api/v1/gadgets';
const API_KEY = 'pk_gadget_your_key_here';
const CLIENT_DOMAIN = 'yourapp.com';

export function useGadgetProduct(modelName: string) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let isMounted = true;
    setLoading(true);

    fetch(`${API_BASE}/product?model=${encodeURIComponent(modelName)}`, {
      headers: {
        'X-API-KEY': API_KEY,
        'X-CLIENT-DOMAIN': CLIENT_DOMAIN,
      },
    })
      .then((res) => res.json())
      .then((json) => {
        if (isMounted) {
          if (json.status === 'success') setData(json.data);
          else setError(json.message);
          setLoading(false);
        }
      })
      .catch((err) => {
        if (isMounted) {
          setError(err.message);
          setLoading(false);
        }
      });

    return () => { isMounted = false; };
  }, [modelName]);

  return { data, loading, error };
}

Python / FastAPI Integration Script

import requests

PIXAHUNT_API_URL = "https://pixahunt.com/api/v1/gadgets"
API_KEY = "pk_gadget_your_api_key_here"
CLIENT_DOMAIN = "yourserver.com"

headers = {
    "X-API-KEY": API_KEY,
    "X-CLIENT-DOMAIN": CLIENT_DOMAIN,
}

def get_gadget_specs(model: str):
    response = requests.get(
        f"{PIXAHUNT_API_URL}/product",
        params={"model": model},
        headers=headers,
        timeout=5.0
    )
    if response.status_code == 200:
        return response.json().get("data")
    return None

# Example invocation
if __name__ == "__main__":
    specs = get_gadget_specs("Corsair Vengeance RGB DDR5")
    print(f"Product: {specs['official_title']}")
    print(f"Category SVG: {specs['category']['icon_svg_url']}")

cURL Direct Terminal Execution

curl -X GET "https://pixahunt.com/api/v1/gadgets/product?model=i3-550" \
  -H "X-API-KEY: pk_gadget_demo_test_key_pixahunt_saas_2026" \
  -H "X-CLIENT-DOMAIN: localhost"

curl -X GET "https://pixahunt.com/api/v1/gadgets/product/images?model=i3-550" \
  -H "X-API-KEY: pk_gadget_demo_test_key_pixahunt_saas_2026" \
  -H "X-CLIENT-DOMAIN: localhost"

curl -X GET "https://pixahunt.com/api/v1/gadgets/products?limit=10" \
  -H "X-API-KEY: pk_gadget_demo_test_key_pixahunt_saas_2026" \
  -H "X-CLIENT-DOMAIN: localhost"

curl -X GET "https://pixahunt.com/api/v1/gadgets/categories" \
  -H "X-API-KEY: pk_gadget_demo_test_key_pixahunt_saas_2026" \
  -H "X-CLIENT-DOMAIN: localhost"

curl -X GET "https://pixahunt.com/api/v1/gadgets/search?q=Intel&limit=10" \
  -H "X-API-KEY: pk_gadget_demo_test_key_pixahunt_saas_2026" \
  -H "X-CLIENT-DOMAIN: localhost"