# Social Media Klon Projekt - Frontend (Lernprojekt)

Dieses Projekt ist die sichtbare Weboberfläche (Frontend) eines kleinen Instagram-Klons.

Zielgruppe: Menschen, die sich für Informatik interessieren und sich bewerben möchten, auch wenn sie noch wenig Programmiererfahrung haben.

## Was macht das Frontend?

Das Frontend zeigt Seiten wie:
- Login / Registrierung
- Home-Feed mit Posts
- Profilseite
- Post erstellen

Wichtig: Das Frontend speichert die Daten **nicht selbst dauerhaft**. Es fragt Daten beim Backend ab und sendet Änderungen dorthin.

## Backend + Swagger

Das Backend stellt eine REST-API bereit.

Swagger-Dokumentation (alle Endpunkte sichtbar):
- https://instagram-backend.sunrise-avengers.ch/swagger-ui/index.html

In Swagger kann man sehen:
- welche URL ein Endpunkt hat
- ob es `GET`, `POST`, `PUT` oder `DELETE` ist
- welche Daten man senden muss
- welche Antwort zurückkommt

## Wie werden Daten genau geholt?

### 1. Frontend startet
In React-Komponenten (z. B. Home, Profile) wird beim Laden eine Anfrage ausgelöst.

Beispiel:
- Home lädt alle Posts mit `GET /api/posts`

### 2. Anfrage geht an das Backend
Die zentrale Funktion dafür ist [`src/api.js`](src/api.js).

Sie macht intern:
- Basis-URL aus `.env` lesen (`REACT_APP_API_URL`)
- `fetch(...)` aufrufen
- Header setzen (`Content-Type: application/json`)
- falls vorhanden: JWT-Token als `Authorization: Bearer <token>` mitsenden

### 3. Backend antwortet
- Bei Erfolg kommt JSON zurück (z. B. Liste von Posts)
- Bei Fehler wird eine Fehlermeldung erzeugt, die im Frontend angezeigt werden kann

### 4. React zeigt die Daten an
Die Antwort wird in `state` gespeichert (`useState`) und dann im UI gerendert.

## REST kurz erklärt

REST ist ein Standard, wie Frontend und Backend über HTTP sprechen.

Typische Methoden:
- `GET`: Daten lesen
- `POST`: neue Daten erstellen
- `PUT`: bestehende Daten ändern
- `DELETE`: Daten löschen

Beispiele aus diesem Projekt:
- `POST /api/auth/login` -> Benutzer anmelden
- `GET /api/posts` -> alle Posts laden
- `POST /api/posts` -> neuen Post erstellen
- `DELETE /api/posts/{id}` -> Post löschen

## Login und Token (sehr wichtig)

Nach erfolgreichem Login bekommt das Frontend ein JWT-Token vom Backend.

Dieses Token wird in `localStorage` gespeichert:
- `token`
- `user`

Bei späteren API-Aufrufen wird das Token automatisch im Header mitgeschickt.
So weiss das Backend, welcher Benutzer die Anfrage sendet.

## Projekt lokal starten

Voraussetzungen:
- Node.js installiert
- npm installiert

Schritte:
1. In den Frontend-Ordner wechseln
2. Abhängigkeiten installieren
3. Entwicklungsserver starten

```bash
cd instagram-frontend
npm install
npm start
```

Dann im Browser öffnen:
- http://localhost:3000

## `.env` (API-URL)

In der Datei `.env` kann die Backend-URL gesetzt werden:

```env
REACT_APP_API_URL=https://instagram-backend.sunrise-avengers.ch
```

Wenn nichts gesetzt ist, nutzt das Projekt standardmässig:
- `http://localhost:8080`

## Wichtige Dateien im Frontend

- `src/api.js` -> zentrale REST-Kommunikation
- `src/App.js` -> Routing und Login-Status
- `src/components/Home/Home.js` -> Feed + Likes + Kommentare
- `src/components/Profile/Profile.js` -> eigenes Profil
- `src/components/Create Post/CreatePost.js` -> neuen Post anlegen
- `src/components/Login/Login.js` -> Login/Registrierung