Food Facts App Product Browser

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.

Getting Started

1. Prerequisites:

   • Node.js and npm (or yarn) installed on your system ([URLnodejs org])

2. Clone the repository:

   git clone https://github.com/csehg0312/FoodFactsApp.git

3. Install dependencies:

   cd FoodFactsApp
   npm install

4. Run the development server:

   npm run dev

   This will start the development server at http://localhost:5173 by default.

Project Structure

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

Using the Application

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.

Development

For development, changes made to the source code will be reflected automatically in the browser thanks to Vite's hot module replacement.

Deployment

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.

Additional Notes

• 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.