ReactE-commercePortfolio

capstone-project-sk-ecommerce — React Ecommerce Template

By StanleyNeo

NeoMart is a full-stack e-commerce template built with React, Express, and MongoDB, featuring a hallucination-resistant AI shopping assistant and three-layer smart search. It can serve as a portfolio project or a starting point for an e-commerce prototype.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-01View source

What stands out

A quick read of the recorded project description.

01

Hallucination-resistant AI shopping assistant: the backend pre-filters products and validates product IDs returned by the model, so the model cannot reference nonexistent prices or stock

02

Three-layer smart search: regex price intent → weighted keyword scoring → LLM explanation only when necessary

03

AI provider chain: Gemini → DeepSeek → Smart Mock; AI features remain usable via Smart Mock even without API keys

04

Complete e-commerce flow: product filtering, cart, checkout, and order history, with order totals calculated server-side and atomic stock deduction

05

Unified API response format { success, count, data }, including 400/404/409 semantics and an idempotent seed script

06

Brand and product catalog can be swapped wholesale via frontend/src/siteConfig.js and the new data/seed.js

Template Details

NeoMart is a full-stack e-commerce demo project. The frontend uses React (create-react-app), the backend is an Express API, and data is stored in a local MongoDB instance. The project provides a product catalog, category filtering, price and stock filters, a cart drawer, a checkout flow, and order history with status labels.

The AI component includes a hallucination-resistant shopping assistant: the backend first pre-filters MongoDB by keywords, injects only real products (name, price, stock) into the system prompt, and requires the model to return structured JSON. The backend then validates product IDs, so the model cannot fabricate prices or stock. Smart search has three layers: regex-based price intent extraction, weighted keyword scoring, and an LLM explanation only when the first two layers produce weak results. The AI provider chain is Gemini (free tier, primary) → DeepSeek (fallback) → Smart Mock (offline, always answers). Identical prompts are cached in memory for 5 minutes, and an endpoint provides per-provider statistics.

The README states that this is a 2026 remake of a 2025 AI-driven LMS graduation project, reusing the original architecture and upgrading the AI stack. The demo backend is deployed on Render's free tier, which sleeps when idle and takes about 30 seconds to wake on first load. Checkout is a simulated flow and does not integrate real payments. The project is MIT-licensed: this version's code may be used, modified, commercialized, and distributed for free, provided the copyright and license notice are retained. External services (domain, hosting, database, payment, AI) may incur separate charges, and third-party assets such as demo images, fonts, and icons require separate license verification.

ReactE-commercePortfolio

Is it right for your project?

Use Cases

  • As a full-stack e-commerce portfolio project demonstrating a complete React + Express + MongoDB implementation
  • As a starting point for e-commerce prototypes, replacing seed data for different product types such as rentals or real estate listings
  • For demos or teaching the hallucination-resistant design of AI shopping assistants and smart search, including pre-filtering, structured output, and provider fallback
  • Running in an offline environment without AI keys, relying on Smart Mock to validate chat and search flows

Suitable For

  • Learners or developers who need full-stack e-commerce example code
  • Teams that want to quickly build an e-commerce prototype with an AI shopping assistant
  • Job seekers looking for a React + Express + MongoDB portfolio project
  • Technical presenters who need to demonstrate hallucination-resistant AI and layered search architecture

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Requires Node 22+ and a locally running MongoDB

  2. 2

    Run npm install, copy .env.example to .env, then run node data/seed.js to populate 20 products, 3 users, and 5 orders

  3. 3

    Start the backend with node backend/src/server.js on :5000, and the frontend with npm start in the frontend directory on :3000

  4. 4

    AI keys are optional; without them, Smart Mock still answers. GEMINI_API_KEY and DEEPSEEK_API_KEY are optional environment variables

  5. 5

    The demo login account is [email protected]; checkout is a simulated flow and does not integrate real payments

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope applies to this version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • This version's code may be used, modified, commercialized, and distributed for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and liability limitations are governed by the original license and applicable law.

Additional costs & items to verify

  • The demo backend is deployed on Render's free tier, which sleeps when idle and takes about 30 seconds to wake on first access; it is not suitable for scenarios requiring fast response times.
  • Running it requires Node 22+ and a locally running MongoDB instance, which presents some environment setup overhead.
  • AI keys are optional; without them, AI features fall back to Smart Mock offline answers rather than a real large language model.
  • Checkout is a simulated flow and does not integrate real payments; Stripe test mode is only on the roadmap and cannot be used to accept actual payments.
  • The frontend uses the deprecated create-react-app; a Vite migration is only planned, and the build toolchain is relatively outdated.
  • The default AI provider chain relies on Gemini's free tier and DeepSeek as fallback; free-tier quotas or service changes can affect the quality of real AI answers.
  • Demo images, fonts, icons, and other third-party assets require verification under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domain, hosting, database, payment, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

