# 🚀 Full Stack TypeScript Template

Ein modernes Full Stack Template mit React Frontend und Express Backend, komplett containerisiert mit Docker.

## 📋 Übersicht

- **Frontend**: React 18 + TypeScript + Create React App
- **Backend**: Express.js + TypeScript + Node.js
- **Database**: PostgreSQL 15
- **Container**: Docker + Docker Compose
- **Development**: Hot Reload für Frontend & Backend
- **CI/CD**: Woodpecker CI Ready

## 🛠️ Voraussetzungen

- Node.js >= 18.0.0
- npm >= 9.0.0
- Docker & Docker Compose

## 📦 Installation

### 1. Repository klonen

```bash
git clone <repository-url>
cd fullstack-typescript-template
```

### 2. Dependencies installieren

```bash
npm run install:all
```

## 🏃‍♂️ Development

### Lokale Entwicklung (ohne Docker)

```bash
# Alle Services starten
npm run dev

# Einzeln starten
npm run dev:backend    # Backend auf Port 3001
npm run dev:frontend   # Frontend auf Port 3000

# Development-Prozesse beenden
npm run kill:dev
```

### Mit Docker (empfohlen)

```bash
# Development mit Hot Reload
npm run docker:dev

# Production-ähnliche Umgebung
npm run docker:prod

# Services stoppen
npm run docker:down
```

## 🐳 Docker Commands

### Build & Start

```bash
npm run docker:build    # App Image erstellen
npm run docker:up       # Services im Hintergrund starten
npm run docker:dev      # Development-Modus mit Rebuild
npm run docker:prod     # Production-Modus
```

### Management

```bash
npm run docker:stop     # Services stoppen (Container bleiben)
npm run docker:down     # Services stoppen + Container entfernen
npm run docker:restart  # Services neustarten
```

### Logs & Debugging

```bash
npm run docker:logs     # Alle Logs anzeigen
npm run docker:logs:app # Nur App-Logs
npm run docker:logs:db  # Nur Datenbank-Logs
```

### Cleanup

```bash
npm run docker:clean    # Alles aufräumen (Volumes, Container, Images)
```

### Manuelle Docker Commands

```bash
# Image bauen
docker build -t fullstack-app .

# Services starten
docker-compose up -d

# Logs verfolgen
docker-compose logs -f

# Services stoppen
docker-compose down
```

## 🏗️ Build

### Development Build

```bash
npm run build           # Frontend + Backend
npm run build:frontend  # Nur Frontend
npm run build:backend   # Nur Backend
```

### Production Build

```bash
# Mit Docker (empfohlen)
npm run docker:prod

# Manuell
npm run build
NODE_ENV=production npm start
```

## 🧪 Testing

```bash
npm run test            # Alle Tests
npm run test:frontend   # Frontend Tests
npm run test:backend    # Backend Tests
```

## 🧹 Cleanup

```bash
npm run clean           # Alle node_modules & Build-Ordner
npm run clean:build     # Nur Build-Ordner
npm run docker:clean    # Docker Cleanup
```

## 🌍 Environment Variables

Erstelle eine `.env` Datei im Root-Verzeichnis:

```bash
# Database
POSTGRES_DB=appdb
POSTGRES_USER=postgres
POSTGRES_PASSWORD=secure-password-change-this
DATABASE_URL=postgresql://postgres:secure-password-change-this@postgres:5432/appdb

# App
NODE_ENV=development
JWT_SECRET=your-jwt-secret-change-this

# Ports
APP_PORT=3000
POSTGRES_PORT=5432
```

## 📡 Ports

- **Frontend**: http://localhost:3000
- **Backend**: http://localhost:3001
- **Database**: localhost:5432

## 🏗️ Projekt-Struktur

```
├── 📁 frontend/          # React App
│   ├── 📁 src/
│   ├── 📁 public/
│   └── 📄 package.json
├── 📁 backend/           # Express API
│   ├── 📁 src/
│   └── 📄 package.json
├── 📁 scripts/           # Helper Scripts
│   └── 🔧 kill-dev-processes.sh
├── 🐳 docker-compose.yml
├── 🐳 Dockerfile
├── ⚙️ .woodpecker.yml    # CI/CD
└── 📦 package.json       # Root Package
```

## 🔧 VS Code Tasks

Das Template enthält vorkonfigurierte VS Code Tasks:

- `🖥️ Backend` - Backend im Watch-Modus starten
- `🌐 Frontend` - Frontend starten
- `🛑 Terminate All Development Processes` - Alle Dev-Prozesse beenden
- `📊 Show Development Processes Status` - Status anzeigen

Öffne die Command Palette (`Ctrl+Shift+P`) und tippe "Tasks: Run Task".

## 🚢 Deployment

### Mit Docker (empfohlen)

```bash
# Production Image erstellen
docker build -t fullstack-app .

# Mit Environment-Variablen starten
NODE_ENV=production npm run docker:prod
```

### CI/CD mit Woodpecker

Das Template ist ready für Woodpecker CI. Konfiguration in `.woodpecker.yml`.

## 🤝 Development Workflow

1. **Development starten**: `npm run docker:dev`
2. **Code ändern**: Hot Reload ist aktiv
3. **Tests ausführen**: `npm run test`
4. **Build testen**: `npm run build`
5. **Production testen**: `npm run docker:prod`
6. **Cleanup**: `npm run docker:clean`

## 📝 Troubleshooting

### Port bereits belegt

```bash
npm run kill:dev
npm run docker:down
```

### Docker Problems

```bash
npm run docker:clean
docker system prune -a
```

### Development-Prozesse hängen

```bash
./scripts/kill-dev-processes.sh
```

## 📄 License

[MIT](LICENSE)