ShopMind AI — Premium AI-Powered E-Commerce Platform

A production-grade, full-stack AI-powered e-commerce monorepo integrating React + Vite, Node.js + Express, MongoDB Atlas, Claude AI (Anthropic), Google Gemini, Stripe Payments, and Google Stitch ETL.

Overview

ShopMind AI is a premium, dark-themed e-commerce platform built around the concept of AI-curated high-tech minimalist desk gadgets and AI accessories. The platform features a floating AI shopping assistant powered by Anthropic Claude, real-time product sentiment analysis, personalized recommendations, Stripe-powered payments, and a Google Stitch ETL pipeline for analytics — all running in a clean monorepo architecture.

The project was designed with resume-grade engineering decisions — every architectural choice is intentional, documented, and defensible in a technical interview.

Features

Storefront

Glassmorphic dark-theme UI with neon cyan and violet accents
Product catalog with 12 seeded premium gadgets across 4 categories: Desk Tech, AI Gadgets, Audio, Lighting
Smart Matrix Filters — filter by category in real time
AI Score badges on every product card (value score generated by Claude)
Search across product names, descriptions, and categories

AI Features

Floating Chat Assistant — bottom-right collapsible chatbot powered by Claude (Anthropic). Maintains full conversation history in Redux across page navigation
AI Review Summarizer — on every Product Detail page, Claude synthesizes user reviews into a sentiment score, pros list, and cons list
AI Product Recommendations — personalized "You might also like" shelf on Home and Product Detail powered by Claude/Gemini
AI SEO Description Generator — admin dashboard triggers Claude to auto-generate product descriptions
Simulator Fallback — all AI features run in high-fidelity simulator mode when no API key is present, so the app works out of the box

Shopping

Add to cart, update quantities, remove items via slide-out CartDrawer
Persistent cart state — synced to MongoDB when logged in, localStorage when guest
Full Checkout page with shipping form and Stripe Elements integration
Canvas-confetti success animation on payment confirmation
Order History page with full receipt breakdown

Auth & Security

JWT-based authentication with short-lived access tokens (held in memory, never localStorage)
Refresh tokens stored in httpOnly cookies — silent token rotation on 401
Role-based access control — user and admin roles
Axios interceptor automatically retries failed requests after token refresh

Admin Dashboard

Create, view, and delete products
Trigger Claude AI to auto-generate SEO descriptions for any product
View all orders and user accounts
Stitch Monitor — real-time ETL pipeline status dashboard

Data Pipeline

Google Stitch ETL integration — syncs product catalog and order data to a data warehouse
Batch processing with chunked payloads (500 records/batch)
In-memory run log visible in the StitchMonitor admin panel

Tech Stack

Layer	Technology
Frontend	React 18, Vite 5, Tailwind CSS v3, Redux Toolkit
Routing	React Router v6
State	Redux (chatSlice), React Context (AuthContext, CartContext)
Backend	Node.js, Express.js
Database	MongoDB Atlas + Mongoose (with automatic mock fallback)
AI — Primary	Anthropic Claude (claude-sonnet-4-5) via `@anthropic-ai/sdk`
AI — Secondary	Google Gemini (gemini-2.5-flash) via `@google/genai`
Payments	Stripe (`stripe` SDK + `@stripe/react-stripe-js`)
ETL	Google Stitch Import API via `axios`
Auth	JWT (jsonwebtoken), bcryptjs, httpOnly cookies
HTTP Client	Axios with request/response interceptors
Icons	Lucide React
Animations	canvas-confetti, Tailwind CSS keyframes
Dev Tools	Vite HMR, nodemon, concurrently

Architecture

┌─────────────────────────────────────────────────────────────┐
│                        CLIENT (React)                        │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌────────────┐  │
│  │  Redux   │  │  Auth    │  │  Cart    │  │   Axios    │  │
│  │chatSlice │  │ Context  │  │ Context  │  │Interceptor │  │
│  └──────────┘  └──────────┘  └──────────┘  └────────────┘  │
└─────────────────────────┬───────────────────────────────────┘
                          │ HTTP / SSE
