Exzort Gear — Modern E-Commerce Platform

Exzort Gear is a modern, headless e-commerce platform designed to deliver a premium shopping experience for tech enthusiasts. Built with cutting-edge web technologies, this project demonstrates the power of Next.js 16, Shopify Storefront API, and Server Components to create a fast, SEO-friendly, and user-centric online store.

The platform features a complete shopping experience from product browsing to order tracking, all while maintaining exceptional performance and developer experience through TypeScript and Tailwind CSS.

---

🛍️ Product Catalog & Search

The heart of any e-commerce platform is its product discovery system. Exzort Gear implements:

• Dynamic Product Pages with variant selection (size, color, etc.)
• Real-time Search with debounced input (400ms delay for optimal UX)
• Collection Browsing organized by categories
• Server-Side Rendering for optimal SEO and performance

Intelligent Search Implementation

// Debounced search with smart navigation
useEffect(() => {
  if (!isSearchOpen) return;

  const timer = setTimeout(() => {
    const currentQuery = searchParams.get('q') || '';
    const newQuery = searchQuery.trim();
    
    if (newQuery !== currentQuery) {
      if (!isSearchPage) {
        router.push(`/search${newQuery ? `?q=${encodeURIComponent(newQuery)}` : ''}`);
      } else {
        const url = new URL(window.location.href);
        if (newQuery) {
          url.searchParams.set('q', newQuery);
        } else {
          url.searchParams.delete('q');
        }
        window.history.replaceState({}, '', url.toString());
        router.replace(url.pathname + url.search);
      }
    }
  }, 400);

  return () => clearTimeout(timer);
}, [searchQuery, router, isSearchOpen, isSearchPage, searchParams]);

The search system automatically updates results as users type, with no need to press Enter, creating a seamless discovery experience.

---

🛒 Smart Shopping Cart

The shopping cart is built with modern state management principles:

• LocalStorage Persistence — Cart items survive page refreshes
• Real-time Updates — Instant quantity adjustments
• Price Calculations — Dynamic subtotal, tax (10%), and total display
• Responsive Design — Optimized for all device sizes

export const useCart = () => {
  const [cart, setCart] = useState<Cart>({
    items: [],
    total: 0,
    itemCount: 0,
    currency: 'USD'
  });

  // Load cart from localStorage on mount
  useEffect(() => {
    const savedCart = localStorage.getItem(CART_STORAGE_KEY);
    if (savedCart) {
      setCart(JSON.parse(savedCart));
    }
  }, []);

  // Persist cart to localStorage on changes
  useEffect(() => {
    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart));
  }, [cart]);
};

---

💳 Seamless Checkout Experience

The checkout process is designed for conversion with:

• Multi-step Form Validation — Contact, Shipping, and Payment sections
• Demo Payment Mode — No real transactions for development/demo purposes
• Order Confirmation — Instant feedback with order numbers
• Email Integration via Resend API for order notifications

Demo-Safe Payment Processing

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setIsProcessing(true);

  // Simulate payment processing
  await new Promise(resolve => setTimeout(resolve, 2000));

  // Create order with tracking number
  const orderNumber = generateOrderNumber();
  const trackingNumber = generateTrackingNumber();
  
  const order: Order = {
    id: crypto.randomUUID(),
    orderNumber,
    date: new Date().toISOString(),
    status: 'processing',
    customer: { email, firstName, lastName },
    shippingAddress: { address, city, postalCode, country },
    items: cart.items.map(item => ({ ...item })),
    total: cart.total * 1.1,
    trackingNumber,
  };

  saveOrder(order);
  clearCart();
  router.push(`/checkout/success?orderNumber=${orderNumber}`);
};

A prominent Demo Notice ensures users understand no real payments are processed, making it safe for testing and demonstrations.

---

📦 Order Tracking System

One of the standout features is the comprehensive Order Management System:

Order Status Timeline

• 🟡 Pending — Order placed, awaiting processing
• 🔵 Processing — Order is being prepared
• 🟣 Shipped — Order dispatched with tracking number
• 🟢 Delivered — Order successfully delivered
• 🔴 Cancelled — Order was cancelled

Key Features

• Email-based Search — Find all orders by customer email
• Order Details Page — Complete view with timeline, items, and shipping info
• Tracking Numbers — Auto-generated for each order
• LocalStorage Persistence — Orders saved in browser for demo purposes
• Copy to Clipboard — Quick copy for order numbers and tracking IDs

