{"id":28517599,"url":"https://github.com/nvhnam/trafficshop","last_synced_at":"2026-04-14T05:31:31.432Z","repository":{"id":261896365,"uuid":"869715900","full_name":"nvhnam/TrafficShop","owner":"nvhnam","description":"Online Grocery Platform with food data from OpenFoodFacts dataset using ReactJS, ExpressJS, MySQL, LangChainJS","archived":false,"fork":false,"pushed_at":"2025-06-15T07:08:08.000Z","size":5792,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-06T01:36:29.044Z","etag":null,"topics":["chartjs","expressjs","food","fullstack","gemeni","grocery-store","kaggle-dataset","langchain","langchain-js","mysql","nodejs","openfoodfacts","reactjs","tailwindcss","traffic-light","trafficshop","vercel"],"latest_commit_sha":null,"homepage":"https://traffic-shop.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nvhnam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-08T19:03:00.000Z","updated_at":"2025-06-15T07:08:12.000Z","dependencies_parsed_at":"2024-12-17T19:35:36.041Z","dependency_job_id":"d216c4c0-9271-4f01-9a8d-33e18d9fec32","html_url":"https://github.com/nvhnam/TrafficShop","commit_stats":null,"previous_names":["nvhnam/foodvisualizer","nvhnam/nutriguiding","nvhnam/trafficshop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nvhnam/TrafficShop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvhnam%2FTrafficShop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvhnam%2FTrafficShop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvhnam%2FTrafficShop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvhnam%2FTrafficShop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nvhnam","download_url":"https://codeload.github.com/nvhnam/TrafficShop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvhnam%2FTrafficShop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31532291,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","expressjs","food","fullstack","gemeni","grocery-store","kaggle-dataset","langchain","langchain-js","mysql","nodejs","openfoodfacts","reactjs","tailwindcss","traffic-light","trafficshop","vercel"],"created_at":"2025-06-09T05:08:57.728Z","updated_at":"2026-04-07T22:32:17.790Z","avatar_url":"https://github.com/nvhnam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛒 TrafficShop\n\nTrafficShop 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.\n\n---\n\n## ✨ Project Highlights  \n\n- **Four visualization modes** on each product: Traffic Light Labels, Bar Charts, Pie Charts, Polar Charts  \n- **Behavioral impact study** showing the presence of traffic-light labels reduce unhealthy nutrient selections  \n- **Integrated AI assistant** for personalized nutrition suggestions, automatic product filtering, and Q\u0026A  \n- **Empirical user studies** (N=24, 22, 21) demonstrating perceived usefulness, usability (SUS = 77.4), and high AI helpfulness  \n- **Prototype built** with React.js frontend, Node.js/Express.js backend and MySQL database\n\n---\n\n## 📚 Publication  \n\n- **\"TrafficShop: Designing Visual Nutrition Support with AI Assistance for Online Grocery Shoppers in Vietnam\"**  \n- Submitting to *International Journal of Human-Computer Studies*.  \n- Traffic-light labels \u0026 AI assistant evaluated across three user studies\n- Empirical evidence on visualization preferences, behavioral influence, and UX implications\n\n---\n\n## 👨‍💻 Contributors\n\n- **Nguyen Viet Hoang Nam** (Project Lead, Web Developer, Data Processing)   \n- **Tran Bao Tu** (UI/UX Designer, Poster, Slides Creator)  \n- **Nguyen Song Huy** (AI Integration)  \n- **Dr. Vi Chi Thanh** (Research Supervisor \u0026 Guidance)   \n\n---\n\n## 🧠 Technologies Used\n\n| Area               | Tech Stack                                              |\n|--------------------|---------------------------------------------------------|\n| Visualization      | React.js, Chart.js, Bootstrap                           |\n| AI \u0026 Backend       | Node.js, Express, LangChain, Gemini                     |\n| Data Processing    | Pandas, NumPy, Open Food Facts Dataset                  |\n| Deployment \u0026 Tools | GitHub, Vercel, FilessIO (DB)                           |\n\n---\n\n## 📦 Data Source \n\n- Nutritional and product metadata from **Open Food Facts** dataset on Kaggle\n\n---\n\n## ⭐ Support This Project\n\nIf **TrafficShop** inspires your work or study:\n\n- 🌟 Please consider giving this repository a **star** on [GitHub](https://github.com/nvhnam/TrafficShop).\n- 📄 Cite our upcoming paper in your research (updating)\n- 📨 Contribute ideas or fork \u0026 PR improvements\n\n\u003e 🆓 The **TrafficShop** is free to use for research and educational purposes **with proper citation**. Commercial use or redistribution is **not permitted**.\n\n---\n\n## 🚀 Features\n\n- 🖼️ **Product Pages** with four nutrition visualizations  \n- 🧠 **AI Assistant** for:\n  - Personalized daily nutrient recommendations  \n  - Automatic product filtering by suggested food groups  \n  - Natural-language Q\u0026A on any product  \n- ⚡ **Real-time interaction** and smooth, mobile-friendly UI  \n- 🔍 **Behavioral insights** captured via the analyzed SUS and user studies  \n\n---\n\n## 🛠️ Getting Started\n\n### Clone \u0026 install\n\u003cpre\u003e\ngit clone https://github.com/nvhnam/TrafficShop.git\ncd TrafficShop\n\u003c/pre\u003e  \n\n### Import the sample data\nMake sure you have MySQL running, then create a database and load the SQL dump: \n\u003cpre\u003e\n# in your MySQL client shell\nCREATE DATABASE TrafficShop;\nEXIT;\n# back in your terminal\nmysql -u your_user -p TrafficShop \u003c datafood/openfood.sql\n\u003c/pre\u003e\n\n### Start the backend (Node.js / Express)\n\u003cpre\u003e\ncd server\nnpm install\n# configure your .env with DB credentials and any API keys\nnpm start          \n\u003c/pre\u003e\n   \n### Start the frontend (React.js)   \n\u003cpre\u003e\ncd ../client\nnpm install\nnpm start\n\u003c/pre\u003e\n\n---\n\n## 📈 Future Work\n\n- Mobile \u0026 AR integration for on-the-go nutrient overlays\n- Expanded local database with authentic Vietnamese product labels\n- Longitudinal field study in real e-commerce platforms\n- Enhanced AI: deeper personalization, voice interface, multilingual support\n\n---\n\n## 📩 Contact\n\nFor questions or collaborations:\n\n- 📧 Email: nvhnam01@gmail.com\n- 👨‍💻 Portfolio: https://nguyenviethoangnam.vercel.app/\n- 📝 LinkedIn: https://www.linkedin.com/in/nvhnam01/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnvhnam%2Ftrafficshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnvhnam%2Ftrafficshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnvhnam%2Ftrafficshop/lists"}