ConnectX
Docs
Introduction

Documentation

Learn how to integrate ConnectX into your application.

Quickstart

Get up and running with ConnectX in minutes.

Get Started

  1. Create an Account

    Sign up at connect-x-peach.vercel.app and create your first project.

  2. Get Your API Keys

    Generate API keys from your project dashboard.

  3. Make Your First Request

    Start building your application with our comprehensive API.

This quickstart guide will help you create a simple e-commerce application using ConnectX. By the end of this guide, you'll have a working application that can list products, handle user authentication, and process orders.

Prerequisites

Before you begin, make sure you have:

  • Installed ConnectX (see the Installation guide)
  • Set up your API key
  • Basic knowledge of JavaScript and React

Create a New Project

Let's start by creating a new Next.js project:

Terminal
npx create-next-app my-connectx-store

Navigate to your project directory:

Terminal
cd my-connectx-store

Install Dependencies

Install the ConnectX client library:

Terminal
npm install @connectx/client

Configure API Key

Create a .env.local file in the root of your project and add your ConnectX API key:

.env.local
CONNECTX_API_KEY=your_api_key_here

Create API Client

Create a new file called lib/connectx.js to initialize the ConnectX client:

lib/connectx.js
import { ConnectX } from '@connectx/client';

const connectx = new ConnectX({
  apiKey: process.env.CONNECTX_API_KEY,
});

export default connectx;

Fetch Products

Create a new API route to fetch products from ConnectX. Create a file called app/api/products/route.js:

app/api/products/route.js
import { NextResponse } from 'next/server';
import connectx from '@/lib/connectx';

export async function GET() {
  try {
    const products = await connectx.products.list({
      limit: 10,
    });
    
    return NextResponse.json(products);
  } catch (error) {
    return NextResponse.json(
      { error: error.message },
      { status: 500 }
    );
  }
}

Display Products

Now, let's create a page to display the products. Update your app/page.js file:

app/page.js
'use client';

import { useEffect, useState } from 'react';

export default function Home() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchProducts() {
      try {
        const response = await fetch('/api/products');
        const data = await response.json();
        setProducts(data.data || []);
      } catch (error) {
        console.error('Error fetching products:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchProducts();
  }, []);

  if (loading) {
    return <div className="container mx-auto p-4">Loading products...</div>;
  }

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">Products</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {products.map((product) => (
          <div key={product.id} className="border rounded-lg p-4 shadow" >
            <h2 className="text-xl font-semibold">{product.name}</h2>
            <p className="text-gray-600">${product.price}</p>
            <p className="text-gray-700">{product.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
InstallationAuthentication