Skip to main content

Demo Portal

A ready-to-use car demo portal built with Next.js and CarAPIS integration.

Overview​

A lightweight, pre-configured application designed for quick deployment and demonstration of CarAPIS capabilities.

Repository: carapis-nextjs-demo

Features​

  • Car Listings: Browse and search vehicles
  • Car Details: View detailed vehicle information
  • Responsive Design: Mobile and desktop optimized
  • Pre-configured: Ready to run with CarAPIS
  • Lightweight: Minimal dependencies
  • Docker Ready: Easy deployment with Docker

Quick Start​

Prerequisites​

  • Node.js 18+
  • pnpm (recommended)

Installation​

# Clone the repository
git clone https://github.com/markolofsen/carapis-nextjs-demo.git
cd carapis-nextjs-demo

# Install dependencies
pnpm install

# Start development server
pnpm dev

Visit http://localhost:3000

Environment Variables​

NEXT_PUBLIC_URL=https://vamcar.com
NEXT_PUBLIC_API_URL=https://api2.carapis.com
NEXT_PUBLIC_CARAPIS_APIKEY=your-api-key
NEXT_PUBLIC_GOOGLE_TAG_ID=your-gtag-id

Docker Deployment​

Using Dockerfile​

# Build image
docker build -t car-portal .

# Run container
docker run -p 3000:3000 car-portal

Using Docker Compose​

# Build and run
docker-compose up -d encar_portal

Environment Variables in Docker​

docker run -p 3000:3000 \
  -e NEXT_PUBLIC_CARAPIS_APIKEY=your-api-key \
  -e NEXT_PUBLIC_GOOGLE_TAG_ID=your-gtag-id \
  car-portal

Project Structure​

portal/
├── src/
│   ├── api/                 # API clients
│   ├── components/          # UI components
│   ├── core/                # Configuration
│   ├── layouts/             # Page layouts
│   ├── pages/               # Next.js pages
│   └── views/               # Page views
├── public/                  # Static assets
└── package.json

API Integration​

The demo portal integrates with CarAPIS for:

  • Vehicle data retrieval - Fetch car listings and details
  • Search and filtering - Advanced search capabilities
  • Real-time updates - Live data from the API
  • Image handling - Vehicle photos and galleries

API Usage Examples​

// Fetch vehicle listings
const response = await fetch('/api/vehicles?page=1&limit=20', {
  headers: {
    'X-API-Key': process.env.NEXT_PUBLIC_CARAPIS_APIKEY,
  },
});

// Get single vehicle
const vehicle = await fetch(`/api/vehicles/${vehicleId}`, {
  headers: {
    'X-API-Key': process.env.NEXT_PUBLIC_CARAPIS_APIKEY,
  },
});

Development​

pnpm dev      # Development server
pnpm build    # Production build
pnpm start    # Production server
pnpm lint     # ESLint

Development Commands​

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run linting
pnpm lint

# Run type checking
pnpm type-check

Customization​

Styling​

The portal uses Tailwind CSS for styling. Customize the design by modifying:

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      }
    }
  }
}

Components​

Modify components in src/components/ to customize the UI:

// src/components/VehicleCard.tsx
export function VehicleCard({ vehicle }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-4">
      <img src={vehicle.image} alt={vehicle.name} />
      <h3>
        {vehicle.brand} {vehicle.model}
      </h3>
      <p>{vehicle.price} 만원</p>
    </div>
  );
}

API Configuration​

Update API settings in src/core/config.ts:

export const config = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL || 'https://api2.carapis.com',
  apiKey: process.env.NEXT_PUBLIC_CARAPIS_APIKEY,
  defaultPageSize: 20,
  maxPageSize: 100,
};

Deployment​

Vercel Deployment​

  1. Fork the repository
  2. Connect to Vercel
  3. Set environment variables
  4. Deploy
# Deploy to Vercel
vercel --prod

Netlify Deployment​

  1. Build the project
  2. Upload to Netlify
  3. Configure environment variables
# Build
pnpm build

# Deploy to Netlify
netlify deploy --prod --dir=out

Docker Deployment​

# Build Docker image
docker build -t car-portal .

# Run with environment variables
docker run -d \
  -p 3000:3000 \
  -e NEXT_PUBLIC_CARAPIS_APIKEY=your-key \
  -e NEXT_PUBLIC_API_URL=https://api2.carapis.com \
  car-portal

Environment Configuration​

Required Variables​

# API Configuration
NEXT_PUBLIC_API_URL=https://api2.carapis.com
NEXT_PUBLIC_CARAPIS_APIKEY=your-api-key

# Site Configuration
NEXT_PUBLIC_URL=https://your-domain.com
NEXT_PUBLIC_SITE_NAME=Car Portal

# Analytics (Optional)
NEXT_PUBLIC_GOOGLE_TAG_ID=G-XXXXXXXXXX

Optional Variables​

# SEO
NEXT_PUBLIC_SITE_DESCRIPTION=Car listings and search portal
NEXT_PUBLIC_SITE_KEYWORDS=car,vehicle,search,listings

# Features
NEXT_PUBLIC_ENABLE_ANALYTICS=true
NEXT_PUBLIC_ENABLE_SEARCH=true
NEXT_PUBLIC_ENABLE_FILTERS=true

Performance Optimization​

Image Optimization​

// Use Next.js Image component
import Image from 'next/image';

<Image src={vehicle.image} alt={vehicle.name} width={300} height={200} placeholder="blur" blurDataURL="data:image/jpeg;base64,..." />;

Caching​

// Implement caching for API calls
const cache = new Map();

async function getVehicle(id: string) {
  if (cache.has(id)) {
    return cache.get(id);
  }

  const vehicle = await fetchVehicle(id);
  cache.set(id, vehicle);
  return vehicle;
}

Code Splitting​

// Lazy load components
import dynamic from 'next/dynamic';

const VehicleDetails = dynamic(() => import('../components/VehicleDetails'), {
  loading: () => <div>Loading...</div>,
});

Troubleshooting​

Common Issues​

  1. API Key Error

    # Check environment variable
    echo $NEXT_PUBLIC_CARAPIS_APIKEY

  2. Build Errors

    # Clear cache and rebuild
    rm -rf .next
    pnpm build

  3. Docker Issues

    # Rebuild without cache
    docker build --no-cache -t car-portal .

Debug Mode​

# Enable debug logging
DEBUG=* pnpm dev

Live Demo​

Visit the live demo portal to see the API in action:

🚗 VamCar Demo Portal

Contributing​

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

License​

Part of the CarAPIS ecosystem. See LICENSE for details.