Team Chat - Internal Chat Application with Code Snippet Library

Eine vollständige interne Chat-Anwendung ähnlich Microsoft Teams mit integrierter Code-Snippet-Bibliothek.

Features

Chat-Funktionen

• ✅ Benutzerregistrierung und JWT-Authentifizierung
• ✅ Abteilungs- und Kanal-Management
• ✅ Echtzeit-Chat über WebSockets
• ✅ Datei-Uploads (bis 20 MB)
• ✅ Zugriffskontrolle basierend auf Abteilungszugehörigkeit

Code-Snippet-Bibliothek

• ✅ CRUD-Operationen für Code-Snippets
• ✅ Sichtbarkeit: Private, Abteilung, Organisation
• ✅ Filter nach Sprache, Tags, Volltext-Suche
• ✅ Integration in Chat-Nachrichten
• ✅ Syntax-Highlighting für Code-Blöcke

UI/UX

• ✅ Light/Dark-Theme mit Toggle
• ✅ Responsive Design mit Tailwind CSS
• ✅ Microsoft Teams-ähnliches Layout
• ✅ React + TypeScript Frontend

Tech Stack

Backend:

• Python 3.11
• FastAPI
• PostgreSQL 17
• SQLModel (ORM)
• JWT Authentication
• WebSockets
• pytest

Frontend:

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Axios

Projektstruktur

.
├── backend/
│   ├── app/
│   │   ├── main.py              # FastAPI App
│   │   ├── config.py            # Konfiguration
│   │   ├── database.py          # DB Setup
│   │   ├── models.py            # SQLModel Modelle
│   │   ├── schemas.py           # Pydantic Schemas
│   │   ├── auth.py              # JWT Auth
│   │   ├── websocket.py         # WebSocket Manager
│   │   └── routers/
│   │       ├── auth.py          # Auth Endpoints
│   │       ├── departments.py   # Abteilungen
│   │       ├── channels.py      # Kanäle
│   │       ├── messages.py      # Nachrichten
│   │       ├── files.py         # Datei-Uploads
│   │       ├── snippets.py      # Code-Snippets
│   │       └── websocket.py     # WebSocket Endpoint
│   ├── tests/                   # pytest Tests
│   ├── requirements.txt
│   ├── .env.example
│   └── Dockerfile
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Auth/            # Login/Register
│   │   │   ├── Chat/            # Chat-Komponenten
│   │   │   ├── Snippets/        # Snippet-Bibliothek
│   │   │   └── Layout/          # Layout & Navigation
│   │   ├── contexts/            # React Contexts (Auth, Theme)
│   │   ├── services/            # API Services
│   │   ├── types/               # TypeScript Types
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── package.json
│   └── Dockerfile
└── docker-compose.yml

Installation & Start

Voraussetzungen

• Docker & Docker Compose ODER
• Python 3.11, Node.js 18, PostgreSQL 17

Option 1: Mit Docker (empfohlen)

# Projekt klonen
cd /home/OfficeDesk

# Starten
docker-compose up -d

# Backend läuft auf: http://localhost:8000
# Frontend läuft auf: http://localhost:5173
# API Docs: http://localhost:8000/docs

Option 2: Manuell

Backend:

cd backend

# Virtuelle Umgebung erstellen
python -m venv venv
source venv/bin/activate  # Linux/Mac
# oder: venv\Scripts\activate  # Windows

# Dependencies installieren
pip install -r requirements.txt

# .env Datei erstellen
cp .env.example .env
# Anpassen: DATABASE_URL mit deiner PostgreSQL-Connection

# Datenbank erstellen (PostgreSQL 17)
createdb teamchat
createdb teamchat_test

# Server starten
uvicorn app.main:app --reload

# Server läuft auf: http://localhost:8000

Frontend:

cd frontend

# Dependencies installieren
npm install

# Dev-Server starten
npm run dev

# Frontend läuft auf: http://localhost:5173

Verwendung

1. Ersten Benutzer registrieren

# Via UI: http://localhost:5173/register
# Oder via API:
curl -X POST http://localhost:8000/auth/register \
  -H "Content-Type: application/json" \
  -d '{
    "username": "admin",
    "email": "admin@example.com",
    "password": "secure_password",
    "full_name": "Admin User"
  }'

2. Login

