How to Integrate Bolt.new with AliExpress Affiliate API

1// app/api/aliexpress/route.ts
2import { NextResponse } from 'next/server';
3import crypto from 'crypto';
4
5const APP_KEY = process.env.ALIEXPRESS_APP_KEY || '';
6const APP_SECRET = process.env.ALIEXPRESS_APP_SECRET || '';
7const API_BASE = 'https://api-sg.aliexpress.com/sync';
8const TRACKING_ID = process.env.ALIEXPRESS_TRACKING_ID || '';
9
10function generateSign(params: Record<string, string>): string {
11  // Step 1: Sort parameters alphabetically by key
12  const sortedKeys = Object.keys(params).sort();
13
14  // Step 2: Concatenate as key+value (no separators, no encoding)
15  const paramString = sortedKeys.map(key => `${key}${params[key]}`).join('');
16
17  // Step 3: Wrap with App Secret and compute MD5
18  const stringToSign = `${APP_SECRET}${paramString}${APP_SECRET}`;
19
20  return crypto
21    .createHash('md5')
22    .update(stringToSign, 'utf8')
23    .digest('hex')
24    .toUpperCase();
25}
26
27export async function GET(request: Request) {
28  const { searchParams } = new URL(request.url);
29  const action = searchParams.get('action');
30
31  if (!APP_KEY || !APP_SECRET) {
32    return NextResponse.json(
33      { error: 'AliExpress API credentials not configured' },
34      { status: 500 }
35    );
36  }
37
38  if (action === 'search') {
39    const query = searchParams.get('q') || '';
40    const pageNo = searchParams.get('page') || '1';
41    const pageSize = searchParams.get('size') || '20';
42    const minSalePrice = searchParams.get('minPrice') || '';
43    const maxSalePrice = searchParams.get('maxPrice') || '';
44    const sort = searchParams.get('sort') || 'SALE_PRICE_ASC';
45    const trackingId = TRACKING_ID || 'default';
46
47    const timestamp = String(Date.now());
48
49    const params: Record<string, string> = {
50      app_key: APP_KEY,
51      method: 'aliexpress.affiliate.product.query',
52      timestamp,
53      sign_method: 'md5',
54      v: '2.0',
55      format: 'json',
56      // API-specific params:
57      keywords: query,
58      page_no: pageNo,
59      page_size: pageSize,
60      tracking_id: trackingId,
61      sort,
62      target_currency: 'USD',
63      target_language: 'EN',
64      ...(minSalePrice && { min_sale_price: minSalePrice }),
65      ...(maxSalePrice && { max_sale_price: maxSalePrice }),
66    };
67
68    params.sign = generateSign(params);
69
70    const queryString = new URLSearchParams(params).toString();
71    const response = await fetch(`${API_BASE}?${queryString}`);
72
73    if (!response.ok) {
74      return NextResponse.json({ error: `AliExpress API error: ${response.status}` }, { status: 502 });
75    }
76
77    const data = await response.json();
78    const result = data?.aliexpress_affiliate_product_query_response?.resp_result;
79
80    if (result?.resp_code !== 200) {
81      return NextResponse.json(
82        { error: result?.resp_msg || 'API returned error' },
83        { status: 400 }
84      );
85    }
86
87    const products = result?.result?.products?.product || [];
88
89    const formatted = products.map((p: {
90      product_id: string;
91      product_title: string;
92      sale_price: string;
93      original_price: string;
94      product_main_image_url: string;
95      evaluate_rate: string;
96      lastest_volume: number;
97      promotion_link: string;
98      ship_to_days: string;
99    }) => ({
100      id: p.product_id,
101      title: p.product_title,
102      price: parseFloat(p.sale_price),
103      originalPrice: parseFloat(p.original_price),
104      imageUrl: p.product_main_image_url,
105      rating: p.evaluate_rate,
106      orders: p.lastest_volume,
107      affiliateUrl: p.promotion_link, // Contains your tracking ID
108      shippingDays: p.ship_to_days,
109    }));
110
111    return NextResponse.json({
112      products: formatted,
113      total: result?.result?.total_record_count || 0,
114    });
115  }
116
117  return NextResponse.json({ error: 'Unknown action' }, { status: 400 });
118}

1# .env
2ALIEXPRESS_APP_KEY=your-app-key-here
3ALIEXPRESS_APP_SECRET=your-app-secret-here
4ALIEXPRESS_TRACKING_ID=your-tracking-id-here

