E Commerce Dashboard

AI-Powered E-commerce Management Dashboard

An intelligent e-commerce management platform built to simplify store operations, centralize business data, and help administrators make better decisions through AI-powered assistance and data analysis.

The Problem

Managing an e-commerce business involves handling multiple operational tasks, including product management, order tracking, inventory monitoring, discount campaigns, and performance analysis.

As a store grows, these operations become increasingly difficult to manage efficiently. Administrators often need to navigate between different sections, manually inspect data, and spend time extracting insights from business metrics.

Traditional dashboards provide data visualization and management tools, but they rarely offer an intelligent way to interact with that data or perform operations using natural language.

The Solution

I developed an AI-powered e-commerce dashboard that combines traditional store management capabilities with an intelligent assistant capable of understanding the current application context, retrieving business data, executing supported actions, and analyzing store performance.

The goal was to go beyond a conventional CRUD dashboard by introducing an AI layer that interacts directly with the application's business logic and data.

Key Features

• AI-Powered Assistant: An integrated AI agent that understands user requests, interacts with application data, and assists with everyday e-commerce operations.
• Context-Aware AI: The assistant automatically receives relevant information from the current page, allowing it to answer questions based on the actual dashboard, products, or orders being viewed.
• AI Tool Calling: Supports specialized tools for retrieving product details, analyzing products, deleting products, and performing store-wide data analysis.
• Web Search Integration: Enables the assistant to search the web for relevant e-commerce information and product-related insights.
• Product Management: Create, update, delete, and manage products, including product variations, pricing, stock information, and image uploads.
• Order Management: Monitor customer orders, inspect order details, and manage order statuses throughout the fulfillment process.
• Coupon Management: Create and manage discount coupons with configurable starting and expiration dates.
• Analytics Dashboard: Visualize business performance through sales metrics, order statistics, top-selling products, and interactive charts.
• Role-Based Access: Separate administrative and read-only access to provide different levels of interaction with the dashboard.
• User Management: Manage dashboard users and their assigned roles.
• Responsive Interface: A modern dashboard experience optimized for different screen sizes.

Technology Stack

• Frontend: Next.js 15, React 19, TypeScript.
• Styling & UI: Tailwind CSS v4, Radix UI, reusable components.
• AI Integration: Google Gemini 2.0 Flash, Vercel AI SDK.
• AI Capabilities: Tool Calling, Streaming Responses, Google Search Grounding.
• Backend: Next.js Server Actions and API Routes.
• Database: Firebase Firestore.
• Authentication: Firebase Authentication and Firebase Admin SDK.
• Media Management: Cloudinary.
• Data Visualization: Recharts.
• Forms & Validation: React Hook Form, Zod.
• Deployment: Vercel.

Engineering Highlights

One of the most interesting challenges in this project was integrating an AI assistant into an existing business application while giving it access to meaningful application data and operations.

Key engineering aspects include:

• Designing a context-aware AI workflow that dynamically provides page-specific data to the assistant.
• Implementing AI tools with structured parameters and validation using Zod.
• Connecting Gemini with server-side business operations through the Vercel AI SDK.
• Implementing streamed AI responses for a more interactive conversational experience.
• Separating Firebase client-side and server-side responsibilities using Firebase SDK and Firebase Admin.
• Implementing server-side authentication with verified session cookies.
• Enforcing role-based authorization for sensitive administrative operations.
• Building reusable management components and handling data pagination, filtering, and updates.
• Integrating Cloudinary for product image uploads, replacement, and deletion.

Links

• Live Demo
• GitHub Repository

---

Built by Youssef Mohammed