{"id":31807842,"url":"https://github.com/kosmaster87/lets-todo-app","last_synced_at":"2025-10-11T04:38:14.677Z","repository":{"id":314174817,"uuid":"1053746371","full_name":"KosMaster87/lets-todo-app","owner":"KosMaster87","description":"RESTful API für Todo-Management mit User- und Gast-Sessions, entwickelt mit Express.js und MariaDB.","archived":false,"fork":false,"pushed_at":"2025-10-02T22:30:30.000Z","size":387,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-03T00:18:08.838Z","etag":null,"topics":["cookies","developer-experience","environment","guest-experience","mariadb","nodejs","production-deployed","restful-api"],"latest_commit_sha":null,"homepage":"https://lets-todo.dev2k.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KosMaster87.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-09T21:49:42.000Z","updated_at":"2025-10-01T22:31:18.000Z","dependencies_parsed_at":"2025-09-11T02:26:54.975Z","dependency_job_id":"6131e704-e98b-4ccb-833e-ee445eb101b3","html_url":"https://github.com/KosMaster87/lets-todo-app","commit_stats":null,"previous_names":["kosmaster87/lets-todo-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KosMaster87/lets-todo-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2Flets-todo-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2Flets-todo-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2Flets-todo-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2Flets-todo-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KosMaster87","download_url":"https://codeload.github.com/KosMaster87/lets-todo-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KosMaster87%2Flets-todo-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006247,"owners_count":26084061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cookies","developer-experience","environment","guest-experience","mariadb","nodejs","production-deployed","restful-api"],"created_at":"2025-10-11T04:38:12.470Z","updated_at":"2025-10-11T04:38:14.670Z","avatar_url":"https://github.com/KosMaster87.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Let's Todo App - Frontend\n\n## 📲 Eine moderne Todo-App mit session\n\n```javascript\n// 📦 app.js - NUR Koordination und Modus-Management\nfunction todoApp() {\n  this.sessionManager = new SessionManager(); // Delegiert Session-Logik\n  this.apiClient = new ApiClient(); // Delegiert API-Logik\n\n  this.changeMode = function (mode) {\n    this.mode = mode;\n    this.buildUI(); // Koordiniert UI-Updates\n  };\n\n  this.printModeContent = function () {\n    UIRenderer.renderModeButtons(this.container, this.mode, this); // Delegiert UI-Rendering\n  };\n}\n\n\n// 📦 js/config/environment.js - NUR Environment-Management\nconst CONFIG = {\ndevelopment: { API*BASE: \"http://127.0.0.1:3000/api\", DEBUG: true },\nproduction: { API_BASE: \"https://lets-todo-api.dev2k.org/api\", DEBUG: false }\n};\n\nfunction detectEnvironment() { /* Automatische Detection \\_/ }\n\n/**\n * 📦 sessionManager.js - NUR Session-Verwaltung\n * Fizierung, die sowohl User- als auch Gast-Sessions unterstützt.\n * Das Frontend ist in Vanilla JavaScript entwickelt und kommuniziert über eine RESTful API mit dem Backend.\n * @param {} -\n * @returns {}\n */\nfunction SessionManager() {\nthis.validateSession = function (apiHandler) {…};\n};\n```\n\n## 🚀 Features\n\n- **Session-Management**: User-Login und Gast-Sessions\n- **RESTful API Integration**: Vollständige CRUD-Operationen für Todos\n- **Responsive Design**: Mobile-friendly Interface\n- **Real-time Updates**: Direkte API-Synchronisation\n- **Form Validation**: Live-Validierung mit User-Feedback\n- **Modular Architecture**: Saubere Trennung von Logik und Presentation\n\n## 🏗️ Projektstruktur\n\n```\nlets-todo/\n├── index.html                # Haupt-HTML-Datei\n├── app.js                    # Hauptanwendung (todoApp Klasse)\n├── style.css                 # Styling\n├── js/                       # JavaScript-Module\n│   ├── apiClient.js          # REST-API Kommunikation\n│   ├── sessionManager.js     # Session-Verwaltung\n│   ├── config/               # Environment-Konfiguration\n│   │   └── environment.js    # Automatische API-URL Detection\n│   ├── handlers/             # Event-Handler\n│   │   └── eventHandlers.js\n│   ├── templates/            # HTML-Templates\n│   │   └── htmlTemplates.js\n│   ├── ui/                   # UI-Rendering\n│   │   └── uiRenderer.js\n│   └── utils/                # Hilfsfunktionen\n│       └── formValidation.js\n├── test-cookies.html         # Cookie-Test für Development\n├── test-direct.html          # API-Test für Development\n└── assets/                   # Statische Assets\n    ├── favicon.png\n    ├── img/                  # Icons\n    │   ├── delete_note.svg\n    │   └── edit_note.svg\n    ├── fonts/                # Custom Fonts\n    └── styles/               # Zusätzliche Stylesheets\n        └── comic.css\n```\n\n## 🛠️ Technologie-Stack\n\n### Core Technologies\n\n- **Vanilla JavaScript** (ES5/ES6)\n- **HTML5** \u0026 **CSS3**\n- **Function Constructors** (keine ES6 Classes)\n- **Fetch API** für HTTP-Requests\n\n### Architektur-Patterns\n\n- **Separation of Concerns** (detailliert unten erklärt)\n- **Module Pattern**\n- **Observer Pattern** (Event-Handler)\n- **Template Pattern** (HTML-Rendering)\n\n### Separation of Concerns - Detailanalyse\n\nJedes Modul hat **eine einzige, klar definierte Verantwortlichkeit**:\n\n```javascript\n// 📦 app.js - NUR Koordination und Modus-Management\nfunction todoApp() {\n  this.sessionManager = new SessionManager(); // Delegiert Session-Logik\n  this.apiClient = new ApiClient(); // Delegiert API-Logik\n\n  this.changeMode = function (mode) {\n    this.mode = mode;\n    this.buildUI(); // Koordiniert UI-Updates\n  };\n\n  this.printModeContent = function () {\n    UIRenderer.renderModeButtons(this.container, this.mode, this); // Delegiert UI-Rendering\n  };\n}\n\n// 📦 sessionManager.js - NUR Session-Verwaltung\nfunction SessionManager() {\n  this.validateSession = function (apiHandler) {\n    /* Session-Validierung */\n  };\n  this.isUserLoggedIn = function () {\n    /* User-Status prüfen */\n  };\n  this.getSessionInfoHTML = function () {\n    /* Session-Info generieren */\n  };\n}\n\n// 📦 apiClient.js - NUR HTTP-Kommunikation\nfunction ApiClient() {\n  this.getAllTodos = function () {\n    /* GET /api/todos */\n  };\n  this.createTodo = function (todoData) {\n    /* POST /api/todos */\n  };\n  this.updateTodo = function (id, todoData) {\n    /* PATCH /api/todos/:id */\n  };\n}\n\n// 📦 uiRenderer.js - NUR DOM-Manipulation\nconst UIRenderer = {\n  renderTodoForm: function (container, currentTodo, app) {\n    // Nutzt Template + Event-Handler\n    container.insertAdjacentHTML(\n      \"beforeend\",\n      HTMLTemplates.todoForm(currentTodo)\n    );\n    EventHandlers.setupTodoForm(container, app);\n  },\n};\n\n// 📦 htmlTemplates.js - NUR HTML-Template-Generierung\nconst HTMLTemplates = {\n  todoForm: function (currentTodo) {\n    return `\u003cform class=\"todo-form\"\u003e...\u003c/form\u003e`;\n  },\n  todoItem: function (todo) {\n    return `\u003cdiv class=\"todo-item\"\u003e...\u003c/div\u003e`;\n  },\n};\n\n// 📦 eventHandlers.js - NUR Event-Management\nconst EventHandlers = {\n  setupTodoForm: function (container, app) {\n    container\n      .querySelector(\"#btn-todo-submit\")\n      .addEventListener(\"click\", (e) =\u003e {\n        app.saveTodoHandler(e); // Delegiert zurück an App-Controller\n      });\n  },\n};\n\n// 📦 formValidation.js - NUR Formular-Validierung\nconst FormValidation = {\n  validateEmail: function (email) {\n    /* Email-Validierung */\n  },\n  showFieldError: function (field, message) {\n    /* Error-Anzeige */\n  },\n};\n```\n\n**Warum das wichtig ist:**\n\n- 🔧 **Wartbarkeit**: Bugs sind schnell lokalisierbar\n- 🧪 **Testbarkeit**: Jedes Modul isoliert testbar\n- 🔄 **Wiederverwendbarkeit**: Module in anderen Projekten nutzbar\n- 📈 **Skalierbarkeit**: Neue Features sauber erweiterbar\n\n## 🌐 Environment-Management\n\n### Automatische Environment-Detection\n\nDie App erkennt automatisch die Umgebung und wählt die passenden Einstellungen:\n\n```javascript\n// js/config/environment.js\nconst CONFIG = {\n  development: {\n    API_BASE: \"http://127.0.0.1:3000/api\", // Lokal für Development\n    DEBUG: true, // Debug-Logs aktiviert\n    COOKIE_DOMAIN: \"127.0.0.1\", // Lokale Cookie-Domain\n  },\n  production: {\n    API_BASE: \"https://lets-todo-api.dev2k.org/api\",\n    DEBUG: false, // Debug-Logs deaktiviert\n    COOKIE_DOMAIN: \".dev2k.org\", // Production-Domain\n  },\n};\n\n// Automatische Detection:\nfunction detectEnvironment() {\n  const hostname = window.location.hostname;\n\n  if (hostname === \"localhost\" || hostname === \"127.0.0.1\") {\n    return \"development\"; // 🔧 Development-Modus\n  }\n  return \"production\"; // 🚀 Production-Modus\n}\n```\n\n### Environment-Variablen nutzen\n\n```javascript\n// Überall im Code verfügbar:\nENV.API_BASE; // \"http://127.0.0.1:3000/api\" oder \"https://api.dev2k.org/api\"\nENV.DEBUG; // true (development) oder false (production)\nENV.COOKIE_DOMAIN; // \"127.0.0.1\" oder \".dev2k.org\"\n\n// Beispiel-Nutzung:\nif (ENV.DEBUG) {\n  console.log(\"🔧 Debug-Info:\", data);\n}\n```\n\n### Development-Tools\n\n- **test-cookies.html**: Cookie-Tests mit Browser-Kompatibilitätsprüfung\n- **test-direct.html**: Direkter API-Test mit detaillierter Debug-Information\n- **Automatische Debug-Logs**: Nur in Development-Modus aktiv\n\n## 📋 Voraussetzungen\n\n- Modern Web Browser (Chrome 60+, Firefox 55+, Safari 12+)\n- Backend-Server (siehe [Backend Repository](../lets-todo-api) - Express.js API)\n- **Development**: HTTP-Server (127.0.0.1) ausreichend\n- **Production**: HTTPS-Verbindung für Session-Cookies erforderlich\n\n## 🚀 Installation \u0026 Setup\n\n### 1. Repository klonen\n\n```bash\ngit clone https://github.com/KosMaster87/lets-todo-app.git\ncd lets-todo-app\n```\n\n### 2. Development Server starten\n\n#### Option A: Live Server (VS Code Extension)\n\n1. VS Code öffnen\n2. Live Server Extension installieren\n3. `index.html` öffnen → \"Go Live\" klicken\n\n#### Option B: Python HTTP Server\n\n```bash\n# Python 3\npython -m http.server 8080\n\n# Python 2\npython -m SimpleHTTPServer 8080\n```\n\n#### Option C: Node.js http-server\n\n```bash\nnpm install -g http-server\nhttp-server -p 8080\n```\n\n### 3. Environment-Konfiguration\n\n**🔧 Vollautomatisch - Keine manuelle Konfiguration erforderlich!**\n\nDie App erkennt automatisch das Environment und verwendet die entsprechenden Einstellungen:\n\n```javascript\n// ✅ Development (automatisch bei 127.0.0.1 oder localhost):\nAPI_BASE: \"http://127.0.0.1:3000/api\";\nDEBUG: true;\nCOOKIE_DOMAIN: \"127.0.0.1\";\n\n// ✅ Production (automatisch bei .dev2k.org):\nAPI_BASE: \"https://lets-todo-api.dev2k.org/api\";\nDEBUG: false;\nCOOKIE_DOMAIN: \".dev2k.org\";\n```\n\n**Wichtige Development-Tipps:**\n\n- ✅ **Nutze echten Browser** (Chrome, Firefox) statt VS Code Simple Browser\n- ✅ **Nutze 127.0.0.1** statt localhost für bessere Cookie-Kompatibilität\n- ✅ **Backend muss auch auf 127.0.0.1:3000 laufen**\n- ✅ **Test-Seiten nutzen**: `test-direct.html` für API/Cookie-Tests\n\n## 🔧 Konfiguration\n\n### API-Endpoints\n\nDas Frontend kommuniziert mit folgenden Backend-Endpoints:\n\n```javascript\n// Authentifizierung\nPOST /api/register          // User-Registrierung\nPOST /api/login             // User-Login\nPOST /api/logout            // User-Logout\nPOST /api/session/guest     // Gast-Session starten\nPOST /api/session/guest/end // Gast-Session beenden\nGET  /api/session/validate  // Session validieren\n\n// Todo-Management\nGET    /api/todos           // Alle Todos abrufen\nGET    /api/todos/:id       // Einzelnes Todo abrufen\nPOST   /api/todos           // Todo erstellen\nPATCH  /api/todos/:id       // Todo aktualisieren\nDELETE /api/todos/:id       // Todo löschen\n```\n\n### Session-Management\n\n```javascript\n// Cookie-basierte Sessions\ncredentials: 'include'      // Für alle API-Requests erforderlich\n\n// Session-Typen\n- User-Session: Persistent, Email-basiert\n- Gast-Session: Temporär, UUID-basiert\n```\n\n## 💻 Development\n\n### Datei-Lade-Reihenfolge\n\nDie Scripts in [`index.html`](index.html) müssen in dieser Reihenfolge geladen werden:\n\n```html\n\u003cscript src=\"js/config/environment.js\"\u003e\u003c/script\u003e\n\u003c!-- ⚠️ ZUERST! Alle anderen brauchen ENV --\u003e\n\u003cscript src=\"js/utils/formValidation.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/templates/htmlTemplates.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/handlers/eventHandlers.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/ui/uiRenderer.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/sessionManager.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/apiClient.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n```\n\n### Development-Tools \u0026 Debugging\n\n#### Test-Seiten für Development\n\n```bash\n# Cookie-Tests\nhttp://127.0.0.1:5501/test-cookies.html    # Cookie-Funktionalität testen\n\n# API-Tests\nhttp://127.0.0.1:5501/test-direct.html     # API-Calls und Browser-Kompatibilität\n```\n\n#### Debug-Logging\n\n```javascript\n// Automatisch aktiv in Development (127.0.0.1/localhost)\ndebugLog(\"API-Call erfolgreich:\", response); // 🔧 [DEVELOPMENT] API-Call erfolgreich: {...}\n\n// In Production automatisch deaktiviert\n```\n\n#### Browser DevTools nutzen\n\n```javascript\n// Session-Status prüfen\nconsole.log(window.ENV); // Environment-Konfiguration\ndocument.cookie; // Aktuelle Cookies\n```\n\n### Coding Standards\n\n```javascript\n// Function Constructors verwenden\nfunction MyComponent() {\n  \"use strict\";\n\n  this.property = \"value\";\n\n  this.method = function () {\n    // Implementation\n  };\n}\n\n// JSDoc-Kommentare\n/**\n * Beschreibung der Funktion\n * @param {string} param - Parameter-Beschreibung\n * @returns {Object} Return-Beschreibung\n */\n\n// Deutsche Kommentare, englische Code-Namen\n// Error-Handling mit try/catch oder Promise.catch()\n```\n\n### Neue Module hinzufügen\n\n1. **JavaScript-Module**: In `js/` Verzeichnis erstellen\n2. **Function Constructor**: Verwenden statt ES6 Classes\n3. **Global verfügbar**: Via `window.ModuleName = ModuleName`\n4. **Script-Tag**: In `index.html` hinzufügen\n5. **Reihenfolge**: Abhängigkeiten beachten\n\n## 🎯 App-Lifecycle\n\n### 1. Initialisierung\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n  // Environment-Detection beim App-Start\n  debugLog(`App starting in ${ENVIRONMENT} mode`, {\n    apiBase: ENV.API_BASE,\n    debug: ENV.DEBUG,\n  });\n\n  const todoAppInstance = new todoApp();\n  todoAppInstance.init();\n});\n```\n\n### 2. Session-Validierung\n\n```javascript\nthis.sessionManager.validateSession().then((response) =\u003e {\n  // Session gültig → UI für angemeldeten User\n  // Session ungültig → Authentifizierungs-Optionen\n});\n```\n\n### 3. UI-Rendering\n\n```javascript\n// Modus-basiertes Rendering\nswitch (this.mode) {\n  case \"guest\":\n    this.printAuthOptions();\n    break;\n  case \"list\":\n    this.loadAndDisplayTodos();\n    break;\n  case \"form\":\n    this.renderTodoForm();\n    break;\n}\n```\n\n### 4. API-Kommunikation\n\n```javascript\nthis.apiClient\n  .getAllTodos()\n  .then((todos) =\u003e {\n    // UI mit Todos aktualisieren\n  })\n  .catch((error) =\u003e {\n    // Error-Handling\n  });\n```\n\n## 🐛 Debugging\n\n### Browser DevTools\n\n```javascript\n// Konsole öffnen (F12)\nconsole.log(\"🚀 App-Start: Session-Validierung...\");\n\n// Network-Tab für API-Requests überwachen\n// Application-Tab für Cookies/Sessions\n```\n\n### Debug-Flags\n\n```javascript\n// In apiClient.js\nconst IS_DEVELOPMENT = window.location.hostname === \"localhost\";\n\nif (IS_DEVELOPMENT) {\n  console.log(`🔗 API ${method} ${url}`, data);\n}\n```\n\n### Häufige Probleme \u0026 Lösungen\n\n#### 🍪 **Cookie-Probleme in Development**\n\n```bash\n# ❌ Problem: Cookies werden nicht gesetzt\n# ✅ Lösung: Echten Browser verwenden (nicht VS Code Simple Browser)\n# ✅ Lösung: 127.0.0.1 statt localhost verwenden\n# ✅ Lösung: Backend auch auf 127.0.0.1:3000 starten\n```\n\n#### 🌐 **CORS-Fehler**\n\n```bash\n# ❌ Problem: Cross-Origin Request blockiert\n# ✅ Lösung: Backend CORS-Konfiguration für 127.0.0.1:5501 prüfen\n# ✅ Lösung: credentials: 'include' in allen fetch-Requests\n```\n\n#### 📡 **API-Verbindung**\n\n```bash\n# ❌ Problem: API nicht erreichbar\n# ✅ Lösung: Backend läuft auf 127.0.0.1:3000?\n# ✅ Lösung: Environment-Detection mit test-direct.html testen\n```\n\n#### 🔧 **Development-Testing**\n\n```bash\n# Schnelle Tests:\nhttp://127.0.0.1:5501/test-direct.html     # Vollständiger API/Cookie-Test\nhttp://127.0.0.1:5501/test-cookies.html    # Nur Cookie-Tests\n```\n\n## 🚀 Deployment\n\n### Production\n\n**✅ Vollautomatisch!** Keine manuelle Konfiguration erforderlich:\n\n- Environment wird automatisch erkannt (`.dev2k.org` → Production)\n- API-URLs werden automatisch gesetzt\n- Debug-Logging wird automatisch deaktiviert\n- Cookie-Domains werden automatisch angepasst\n\n### Static Hosting\n\n```bash\n# Beispiel: Netlify\nnetlify deploy --prod --dir .\n\n# Beispiel: Vercel\nvercel --prod\n\n# Beispiel: GitHub Pages\n# Einfach Repository pushen - GitHub Pages automatisch aktiviert\n```\n\n**Deployment-Checklist:**\n\n- ✅ Backend auf Production-Domain verfügbar\n- ✅ HTTPS für Production aktiviert (Cookie-Sicherheit)\n- ✅ Frontend-Domain in Backend CORS-Liste\n- ✅ Test mit Production-URL durchführen\n\n### Environment-spezifische Konfiguration\n\n```javascript\n// js/config.js (optional)\nconst CONFIG = {\n  development: {\n    API_BASE: \"http://localhost:3000/api\",\n    DEBUG: true,\n  },\n  production: {\n    API_BASE: \"https://lets-todo-api.dev2k.org/api\",\n    DEBUG: false,\n  },\n};\n```\n\n## 🧪 Testing\n\n### Manual Testing Checklist\n\n#### ✅ **Session-Management**\n\n- [ ] **User-Registrierung** (test-direct.html oder index.html)\n- [ ] **User-Login/Logout**\n- [ ] **Gast-Session start/end**\n- [ ] **Session-Validierung** nach Page-Reload\n- [ ] **Cookie-Persistenz** über Browser-Neustarts\n\n#### ✅ **Todo-Management**\n\n- [ ] **Todos laden** (leere Liste bei neuer Session)\n- [ ] **Todo erstellen** (Titel-Validierung)\n- [ ] **Todo bearbeiten** (inline editing)\n- [ ] **Todo Status ändern** (completed toggle)\n- [ ] **Todo löschen**\n\n#### ✅ **Environment-Tests**\n\n- [ ] **Development**: `127.0.0.1:5501` → API auf `127.0.0.1:3000`\n- [ ] **Production**: `.dev2k.org` → API auf `lets-todo-api.dev2k.org`\n- [ ] **Debug-Logs**: Nur in Development sichtbar\n- [ ] **Cookies**: Richtige Domain für jede Umgebung\n\n#### 🛠️ **Development-Tools**\n\n- [ ] **test-direct.html**: Vollständiger Cookie/API-Test\n- [ ] **test-cookies.html**: Cookie-Funktionalität isoliert testen\n- [ ] **Browser DevTools**: Session-Cookies unter Application → Cookies\n\n---\n\n## 📞 Support\n\nBei Problemen:\n\n1. **Development-Tests**: `test-direct.html` öffnen und alle Tests durchlaufen\n2. **Backend-Logs**: Backend-Terminal für Debug-Informationen prüfen\n3. **Browser-Kompatibilität**: Chrome/Firefox verwenden, nicht VS Code Simple Browser\n4. **Environment**: Automatische Detection über DevTools Console prüfen: `console.log(window.ENV)`\n\n- [ ] Todo erstellen\n- [ ] Todo bearbeiten\n- [ ] Todo als erledigt markieren\n\n#### 🎨 **UI/UX-Tests**\n\n- [ ] **Responsive Design**: Mobile/Desktop-Kompatibilität\n- [ ] **Form-Validierung**: Live-Validierung bei Eingaben\n- [ ] **Error-Handling**: User-freundliche Fehlermeldungen\n- [ ] **Loading-States**: Feedback bei API-Calls\n\n### Browser-Kompatibilität\n\n| Browser | Version | Status         | Todos                     |\n| ------- | ------- | -------------- | ------------------------- |\n| Chrome  | 60+     | ✅ Vollständig | Empfohlen für Development |\n| Firefox | 55+     | ✅ Vollständig | Gute Alternative          |\n| Safari  | 12+     | ✅ Vollständig | Cookie-Handling getestet  |\n| Edge    | 79+     | ✅ Vollständig | Chromium-basiert          |\n\n**⚠️ Nicht unterstützt:** VS Code Simple Browser (Cookie-Limitationen)\n| Edge | 79+ | ✅ Vollständig |\n\n## 🤝 Contributing\n\n1. Fork das Repository\n2. Feature-Branch erstellen (`git checkout -b feature/neue-funktion`)\n3. Änderungen committen (`git commit -am 'Neue Funktion hinzugefügt'`)\n4. Branch pushen (`git push origin feature/neue-funktion`)\n5. Pull Request erstellen\n\n### Code-Style\n\n- **Function Constructors** statt ES6 Classes\n- **JSDoc-Kommentare** für alle Funktionen\n- **Deutsche Kommentare**, englische Variable-/Funktionsnamen\n- **\"use strict\"** in jeder Datei\n- **Consistent Naming**: camelCase für JavaScript, kebab-case für CSS\n\n## 📝 License\n\nDieses Projekt steht unter der [MIT License](LICENSE).\n\n## 🔗 Related Projects\n\n- [Backend Repository](../lets-todo-api) - Express.js API Server\n- [Database Schema](../lets-todo-api/README.md#database) - MariaDB Setup\n\n## 📞 Support\n\nBei Fragen oder Problemen:\n\n1. [Issues](https://github.com/KosMaster87/lets-todo-app/issues) erstellen\n2. [Discussions](https://github.com/KosMaster87/lets-todo-app/discussions) für Fragen\n3. Code-Review via Pull Requests\n\n### 🚀 Backend API\n\n**[Let's Todo Backend →](../lets-todo-api)**\n\n- **Technologie**: Express.js mit ES6-Modulen, MariaDB\n- **Features**: Multi-Database-Architecture, Environment-Detection, Pool-Management\n- **API Documentation**: [Backend README](../lets-todo-api/README.md)\n- **Development**: http://127.0.0.1:3000/api\n\n### 📦 Full-Stack Development\n\n```bash\n# Gesamtes Projekt einrichten\ngit clone https://github.com/KosMaster87/lets-todo-api.git\ngit clone https://github.com/KosMaster87/lets-todo-app.git\ncd lets-todo\n\n# 1. Backend starten (Terminal 1)\ncd lets-todo-api\nnpm install \u0026\u0026 npm run dev:db \u0026\u0026 npm run dev\n\n# 2. Frontend starten (Terminal 2)\ncd ../lets-todo-app\n# VS Code Live Server: http://127.0.0.1:5501\n```\n\n### 🔗 Cross-System Integration\n\n- **Auto-Detection**: Frontend erkennt automatisch Backend-URL\n- **Cookie-Sync**: Sessions funktionieren nahtlos zwischen beiden Systemen\n- **Debugging**: `test-cookies.html` und `test-direct.html` für API-Tests\n- **Environment-Sync**: Development/Production wird automatisch erkannt\n\n---\n\n**Entwickelt mit ❤️ und Vanilla JavaScript**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosmaster87%2Flets-todo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkosmaster87%2Flets-todo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosmaster87%2Flets-todo-app/lists"}