1// components/AliExpressGrid.tsx
2import { useState } from 'react';
3
4interface AliProduct {
5  id: string;
6  title: string;
7  price: number;
8  originalPrice: number;
9  imageUrl: string;
10  rating: string;
11  orders: number;
12  affiliateUrl: string;
13  shippingDays: string;
14}
15
16export function AliExpressGrid() {
17  const [query, setQuery] = useState('');
18  const [sellingPrice, setSellingPrice] = useState('');
19  const [products, setProducts] = useState<AliProduct[]>([]);
20  const [total, setTotal] = useState(0);
21  const [loading, setLoading] = useState(false);
22
23  const search = async () => {
24    if (!query.trim()) return;
25    setLoading(true);
26    const res = await fetch(`/api/aliexpress?action=search&q=${encodeURIComponent(query)}&size=20`);
27    const data = await res.json();
28    setProducts(data.products || []);
29    setTotal(data.total || 0);
30    setLoading(false);
31  };
32
33  const discount = (sale: number, orig: number) =>
34    orig > sale ? Math.round((1 - sale / orig) * 100) : 0;
35
36  const formatOrders = (n: number) =>
37    n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(n);
38
39  const margin = (cost: number) => {
40    const sell = parseFloat(sellingPrice);
41    if (!sell || sell <= cost) return null;
42    const profit = sell - cost;
43    const pct = ((profit / sell) * 100).toFixed(0);
44    return { profit: profit.toFixed(2), pct };
45  };
46
47  return (
48    <div className="p-4">
49      <div className="flex gap-2 mb-4">
50        <input value={query} onChange={e => setQuery(e.target.value)}
51          onKeyDown={e => e.key === 'Enter' && search()}
52          placeholder="Search AliExpress products..."
53          className="flex-1 border rounded px-3 py-2" />
54        <input value={sellingPrice} onChange={e => setSellingPrice(e.target.value)}
55          placeholder="Your selling price ($)"
56          type="number" step="0.01"
57          className="w-44 border rounded px-3 py-2" />
58        <button onClick={search} className="bg-orange-500 text-white px-4 py-2 rounded">
59          Search
60        </button>
61      </div>
62      {total > 0 && <p className="text-sm text-gray-500 mb-3">{total.toLocaleString()} products found</p>}
63      {loading && <div className="text-center py-12 text-gray-500">Searching AliExpress...</div>}
64      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
65        {products.map(p => {
66          const d = discount(p.price, p.originalPrice);
67          const m = margin(p.price);
68          return (
69            <div key={p.id} className="border rounded-lg p-3 flex flex-col">
70              <div className="relative">
71                <img src={p.imageUrl} alt={p.title} className="w-full h-40 object-contain" />
72                {d > 0 && (
73                  <span className="absolute top-1 right-1 bg-red-500 text-white text-xs px-1 rounded">
74                    -{d}%
75                  </span>
76                )}
77              </div>
78              <p className="text-sm font-medium line-clamp-2 mt-2 flex-1">{p.title}</p>
79              <div className="mt-2">
80                <span className="text-lg font-bold text-orange-600">${p.price.toFixed(2)}</span>
81                {p.originalPrice > p.price && (
82                  <span className="text-xs text-gray-400 line-through ml-1">${p.originalPrice.toFixed(2)}</span>
83                )}
84              </div>
85              <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
86                <span>⭐ {p.rating}</span>
87                <span>{formatOrders(p.orders)} orders</span>
88              </div>
89              {p.shippingDays && (
90                <p className="text-xs text-gray-400 mt-1">Ships in ~{p.shippingDays} days</p>
91              )}
92              {m && (
93                <div className="mt-2 p-2 bg-green-50 rounded text-xs">
94                  <span className="font-medium text-green-700">Margin: ${m.profit} ({m.pct}%)</span>
95                </div>
96              )}
97              <a href={p.affiliateUrl} target="_blank" rel="noopener noreferrer"
98                className="mt-2 block text-center bg-orange-100 text-orange-700 text-sm py-1.5 rounded hover:bg-orange-200">
99                Source on AliExpress
100              </a>
101            </div>
102          );
103        })}
104      </div>
105    </div>
106  );
107}

1// Simple caching layer for the API route
2const searchCache = new Map<string, { data: unknown; expires: number }>();
3const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
4
5export async function GET(request: Request) {
6  const cacheKey = request.url;
7  const cached = searchCache.get(cacheKey);
8  if (cached && cached.expires > Date.now()) {
9    return NextResponse.json(cached.data);
10  }
11  // ... run the API call ...
12  searchCache.set(cacheKey, { data: result, expires: Date.now() + CACHE_TTL });
13  return NextResponse.json(result);
14}