# Schnellstart

## Voraussetzungen

1. **Node.js herunterladen**: [nodejs.org](https://nodejs.org) - LTS-Version installieren
2. **VSCode herunterladen**: [code.visualstudio.com](https://code.visualstudio.com) - Stabile Version installieren

[ZIP herunterladen](https://github.com/Growheads-de/shopFrontEnd/archive/refs/heads/live.zip) 

Entpacken & Doppelklick auf `start-dev-seedheads.bat` - das Skript wird:
- Abhängigkeiten automatisch installieren falls nötig
- Entwicklungsserver mit API-Proxy zu seedheads.de starten
- Browser öffnen auf http://localhost:9500

## Socket Connection Optimization

The application uses Socket.IO for real-time communication with the server. To improve initial loading performance, sockets are now connected lazily:

- Sockets are created with `autoConnect: false` and only establish a connection when:
  - The first `emit` is called on the socket
  - An explicit connection is requested via the context methods

### Usage

```jsx
// In a component
import React, { useContext, useEffect } from 'react';
import SocketContext from '../contexts/SocketContext';
import { emitAsync } from '../utils/socketUtils';

const MyComponent = () => {
  const { socket, socketB } = useContext(SocketContext);
  
  useEffect(() => {
    // The socket will automatically connect when emit is called
    socket.emit('someEvent', { data: 'example' });
    
    // Or use the utility for Promise-based responses
    emitAsync(socket, 'getData', { id: 123 })
      .then(response => console.log(response))
      .catch(error => console.error(error));
  }, [socket]);
  
  return <div>My Component</div>;
};
```

### Benefits

- Reduced initial page load time
- Connections established only when needed
- Automatic fallback to polling if WebSocket fails
- Promise-based utilities for easier async/await usage