┌─────────────────────────▼───────────────────────────────────┐
│                     SERVER (Express)                         │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌────────────┐  │
│  │  Routes  │  │Controllers│  │ Services │  │ Middleware │  │
│  └──────────┘  └──────────┘  └────┬─────┘  └────────────┘  │
│                              ┌────▼──────────────────────┐  │
│                              │  claudeService.js          │  │
│                              │  geminiService.js          │  │
│                              │  stitchService.js          │  │
│                              └────┬──────────────────────┘  │
└───────────────────────────────────┼─────────────────────────┘
              ┌────────────────┬────┴──────────┬──────────────┐
              ▼                ▼               ▼              ▼
       MongoDB Atlas     Anthropic API   Stripe API    Stitch API

Key Architectural Decisions

Single SDK init pattern — config/claude.js initializes the Anthropic SDK once and exports the client. No other file imports from @anthropic-ai/sdk directly. Swapping models or adding caching is a one-line change.

Centralized prompt templates — utils/promptTemplates.js stores all Claude/Gemini system prompts as named string exports (CHAT_ASSISTANT_PROMPT, SEO_WRITER_PROMPT, REVIEW_SUMMARIZER_PROMPT). Prompts are version-controllable and independent of business logic.

Service layer isolation — services/claudeService.js and services/geminiService.js expose identical function signatures (chatReply, generateDescription, recommendProducts). Controllers can swap AI providers by changing one import line.

Hybrid database layer — config/db.js attempts MongoDB connection on startup. If MONGO_URI is absent or fails, utils/mockDb.js activates automatically with 12 seeded products — zero configuration required to run the app.

Redux for AI chat memory — store/chatSlice.js persists conversation history in global Redux state so the floating ChatAssistant maintains full multi-turn context across page navigation.

Silent token rotation — Axios response interceptor catches 401 errors, calls /api/auth/refresh silently, and retries the original request queue — users never see a login prompt during an active session.

Folder Structure

shopmind-ai/
├── package.json                    ← root: concurrently runs client + server
├── .env.example
├── server/
│   ├── package.json
│   ├── server.js                   ← entry point, middleware, DB init
│   └── src/
│       ├── config/
│       │   ├── db.js               ← MongoDB connect + mock fallback
│       │   ├── claude.js           ← Anthropic SDK init (single export)
│       │   └── stripe.js           ← Stripe SDK init (single export)
│       ├── models/
│       │   ├── Product.js
│       │   ├── User.js             ← roles: 'user' | 'admin'
│       │   ├── Order.js
│       │   └── Cart.js
│       ├── controllers/
│       │   ├── authController.js
│       │   ├── productController.js
│       │   ├── cartController.js
│       │   ├── orderController.js
│       │   ├── paymentController.js
│       │   └── adminController.js
│       ├── routes/
│       │   ├── authRoutes.js
│       │   ├── productRoutes.js
│       │   ├── cartRoutes.js
│       │   ├── orderRoutes.js
│       │   ├── paymentRoutes.js
│       │   ├── aiRoutes.js
│       │   └── adminRoutes.js
│       ├── services/
│       │   ├── claudeService.js    ← ALL Anthropic API calls (3 exports)
│       │   ├── geminiService.js    ← ALL Gemini API calls (3 exports)
│       │   └── stitchService.js   ← ETL sync logic
│       ├── utils/
│       │   ├── promptTemplates.js  ← All AI system prompts as named exports
│       │   ├── mockDb.js           ← In-memory fallback with 12 products
│       │   └── generateToken.js   ← JWT access + refresh token helpers
│       └── middleware/
│           ├── authMiddleware.js   ← verifyToken, requireAdmin
│           └── errorMiddleware.js
└── client/
    ├── package.json
    ├── vite.config.js
    ├── tailwind.config.js          ← glassmorphism theme + glow animations
    ├── index.html
    └── src/
        ├── store/
        │   ├── index.js
        │   └── chatSlice.js        ← conversation history in Redux
        ├── context/
        │   ├── AuthContext.jsx     ← user session, token management
        │   └── CartContext.jsx     ← cart state + backend sync
        ├── components/
        │   ├── Navbar.jsx
        │   ├── Footer.jsx
        │   ├── ProductCard.jsx
        │   ├── CartDrawer.jsx
        │   └── ai/
        │       ├── ChatAssistant.jsx       ← floating chatbot
        │       ├── ChatMessage.jsx
        │       └── RecommendedProducts.jsx
        ├── pages/
        │   ├── Home.jsx            ← hero + filters + product grid
        │   ├── ProductDetail.jsx   ← AI sentiment + reviews
        │   ├── Cart.jsx
        │   ├── Checkout.jsx        ← Stripe Elements
        │   ├── OrderHistory.jsx
        │   ├── Auth.jsx            ← sign-in / sign-up tabs
        │   └── admin/
        │       ├── Dashboard.jsx
        │       └── StitchMonitor.jsx
        └── utils/
            └── api.js              ← axios + JWT interceptors

