This project is a simple Vue.js application that utilizes the Open Food Facts API to fetch product information. It uses Vite as a build tool and a Node.js backend for potential future functionalities.
-
Prerequisites:
- Node.js and npm (or yarn) installed on your system ([URLnodejs org])
-
Clone the repository:
git clone https://github.com/csehg0312/FoodFactsApp.git
-
Install dependencies:
cd FoodFactsApp npm install
-
Run the development server:
npm run dev
This will start the development server at http://localhost:5173 by default.
FoodFactsApp/
├── public/ # Static assets for the application
│ └── index.html # Main HTML file
├── src/ # Source code for the Vue application
│ ├── App.vue # Main application component
│ ├── components/ # Reusable UI components
│ │ ├── BarcodeReader.vue # Example component for inputs
│ │ └─ DataVisualizer.vue # Example component for displaying product information
│ └── main.js # Vue application entry point
├── package.json # Project dependencies and scripts
├── README.md # This file
└── vite.config.js # Vite configuration file
Open http://localhost:5173 in your web browser. You should see a basic interface for searching and displaying product information from the Open Food Facts API.
Current functionalities might be limited (depending on implementation) but could include:
- Searching for products by name or barcode.
- Displaying basic product information like name, brand, category, and ingredients.
For development, changes made to the source code will be reflected automatically in the browser thanks to Vite's hot module replacement.
For deployment, you can build the application for production using the following command:
npm run build
This will create an optimized production build in the dist
folder, which can be deployed to a web server.
- This is a basic setup and functionalities might need further implementation.
- Consider adding error handling and user feedback mechanisms.
- Refer to the official documentation for Vue.js (https://vuejs.org/guide/introduction), Vite (https://vitejs.dev/guide/), Open Food Facts API (https://world.openfoodfacts.org/files/api-documentation.html), and Node.js ([URLnodejs org]) for further details and learning resources.