backend on Render free tier sleeps when idle; first load ~30s while it wakes

Original README

Prereqs: Node 22+, local MongoDB running.

Original README

copy .env.example .env # AI keys optional — Smart Mock works keyless

Original README

Checkout is simulated — no payments (Stripe test mode is on the roadmap).

Original README

`create-react-app` is deprecated — kept here deliberately for 2025 code reuse; a Vite migration is planned

Original README

Gemini (free tier, primary) → DeepSeek (fallback) → Smart Mock (offline, always answers)

Original README
https://github.com/StanleyNeo/capstone-project-sk-ecommerce/blob/main/LICENSEhttps://github.com/StanleyNeo/capstone-project-sk-ecommerce/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 85 / 100
Technologies
React
Website type
E-commerce · Portfolio
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-09-24
Screenshot last checked
2026-10-01

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies React as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 4087a878ac118a166974af352372553329729724ad69e0fcc6cf0e6024ca0df6

2026-10-01T01:28:59.097Z

Source file / repository
# NeoMart — Full-Stack AI-Powered E-Commerce Capstone

> A demo store — **same engine, any business**. React + Express + MongoDB, with a
> hallucination-resistant AI chatbot and a 3-layer smart search. Built in 7 days as a
> 2026 regeneration of my 2025 AI-powered LMS capstone, reusing its architecture and
> upgrading the AI stack to the 2026 provider landscape.
> **Live demo:** https://neomart-theta.vercel.app — backend on Render free tier sleeps when idle; first load ~30s while it wakes

![NeoMart storefront](docs/screenshots/day4-storefront.png)

## Features

- **Storefront** — catalog grid, category pills, text/price/stock filters, cart drawer, checkout, order history with status pills
- **AI shop assistant (RAG-lite)** — answers with real names, prices and stock only; suggests alternatives instead of inventing products; product chips add straight to cart
- **Smart Search (3 layers)** — free regex price intent → weighted keyword scoring → LLM interpretation only when the free layers are weak
- **AI provider chain** — Gemini (free tier, primary) → DeepSeek (fallback) → Smart Mock (offline, always answers). 5-minute response cache; per-provider usage stats at `GET /api/ai/stats`
- **Engineering discipline** — `{ success, count, data }` envelope everywhere; 400/404/409 semantics; server-computed order totals; idempotent seed script; double-submit lock on checkout; startup banner with live data check

## Architecture

```
Browser — React (CRA, :3000)            ← "Tables"
   │  proxy /api →
Express API (:5000)                     ← "Kitchen"
   ├─ routes/   products · orders · users · ai
   ├─ services/ aiService (provider chain + cache + stats)
   └─ config/   MongoDB connection
MongoDB local (:27017, db: ecommerce)   ← "Pantry"
```

## The AI design (the interesting part)

### RAG-lite anti-hallucination
The LLM never sees the whole catalog. The backend pre-filters MongoDB by keywords,
injects only those real products (name/price/stock) into the system prompt, and demands
structured output `{"reply":"...","productIds":[...]}`. The backend then filters the
returned IDs against the real candidates — the model *can't* quote a fake price because
it never had one. Ask it for a PlayStation 5 and it honestly declines, then suggests a
real in-stock alternative.

### 3-layer Smart Search — cheapest intelligence first
1. **Regex** extracts price intent (`under $50`, "cheap" → cap 50) — free
2. **Weighted scoring** (tags +3, name +2, category +2, description +1) — free
3. **LLM interpretation** maps the query to categories/keywords — *only* when layers 1–2 return weak results

"cheap gifts for runners" costs $0 of LLM tokens: the price cap and the `gift` tag do all the work.

### Provider chain + cache
`Gemini → DeepSeek → Smart Mock`, each provider a config entry (model name lives in
`.env`, never hardcoded). Quota/auth failures fall through automatically — the demo never
dies on stage. Identical prompts are served from a 5-minute in-memory cache (key =
catalog + message, so a stock change busts the cache).

![AI chat](docs/screenshots/day6-chat.png)
![Honest no](docs/screenshots/day6-playstation.png)

## Quick start

Prereqs: Node 22+, local MongoDB running.

```powershell
git clone https://github.com/StanleyNeo/capstone-project-sk-ecommerce.git
cd capstone-project-sk-ecommerce
npm install
copy .env.example .env        # AI keys optional — Smart Mock works keyless
node data/seed.js             # 20 products / 3 users / 5 orders
node backend/src/server.js    # API on :5000 — watch the startup banner

cd frontend
npm install
npm start                     # storefront on :3000
```

