A professional web application for estimating carbon footprints using AI-powered image analysis. Built with Vite, React, Material UI, Firebase, and OpenAI.

• 🌱 AI-Powered Analysis: Uses OpenAI's GPT-4 Vision to analyze images and estimate carbon footprints
• 🎨 Professional UI: Built with Material UI for a polished, modern interface
• 📤 Image Upload: Simple drag-and-drop or click-to-upload functionality
• 🔥 Firebase Integration: Ready for cloud storage and backend services
• ⚡ Vite: Lightning-fast development with Hot Module Replacement (HMR)
• 📊 Detailed Results: Get CO2 estimates, categories, and actionable recommendations

• Node.js (v18 or higher)
• npm or yarn
• OpenAI API key (for carbon footprint analysis)
• Firebase project (optional, for storage features)

1. Clone the repository

   git clone https://github.com/gnimnix/ing2030-prototype.git
   cd ing2030-prototype

2. Install dependencies

   npm install

3. Configure environment variables

   Copy the .env.example file to .env:

   cp .env.example .env

   Then edit .env and add your API keys:

   VITE_OPENAI_API_KEY=your_openai_api_key_here
   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id

4. Run the development server

   npm run dev

   The app will be available at http://localhost:5173

npm run build

The built files will be in the dist directory.

1. Open the application in your browser
2. Click on the upload area or drag and drop an image
3. Click "Analyze Carbon Footprint" to get AI-powered insights
4. Review the estimated CO2 emissions, category, and recommendations

• Frontend Framework: React 19 with TypeScript
• Build Tool: Vite 7 (latest)
• UI Library: Material UI (MUI)
• AI Backend: OpenAI GPT-4 Vision API
• Cloud Services: Firebase (Storage, Auth)
• Styling: Emotion (CSS-in-JS)

src/
├── components/         # React components
│   └── ImageUpload.tsx # Main image upload and analysis component
├── config/            # Configuration files
│   └── firebase.ts    # Firebase configuration
├── services/          # API services
│   └── carbonEstimation.ts # OpenAI integration for carbon analysis
├── App.tsx            # Main app component
├── main.tsx          # Application entry point
└── index.css         # Global styles

⚠️ Important: The current implementation uses dangerouslyAllowBrowser: true for the OpenAI client. This is for development/prototype purposes only. For production:

1. Create a backend API endpoint
2. Keep your OpenAI API key on the server
3. Have the frontend call your backend, which then calls OpenAI
4. Never expose API keys in client-side code

Contributions are welcome! Please feel free to submit a Pull Request.

This project is part of the ING 2030 initiative.