Shopulse is a research-driven e-commerce prototype developed as part of the thesis An Explorative Study on User Behaviors with LLM-powered CUI and with GUI. The project explores the impact of Conversational User Interfaces (CUI), Graphical User Interfaces (GUI), and Hybrid UIs on user experience in online shopping.
- Conversational UI: Integrates an AI chatbot (OpenAI’s Assistant API) to help users find relevant products, explain technical details, and compare multiple items.
- Hybrid UI: A dual-pane layout with AI chat on the left and product listings on the right, where the right panel dynamically updates with product details, seamlessly integrating AI-driven assistance with a familiar e-commerce browsing experience.
- Server-Sent Events (SSE): Implements live chat updates to keep interactions responsive without constant page reloading.
- Context-Aware Responses: The chatbot refines its suggestions and explanations based on conversation history and user inputs.
- Web Scraper (Puppeteer): Collects product information from Amazon and Walmart, storing the data in MongoDB.
- Search & Filtering: Offers keyword-based and chatbot-driven search, along with basic filtering options for user convenience.
- Infrastructure as Code (Terraform): Automates resource provisioning and management, making deployments more consistent and easier to maintain.
- AWS Integration: Utilizes AWS EC2, CloudFront, S3, and ELB for hosting, content delivery, and load balancing.
- Tested by 106 Users: While not a large-scale commercial release, the system was tried by a diverse group of participants. Feedback indicated general ease of use and appreciation for the option to interact via conversation or traditional browsing.
| Category | Technologies |
|---|---|
| Frontend | React.js, Vite, Tailwind CSS |
| Backend | Node.js, Express.js, MongoDB |
| AI & NLP | OpenAI GPT-4o-mini, OpenAI Assistant API |
| Web Scraper | Puppeteer |
| Cloud Services | EC2, CloudFront, S3, ELB, ACM |
Before running the project, ensure your system meets the following requirements:
This project requires Node.js 18+. Download from: Node.js Official Site
Check your installation:
node -v
npm -vWe recommend yarn for the frontend. Install it globally if you haven’t:
npm install -g yarnSet up MongoDB locally or use MongoDB Atlas:
- Download MongoDB
- Start MongoDB:
mongod
Create an OpenAI account and obtain an API key:
🔗 Get OpenAI API Key
git clone https://github.com/minchenlee/Thesis.git
cd shopulseCreate the required .env files in the respective directories:
MONGODB_URL="your-mongodb-url"
OPENAI_API_KEY="your-openai-api-key"
OPENAI_ASSISTANT_ID="your-openai-assistant-id"
PORT=3000VITE_API_BASE_URL=http://localhost:3000MONGODB_URL="your-mongodb-url"Run the following commands inside each directory:
cd backend
npm installcd frontend
yarn installcd crawler
npm installYou can either:
✅ Use the Web Scraper to collect real-time product data from Amazon and Walmart
or
✅ Load Sample Data from backend/sample.json into MongoDB
You should notice that this project use the Altas's text search, so you need to create search index first on your Altas's cluster.
Create Search Index
Start the backend and frontend servers:
npm startyarn run devThe prototype is deployed and accessible through the following links. The site will request a Prolific ID (a unique user identifier)—you can enter any string.
| Interface Type | Live Demo | Preview |
|---|---|---|
| Conversational UI (CUI) | 🔗 View Here |  |
| Graphical UI (GUI) | 🔗 View Here |  |
| Hybrid UI | 🔗 View Here |  |
This project is for research purposes and is licensed under MIT License.