Demo login: `[email protected]` (seeded). Checkout is simulated — no payments (Stripe test mode is on the roadmap).

## API reference

| Method | Endpoint | Notes |
|--------|----------|-------|
| GET | `/api/products` | filters: `category`, `search`, `minPrice`, `maxPrice`, `inStock` |
| GET | `/api/products/:id` | 404 envelope on unknown id |
| POST | `/api/orders` | 400 bad shape · 404 unknown user/product · 409 insufficient stock; server computes total |
| GET | `/api/orders/:userId` | newest first, items populated |
| GET | `/api/users/lookup?email=` | never returns password fields |
| POST | `/api/chatbot/chat` | `{ message }` → `{ reply, products[], provider }` |
| POST | `/api/search/smart` | `{ query }` → products + `meta` (maxPrice, interpretation) |
| GET | `/api/ai/stats` | per-provider success/error counts, cache size |
| GET | `/api/health` | liveness |

## Environment variables

| Key | Purpose | Required |
|-----|---------|----------|
| `MONGO_URI` | e.g. `mongodb://127.0.0.1:27017/ecommerce` | ✅ |
| `PORT` | API port (default 5000) | ✅ |
| `GEMINI_API_KEY` / `GEMINI_MODEL` | primary AI (free tier) | optional |
| `DEEPSEEK_API_KEY` | fallback AI | optional |
| `OPENAI_API_KEY` | second fallback | optional (unused) |

With no keys at all, every AI feature still works via Smart Mock.

## 2025 → 2026 migration notes

- `create-react-app` is deprecated — kept here deliberately for 2025 code reuse; a Vite migration is planned (`import.meta.env.VITE_*`, root `index.html`, proxy in `vite.config.js`)
- DeepSeek retired the `deepseek-chat` alias (2026-07) and `deepseek-v4-flash` (2026-09) — model names are config, so the fix was one `.env` line
- Gemini free tier is Flash-only since Apr 2026
- Gemini 3.x thinking models return **multi-part** responses (`content.parts[]` incl. thought parts) and count reasoning against `maxOutputTokens` — join non-thought parts and budget generously

## Verification highlights (tested during the build)

- Filters: electronics→5, `yoga`→1, ≤$25→3, out-of-stock→1
- Order for 1 Yoga Mat + 2 Resistance Bands = server-computed **$67.00**, stock decremented atomically, double-submit blocked by a `useRef` lock
- 409 surfaced as a friendly red box: `Insufficient stock for "Smart Fitness Watch": requested 10, available 9`
- Chatbot cache: fresh call ~2–9s → cache hit ~8ms

## Roadmap

- **Day 8a** — Vite migration
- **Day 8b** — Stripe test-mode payments + PayNow QR (zero-fee, Singapore)
- **Phase 2** — self-hosting on Synology DS223j NAS
- **Phase 3** — public demo: Vercel (frontend) + Render (API) + MongoDB Atlas

## Reuse this engine

The whole store rebrands from **one file**: `frontend/src/siteConfig.js`
(business name, tagline, currency, colors, categories) plus a new `data/seed.js` catalog.
Rental fleet, property listings, forex-indicator store — same engine, new seed.

## License

MIT — see [LICENSE](LICENSE).
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-portfolio-template

react-portfolio-template

A React-based developer portfolio template for showcasing projects, work history, and skills. It offers a multi-component layout, dark and light modes, and responsive mobile adaptation, with text and images editable in src/components.

React · Portfolio

personal-website-react

personal-website-react

A single-page developer portfolio template built with React and Material-UI, driven by a JSON Resume-compliant resume.json. It offers light/dark theme switching with localStorage persistence, a clean responsive layout, and Create React App tooling for simple builds and static deployment.

React · Portfolio

karngyan.com

karngyan.com

A personal website and blog template for developers, built with TanStack Start, React 19, Tailwind CSS v4, and shadcn/ui. It uses MDX for articles with Shiki highlighting and GFM tables, and automatically generates RSS, sitemap, robots.txt, llms.txt, and OG images.

React · Portfolio

react-portfolio-template

react-portfolio-template

A React portfolio template by Ryan Balieiro with a fixed sidebar and page-turn transitions on desktop, bottom navigation on mobile, multilingual support, light/dark themes, and content components for experience, education, skills, projects, and testimonials.

React · Portfolio

portfolio

portfolio

A data scientist personal portfolio template built with React and MUI, with content centrally managed through configuration files in the assets directory.

React · Portfolio

react-portfolio

react-portfolio

A React 16 and Material-UI developer portfolio template that centralizes personal information in a JSON Resume-compliant resume.json, with light/dark theme switching saved to local storage. It currently provides portfolio display only; resume page templates and structured data enhancements are still planned.

React · Portfolio