An early-stage concept for an AI-powered shopping experience — describe what you're looking for in plain language and (eventually) get AI-matched product results. Currently a styled front-end scaffold with mock product data, laying the groundwork for OpenAI-powered search.
This repo is a front-end scaffold. Here's honestly where things stand:
- ✅ Landing page, product listing, and search pages with a polished dark UI
- ✅ Client-side search/filter over mock product data (
products/page.tsx) - ✅
openai,@prisma/client-related tooling,zustand, and@tanstack/react-queryinstalled and ready to use - ⏳ Prisma schema (
prisma/schema.prisma) is currently just the generator/datasource boilerplate — no models defined yet - ⏳ No AI search API route wired up yet — the OpenAI SDK is installed but not yet called anywhere
- ⏳ No real checkout/payment flow yet
- AI-powered search — natural-language product search via the OpenAI API
- Product catalog — backed by a real database via Prisma instead of mock data
- Category filtering — already partially implemented on the client
- Secure checkout — end-to-end payment flow (not yet built)
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| AI | OpenAI SDK (installed, not yet integrated) |
| Database/ORM | Prisma 7 + PostgreSQL (schema not yet modeled) |
| Client state | Zustand |
| Server state | TanStack Query |
| HTTP client | Axios |
- Node.js 20 or later
- npm
- An OpenAI API key (once AI search is implemented)
- A PostgreSQL database (once the Prisma schema is built out)
# 1. Clone the repository
git clone https://github.com/phiwakonkem/ShopChain.git
cd ShopChain
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run devThe app will be running at http://localhost:3000. No environment variables or database are required yet to browse the current mock-data pages.
# Once AI search is implemented:
OPENAI_API_KEY="sk-..."
# Once the Prisma schema is built out:
DATABASE_URL="postgresql://user:password@host/dbname?sslmode=require"ShopChain/
├── prisma/
│ └── schema.prisma # currently boilerplate — no models defined yet
├── src/
│ └── app/
│ ├── page.tsx # Landing page
│ ├── products/ # Product listing with mock data
│ ├── search/ # Search page
│ └── layout.tsx
└── public/
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build for production |
npm run start |
Run the production build |
npm run lint |
Run ESLint |
- Model the Prisma schema (Product, Category, Order, User)
- Build the
/api/searchroute using the OpenAI SDK for natural-language product matching - Replace mock product data with real database-backed data
- Implement checkout/payment flow
Phiwakonke Mthethwa — Full-Stack Developer, South Africa GitHub · LinkedIn · phiwakonkem@gmail.com
MIT