AI Integration

claudeService.js — Three named exports

// 1. Multi-turn streaming chat assistant
chatReply(userMessage, history, res)
// Streams SSE tokens to frontend in real time

// 2. SEO product description generator
generateDescription(product)
// Returns plain text, max ~120 words

// 3. Personalized product recommendations
recommendProducts(currentProduct, purchaseHistory, catalogue)
// Returns array of { name, reason, matchScore } sorted by score

geminiService.js — Identical interface

geminiService mirrors claudeService exactly — same three function signatures, same return shapes. Controllers can switch AI providers with a single import change:

// Switch from Claude to Gemini in any controller:
const aiService = require('../services/geminiService'); // one line change

promptTemplates.js — Version-controlled prompts

export const CHAT_ASSISTANT_PROMPT = `You are ShopMind AI...`;
export const SEO_WRITER_PROMPT = `You are an expert e-commerce copywriter...`;
export const REVIEW_SUMMARIZER_PROMPT = `Analyze these product reviews...`;

Database Design

Hybrid Mode

The app runs in two modes detected automatically at startup:

MongoDB mode — MONGO_URI present → connects to Atlas, seeds 12 products + 2 users on first run
Mock mode — no MONGO_URI → activates mockDb.js in-memory store, app is fully functional

Models

Product — name, price, description, category, imageUrl, rating, reviewCount, reviews[], aiInsights { valueScore, sentiment, pros[], cons[] }

User — name, email, password (bcrypt hashed), role ('user' | 'admin'), createdAt

Order — user (ref), orderItems[], shippingAddress, paymentMethod, itemsPrice, taxPrice, shippingPrice, totalPrice, paymentResult, orderStatus

Cart — user (ref), items[] { product (ref), qty }

Authentication Flow

Register/Login → Server returns { accessToken } in body
                              + refreshToken in httpOnly cookie
                                      ↓
Client stores accessToken in memory (never localStorage)
                                      ↓
Every API request → Authorization: Bearer {accessToken}
                                      ↓
Token expires → Axios interceptor catches 401
                                      ↓
POST /api/auth/refresh (cookie sent automatically)
                                      ↓
New accessToken returned → retry original request

Payment Integration

Stripe is integrated using the official stripe Node.js SDK on the backend and @stripe/react-stripe-js on the frontend.

Flow:

Client POSTs to /api/payment/intents with order total
Server creates a Stripe PaymentIntent and returns clientSecret
Client uses Stripe Elements to collect card details securely
On success — canvas-confetti fires, order is saved, user redirected to Order History

Test card: 4242 4242 4242 4242 | Any future expiry | Any CVC

Mock mode: If STRIPE_SECRET_KEY is absent, a mock payment intent is returned so checkout flow can be tested end-to-end without a Stripe account.

ETL Pipeline

stitchService.js handles all Google Stitch Import API communication:

syncProducts(products)  // Push product catalog to warehouse
syncOrders(orders)      // Push order data after payment confirmation
getRunStatus()          // Health check + last run metadata

Batches records in chunks of 500 for Stitch API compliance
In-memory run log tracks status, rows synced, duration, and errors
admin/StitchMonitor.jsx displays pipeline health in real time
Triggered automatically after product CRUD and order creation

Quick Start

# 1. Clone the repo
git clone https://github.com/vinushinde2525-sys/ShopMind-AI-FullStack-Web-Application.git
cd shopmind-ai

# 2. Install all dependencies
npm run install:all

# 3. Configure environment
cp server/.env.example server/.env
# Edit server/.env with your keys (see Environment Variables below)

# 4. Run both client and server concurrently
npm run dev

# Frontend → http://localhost:5173
# Backend  → http://localhost:5000

The app works out of the box with zero API keys — mock DB and AI simulator activate automatically.