export const saveOrder = (order: Order): void => {
  if (typeof window === 'undefined') return;
  
  const orders = getOrders();
  orders.push(order);
  localStorage.setItem(ORDERS_STORAGE_KEY, JSON.stringify(orders));
};

export const generateOrderNumber = (): string => {
  const timestamp = Date.now().toString(36).toUpperCase();
  const random = Math.random().toString(36).substring(2, 6).toUpperCase();
  return `ORD-${timestamp}-${random}`;
};

---

📧 Contact Form with Email Integration

The contact form uses Resend API for direct email delivery:

• No Email Client Required — Emails sent directly from the form
• Professional Templates — HTML-formatted emails with contact details
• Success/Error Feedback — Clear user feedback on submission status
• Reply-to Address — Automatically set to sender's email

API Route Implementation

import { Resend } from 'resend';
import { NextResponse } from 'next/server';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const { name, email, company, message } = await request.json();

  const data = await resend.emails.send({
    from: 'Contact Form <onboarding@resend.dev>',
    to: ['quibelkenneth@gmail.com'],
    subject: `Contact from ${name} - ${company}`,
    replyTo: email,
    html: `
      <div style="font-family: Arial, sans-serif;">
        <h2>New Contact Form Submission</h2>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Company:</strong> ${company}</p>
        <p><strong>Message:</strong></p>
        <p>${message}</p>
      </div>
    `,
  });

  return NextResponse.json({ success: true, data });
}

---

🎨 Modern UI/UX Design

The entire platform is built with a minimalist, dark-mode-first design philosophy:

• Responsive Grid Layouts — Adapts from mobile to 4K displays
• Smooth Animations — Fade-in effects and transitions throughout
• Hover States — Interactive feedback on all clickable elements
• Accessibility — Proper ARIA labels and keyboard navigation
• Dark Mode Support — Seamless light/dark theme switching

/* Tailwind CSS utility patterns used throughout */
.hover-lift {
  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

---

🛠️ Tools & Technologies

Frontend Framework

• Next.js 16 — Latest React framework with App Router and Server Components
• React 19 — Cutting-edge React features
• TypeScript — Full type safety across the codebase

Styling & UI

• Tailwind CSS v4 — Utility-first CSS framework
• Lucide React — Beautiful, consistent icon set
• Custom Animations — Smooth transitions and interactions

E-Commerce Backend

• Shopify Storefront API — Headless commerce integration
• GraphQL — Efficient data fetching
• Resend API — Transactional email service

State & Data

• React Hooks — Custom hooks for cart and state management
• LocalStorage API — Client-side persistence for cart and orders
• Context API — Global state management for cart

Deployment & Infrastructure

• Vercel — Edge deployment and CDN
• Git — Version control
• Environment Variables — Secure API key management

---

🚀 Performance Optimizations

• Server Components — Reduced JavaScript bundle size
• Image Optimization — Next.js Image component with lazy loading
• Code Splitting — Automatic route-based splitting
• Edge Runtime — Fast response times globally
• Static Generation — Pre-rendered pages where possible
• Debounced Search — Prevents unnecessary API calls

---

🌟 Key Impact

Exzort Gear showcases how modern web technologies can create an e-commerce experience that rivals major platforms while maintaining clean code, excellent performance, and developer-friendly architecture.

By leveraging Next.js Server Components, Shopify's headless API, and thoughtful UX design, this project demonstrates:

• Full-stack TypeScript development
• Headless e-commerce architecture
• Production-ready features (search, cart, checkout, orders)
• Scalable state management patterns
• Modern design principles

The platform is built to be easily extended with features like user authentication, wishlists, product reviews, and advanced filtering—making it a solid foundation for any e-commerce venture.

---

📱 Live Demo

Experience the platform: exzort-gear.vercel.app

Demo Features Available:

• Browse real Shopify products
• Add items to cart
• Complete checkout flow (no real payment)
• Track demo orders
• Search products in real-time
• Submit contact form

---

👨‍💻 Developer Experience

The codebase prioritizes maintainability and developer experience:

// Type-safe product interface
interface Product {
  id: string;
  title: string;
  handle: string;
  availableForSale: boolean;
  priceRange: {
    minVariantPrice: {
      amount: number;
      currencyCode: string;
    };
  };
  images: Array<{
    url: string;
    altText?: string;
  }>;
}

// Custom hook pattern for reusable logic
const { cart, addToCart, removeFromCart, updateQuantity, clearCart } = useCart();

Clean separation of concerns, reusable components, and comprehensive TypeScript types make the codebase a joy to work with and extend.