curl -X POST http://localhost:8000/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "username": "admin",
    "password": "secure_password"
  }'

# Response: {"access_token": "...", "token_type": "bearer"}

3. Abteilung erstellen

curl -X POST http://localhost:8000/departments/ \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "IT",
    "description": "IT Department"
  }'

4. Benutzer zu Abteilung hinzufügen

curl -X POST http://localhost:8000/departments/1/users/1 \
  -H "Authorization: Bearer YOUR_TOKEN"

5. Kanal erstellen

curl -X POST http://localhost:8000/channels/ \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "general",
    "description": "General discussion",
    "department_id": 1
  }'

6. Code-Snippet erstellen

curl -X POST http://localhost:8000/snippets/ \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "PostgreSQL Connection",
    "language": "python",
    "content": "import psycopg2\n\nconn = psycopg2.connect(...)",
    "tags": "python, postgresql, database",
    "visibility": "organization"
  }'

Tests ausführen

cd backend

# Alle Tests
pytest

# Mit Coverage
pytest --cov=app

# Spezifische Tests
pytest tests/test_auth.py
pytest tests/test_snippets.py -v

API Dokumentation

Interaktive API-Dokumentation:

• Swagger UI: http://localhost:8000/docs
• ReDoc: http://localhost:8000/redoc

Konfiguration

Backend (.env)

# Datenbank
DATABASE_URL=postgresql://user:password@localhost:5432/teamchat
TEST_DATABASE_URL=postgresql://user:password@localhost:5432/teamchat_test

# JWT
SECRET_KEY=your-secret-key-min-32-characters-long
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30

# File Upload
UPLOAD_DIR=./uploads
MAX_UPLOAD_SIZE=20971520  # 20 MB

# CORS
FRONTEND_URL=http://localhost:5173

Sicherheit

⚠️ Wichtig für Production:

• SECRET_KEY mit sicherem, zufälligem Wert ersetzen
• PostgreSQL-Passwort ändern
• HTTPS verwenden
• CORS-Origins einschränken
• Rate-Limiting implementieren

Features & Workflows

Snippet-Workflow

1. Snippet erstellen: Navigiere zu "Snippets" → "+ New"
2. Code eingeben: Title, Sprache, Code, Tags
3. Sichtbarkeit wählen: Private / Department / Organization
4. Snippet im Chat verwenden: Chat-Eingabe → 📋 Button → Snippet auswählen
5. Snippet-Nachricht senden: Snippet wird mit Code-Block angezeigt

Chat-Workflow

1. Abteilung beitreten: Admin fügt User zu Department hinzu
2. Kanäle sehen: Sidebar zeigt Kanäle der eigenen Abteilungen
3. Nachrichten senden: Text eingeben, optional Snippet oder Datei anhängen
4. Echtzeit-Updates: Neue Nachrichten erscheinen sofort via WebSocket

Annahmen & Design-Entscheidungen

1. Authentifizierung: JWT Bearer Tokens, 30 Min. Gültigkeit
2. Zugriffskontrolle:
   • Channel-Zugriff nur für Department-Mitglieder
   • Snippet-Sichtbarkeit: private < department < organization
3. Datei-Speicherung: Lokal im Filesystem (Upload-Dir konfigurierbar)
4. Tags: Einfache kommagetrennte Liste (keine separate Tabelle)
5. WebSocket: Ein Socket pro Channel, Token-Auth via Query-Parameter
6. Theme: Persistenz im LocalStorage, Client-seitig
7. Pagination: Messages mit limit/offset (Default: 50)
8. Tests: SQLite In-Memory-DB für Unit-Tests (schneller als PostgreSQL)

Troubleshooting

Problem: Backend startet nicht

# Prüfe PostgreSQL
pg_isready -h localhost -p 5432

# Prüfe Logs
docker-compose logs backend

Problem: Frontend verbindet nicht zum Backend

# Prüfe CORS-Einstellungen in backend/.env
# Prüfe Proxy in frontend/vite.config.ts

Problem: WebSocket-Verbindung schlägt fehl

# Prüfe Token im LocalStorage
# Prüfe Browser-Console auf Fehler
# WebSocket-URL: ws://localhost:8000/ws/{channel_id}?token={jwt_token}

Lizenz

Internes Projekt für [Firmenname]

Support

Bei Fragen: [Deine E-Mail oder Slack-Channel]