https://github.com/nvhnam/trafficshop
Online Grocery Platform with food data from OpenFoodFacts dataset using ReactJS, ExpressJS, MySQL, LangChainJS
https://github.com/nvhnam/trafficshop
chartjs expressjs food fullstack gemeni grocery-store kaggle-dataset langchain langchain-js mysql nodejs openfoodfacts reactjs tailwindcss traffic-light trafficshop vercel
Last synced: 3 months ago
JSON representation
Online Grocery Platform with food data from OpenFoodFacts dataset using ReactJS, ExpressJS, MySQL, LangChainJS
- Host: GitHub
- URL: https://github.com/nvhnam/trafficshop
- Owner: nvhnam
- License: agpl-3.0
- Created: 2024-10-08T19:03:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-15T07:08:08.000Z (about 1 year ago)
- Last Synced: 2025-07-06T01:36:29.044Z (12 months ago)
- Topics: chartjs, expressjs, food, fullstack, gemeni, grocery-store, kaggle-dataset, langchain, langchain-js, mysql, nodejs, openfoodfacts, reactjs, tailwindcss, traffic-light, trafficshop, vercel
- Language: JavaScript
- Homepage: https://traffic-shop.vercel.app
- Size: 5.52 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🛒 TrafficShop
TrafficShop is an online grocery platform that integrates **visual nutrition labeling** and an **AI assistant** to help Vietnamese online grocery shoppers make healthier, more informed choices. Building on user-centered design and AI, TrafficShop combines traffic-light nutrient labels with a conversational agent for personalized guidance.
---
## ✨ Project Highlights
- **Four visualization modes** on each product: Traffic Light Labels, Bar Charts, Pie Charts, Polar Charts
- **Behavioral impact study** showing the presence of traffic-light labels reduce unhealthy nutrient selections
- **Integrated AI assistant** for personalized nutrition suggestions, automatic product filtering, and Q&A
- **Empirical user studies** (N=24, 22, 21) demonstrating perceived usefulness, usability (SUS = 77.4), and high AI helpfulness
- **Prototype built** with React.js frontend, Node.js/Express.js backend and MySQL database
---
## 📚 Publication
- **"TrafficShop: Designing Visual Nutrition Support with AI Assistance for Online Grocery Shoppers in Vietnam"**
- Submitting to *International Journal of Human-Computer Studies*.
- Traffic-light labels & AI assistant evaluated across three user studies
- Empirical evidence on visualization preferences, behavioral influence, and UX implications
---
## 👨💻 Contributors
- **Nguyen Viet Hoang Nam** (Project Lead, Web Developer, Data Processing)
- **Tran Bao Tu** (UI/UX Designer, Poster, Slides Creator)
- **Nguyen Song Huy** (AI Integration)
- **Dr. Vi Chi Thanh** (Research Supervisor & Guidance)
---
## 🧠 Technologies Used
| Area | Tech Stack |
|--------------------|---------------------------------------------------------|
| Visualization | React.js, Chart.js, Bootstrap |
| AI & Backend | Node.js, Express, LangChain, Gemini |
| Data Processing | Pandas, NumPy, Open Food Facts Dataset |
| Deployment & Tools | GitHub, Vercel, FilessIO (DB) |
---
## 📦 Data Source
- Nutritional and product metadata from **Open Food Facts** dataset on Kaggle
---
## ⭐ Support This Project
If **TrafficShop** inspires your work or study:
- 🌟 Please consider giving this repository a **star** on [GitHub](https://github.com/nvhnam/TrafficShop).
- 📄 Cite our upcoming paper in your research (updating)
- 📨 Contribute ideas or fork & PR improvements
> 🆓 The **TrafficShop** is free to use for research and educational purposes **with proper citation**. Commercial use or redistribution is **not permitted**.
---
## 🚀 Features
- 🖼️ **Product Pages** with four nutrition visualizations
- 🧠 **AI Assistant** for:
- Personalized daily nutrient recommendations
- Automatic product filtering by suggested food groups
- Natural-language Q&A on any product
- ⚡ **Real-time interaction** and smooth, mobile-friendly UI
- 🔍 **Behavioral insights** captured via the analyzed SUS and user studies
---
## 🛠️ Getting Started
### Clone & install
git clone https://github.com/nvhnam/TrafficShop.git
cd TrafficShop
### Import the sample data
Make sure you have MySQL running, then create a database and load the SQL dump:
# in your MySQL client shell
CREATE DATABASE TrafficShop;
EXIT;
# back in your terminal
mysql -u your_user -p TrafficShop < datafood/openfood.sql
### Start the backend (Node.js / Express)
cd server
npm install
# configure your .env with DB credentials and any API keys
npm start
### Start the frontend (React.js)
cd ../client
npm install
npm start
---
## 📈 Future Work
- Mobile & AR integration for on-the-go nutrient overlays
- Expanded local database with authentic Vietnamese product labels
- Longitudinal field study in real e-commerce platforms
- Enhanced AI: deeper personalization, voice interface, multilingual support
---
## 📩 Contact
For questions or collaborations:
- 📧 Email: nvhnam01@gmail.com
- 👨💻 Portfolio: https://nguyenviethoangnam.vercel.app/
- 📝 LinkedIn: https://www.linkedin.com/in/nvhnam01/