MyStore

Overview

Technical Details

A demo e-commerce site with semantic product search and AI-powered Q&A on each product page. Built with Next.js, MongoDB, OpenAI embeddings, and RAG.

Browse catalogueView cart

What this project does

  • Catalogue (/products): Grid of products with natural language search.
  • Product detail (/products/[slug]): Images, price, specs, reviews, descriptions, add to cart, and an “Ask about this product” box.
  • Cart (/cart): View items, change quantity, remove items; totals update accordingly.
  • Admin (/admin/product, /admin/product/[slug]): Add and edit products (demo-only, not protected).

How semantic search works

  1. Product data lives in MongoDB (title, descriptions, specs, reviews, price, images, slug).
  2. Each product is chunked; chunks are embedded with OpenAI text-embedding-3-* and stored as vectors.
  3. On search: query → embedding → vector search on product chunks → rank products by similarity.
  4. Top matches are returned to the /products page.

How product Q&A (RAG) works

  • Q&A widget posts productId + question to /api/products/ask.
  • Backend embeds the question, searches chunks filtered by productId, and builds a context.
  • Calls OpenAI (e.g., gpt-4.1-mini) with a strict prompt: answer only from provided product info, no invented facts.
  • Returns the answer to the UI. Responses are constrained to stored descriptions, specs, and reviews.

Tech stack

Frontend

  • Next.js (App Router), TypeScript
  • Tailwind CSS v4, shadcn/ui (Radix + Tailwind)

Backend

  • Next.js Route Handlers (/app/api)
  • MongoDB + Mongoose

AI

  • OpenAI embeddings: text-embedding-3-*
  • OpenAI chat model: gpt-4.1-mini

Tooling

  • Biome for lint/format
  • TypeScript for type checking
  • tsx for scripts (embeddings rebuild, etc.)

Phases

Phase 0 – Core app

  • Init Next + TS + Tailwind + shadcn/ui
  • MongoDB connection
  • Admin create/edit products
  • Catalogue grid + product detail pages

Phase 1 – Embeddings

  • OpenAI embeddings pipeline
  • Chunking + storing embeddings (ProductChunk)
  • Semantic search and product-level RAG

Limitations / demo notes

  • Demo only—no real payments.
  • Admin routes are not protected in this demo.
  • Small product sample; OpenAI calls incur token costs.

Where to look in the code

  • package.json: dependencies & scripts (next, mongoose, openai, tailwindcss, radix, zod, biome, etc.).
  • Products: app/features/products/... (schemas, components, hooks).
  • Embedding/RAG: app/features/embedding/... and app/api/products/ask/route.ts.
  • Cart: app/features/cart/... and app/cart/page.tsx.
  • Admin: app/admin/product and app/admin/product/[slug].
  • Layout: app/layout.tsx (nav/footer) and app/features/layout/components.