Environment Variables

server/.env

PORT=5000
MONGO_URI=                        # Optional — mock DB activates if blank
JWT_SECRET=your_secret_here
JWT_REFRESH_SECRET=your_refresh_secret_here
ANTHROPIC_API_KEY=                # Optional — simulator activates if blank
GEMINI_API_KEY=                   # Optional
STRIPE_SECRET_KEY=                # Optional — mock gateway activates if blank
STITCH_API_TOKEN=                 # Optional — ETL sync disabled if blank
STITCH_CLIENT_ID=
STITCH_BASE_URL=https://api.stitchdata.com
CLIENT_URL=http://localhost:5173

client/.env

VITE_API_URL=http://localhost:5000
VITE_STRIPE_PUBLIC_KEY=           # Optional

How It Was Built

ShopMind AI was built using a structured AI-assisted development workflow:

Architecture design — The full monorepo structure, service layer patterns, and API contracts were designed upfront before any code was written. Key decisions (single SDK init, centralized prompts, identical service interfaces) were locked in the spec.
Prompt engineering — A detailed master prompt specifying exact folder structure, architectural guardrails, all 7 pages, and every service file was crafted and provided to Antigravity IDE (an AI coding assistant) for initial code generation.
Code review — Core service files (claudeService.js, geminiService.js, stitchService.js) were manually reviewed against the spec before the rest of the build continued, ensuring the AI layer was solid before controllers and routes were built on top.
Iterative debugging — Common AI generation errors (incorrect imports from lucide-react, string _id fields incompatible with MongoDB ObjectId) were identified and fixed systematically.
Integration — External services (MongoDB Atlas, Stripe, Anthropic) were connected one at a time and verified independently before moving to the next.

Testing

Manual E2E Testing (verified on localhost)

Test	Result
Frontend boots at localhost:5173	✅
Backend boots with mock DB (no MONGO_URI)	✅
Backend connects to MongoDB Atlas	✅
12 products seed to MongoDB on first run	✅
User registration and login	✅
JWT access token + httpOnly refresh cookie	✅
Silent token rotation on 401	✅
Add to cart → update qty → remove	✅
Checkout with Stripe test card	✅
Canvas-confetti on payment success	✅
Order saved to MongoDB	✅
Order History page displays receipts	✅
AI chatbot opens and responds	✅
Chat history persists across page navigation	✅
Product Detail AI sentiment summary	✅
Admin login (admin@shopmind.ai / admin123)	✅
Admin dashboard product management	✅
Stitch Monitor ETL status panel	✅

Testing Environment

OS: Windows 11
Browser: Microsoft Edge (latest)
Node.js: v24.6.0
Frontend: Vite dev server (localhost:5173 / 5174)
Backend: Express dev server (localhost:5000 / 5001)
Database: MongoDB Atlas (M0 Free tier, Mumbai region)
Payments: Stripe sandbox (test mode)

Roadmap

Deploy backend to Render (free tier)
Deploy frontend to Vercel
Connect real Anthropic API key for live AI responses
Add product image upload via Cloudinary
Add user review submission on Product Detail
Add email order confirmation via Resend/SendGrid
Implement Google Stitch full ETL sync on order creation
Add product search with MongoDB Atlas Search

Admin Credentials (Demo)

Email:    admin@shopmind.ai
Password: admin123

License

MIT License — feel free to fork, modify, and use for your own projects.

Built with React, Node.js, MongoDB, Claude AI, and Stripe

⭐ Star this repo if you found it useful

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
client		client
server		server
tests		tests
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

ShopMind AI — Premium AI-Powered E-Commerce Platform

Table of Contents

Overview

Features

Storefront

AI Features

Shopping

Auth & Security

Admin Dashboard

Data Pipeline

Tech Stack

Architecture

Key Architectural Decisions

Folder Structure

AI Integration

claudeService.js — Three named exports

geminiService.js — Identical interface

promptTemplates.js — Version-controlled prompts

Database Design

Hybrid Mode

Models

Authentication Flow

Payment Integration

ETL Pipeline

Quick Start

Environment Variables

server/.env

client/.env

How It Was Built

Testing

Manual E2E Testing (verified on localhost)

Testing Environment

Roadmap

Admin Credentials (Demo)

License

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages