SNAPMARKT - PREISVERGLEICH APP
=========================

INHALTSVERZEICHNIS
-----------------
1. Projektübersicht
2. Hauptkomponenten
3. API-Integration
4. Styling
5. Features
6. Deployment

1. PROJEKTÜBERSICHT
------------------
Eine React-basierte Preisvergleichs-App für deutsche Supermärkte (Aldi, REWE, Lidl, Penny).
URL: peppy-mermaid-502b50.netlify.app (wird zu snapmarkt-marius-goldmann.netlify.app)

Hauptfunktionen:
- Preisvergleich zwischen Supermärkten
- Produktsuche
- Einkaufsliste
- Filtern nach Geschäften
- Preissortierung
- Maximale Ersparnis-Berechnung
- Mehrsprachigkeit (Deutsch/Englisch)
- Interaktives Tutorial

2. HAUPTKOMPONENTEN
------------------

App.js (Hauptkomponente):
```javascript
import React, { useState, useEffect } from 'react';
import './App.css';
import { searchProducts, formatPrice } from './services/supermarketApis';

// Übersetzungen
const translations = {
  de: {
    title: 'SnapMarkt Preisvergleich',
    subtitle: 'Finde die besten Preise in deiner Nähe',
    // ... weitere Übersetzungen
  },
  en: {
    title: 'SnapMarkt Price Comparison',
    subtitle: 'Find the best prices near you',
    // ... weitere Übersetzungen
  }
};

function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState({});
  const [loading, setLoading] = useState(false);
  const [selectedStores, setSelectedStores] = useState(['aldi', 'rewe', 'lidl', 'penny']);
  const [sortAscending, setSortAscending] = useState(true);
  const [shoppingList, setShoppingList] = useState([]);
  const [language, setLanguage] = useState('de');
  
  // ... weitere Implementierung
}
```

3. API-INTEGRATION
----------------

supermarketApis.js:
```javascript
import axios from 'axios';

const API_URL = 'https://snapmarkt-server.onrender.com';

// Mock-Daten für Supermärkte
const mockProducts = {
  'milch': {
    rewe: [
      { name: 'Weihenstephan Frische Milch 3.5%', price: 1.89, unit: '1L', image: '🥛' },
      { name: 'REWE Bio Vollmilch', price: 1.79, unit: '1L', image: '🥛' }
    ],
    aldi: [
      { name: 'Milsani Frische Vollmilch', price: 1.69, unit: '1L', image: '🥛' },
      { name: 'Milsani Bio-Vollmilch', price: 1.75, unit: '1L', image: '🥛' }
    ],
    // ... weitere Produkte
  },
  // ... weitere Kategorien
};

// Produktsuche
export const searchProducts = async (query) => {
  try {
    const searchTerm = query.toLowerCase();
    const results = {};
    if (mockProducts[searchTerm]) {
      Object.entries(mockProducts[searchTerm]).forEach(([store, products]) => {
        results[store] = products;
      });
    }
    return results;
  } catch (error) {
    console.error('Search failed:', error);
    return {};
  }
};
```

4. STYLING
---------

App.css:
```css
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #6C13D7 0%, #0968E5 100%);
  padding: 20px;
  color: white;
}

.search-container {
  margin-bottom: 20px;
}

.search-box {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px;
}

.product-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
}

// ... weitere Styles
```

5. FEATURES
----------

a) Preisvergleich:
```javascript
const calculateStoreComparison = () => {
  const storeTotals = {};
  let cheapestStore = null;
  let cheapestTotal = Infinity;
  let mostExpensiveStore = null;
  let mostExpensiveTotal = -Infinity;

  Object.entries(searchResults).forEach(([store, products]) => {
    if (!selectedStores.includes(store)) return;
    
    const total = Array.isArray(products) 
      ? products.reduce((sum, product) => sum + product.price, 0)
      : 0;
    
    storeTotals[store] = total;
    
    if (total < cheapestTotal && total > 0) {
      cheapestTotal = total;
      cheapestStore = store;
    }
    if (total > mostExpensiveTotal && total > 0) {
      mostExpensiveTotal = total;
      mostExpensiveStore = store;
    }
  });

  return { 
    storeTotals, 
    cheapestStore,
    mostExpensiveStore,
    maxSavings: mostExpensiveTotal - cheapestTotal
  };
};
```

b) Einkaufsliste:
```javascript
const addToShoppingList = (product, store) => {
  setShoppingList(prev => {
    const exists = prev.some(item => 
      item.name === product.name && item.store === store
    );
    
    if (!exists) {
      return [...prev, { ...product, store }];
    }
    return prev;
  });
};

const calculateTotalPrice = () => {
  return shoppingList.reduce((sum, item) => sum + item.price, 0);
};
```

c) Routenberechnung:
```javascript
const calculateOptimalRoute = () => {
  if (!userLocation || shoppingList.length === 0) return;

  const storeLocations = {
    aldi: { lat: userLocation.lat + 0.01, lng: userLocation.lng + 0.01 },
    rewe: { lat: userLocation.lat - 0.01, lng: userLocation.lng - 0.01 },
    lidl: { lat: userLocation.lat + 0.02, lng: userLocation.lng - 0.02 },
    penny: { lat: userLocation.lat - 0.02, lng: userLocation.lng + 0.02 }
  };

  const storesToVisit = [...new Set(shoppingList.map(item => item.store))];
  const route = storesToVisit.map(store => ({
    store,
    distance: Math.random() * 5,
    items: shoppingList.filter(item => item.store === store)
  }));

  setRouteInfo(route);
};
```

6. DEPLOYMENT
-----------

Die App ist auf Netlify deployed:
- Aktuelle URL: peppy-mermaid-502b50.netlify.app
- Zukünftige URL: snapmarkt-marius-.netlify.app

Deployment-Schritte:
1. Build der App: npm run build
2. Deployment auf Netlify über Git-Integration
3. Konfiguration der Umgebungsvariablen
4. Setup der Custom Domain

TECHNISCHE ANFORDERUNGEN
-----------------------
- Node.js v14 oder höher
- npm oder yarn als Paketmanager
- React v17 oder höher
- Moderne Browser mit ES6+ Unterstützung

INSTALLATION
-----------
1. Repository klonen
2. npm install ausführen
3. npm start für Entwicklungsserver
4. npm run build für Produktions-Build true