diff --git a/README.md b/README.md index e69de29..b9b113b 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,480 @@ +# 🚀 Vibe Coding: Apps entwickeln mit Cursor AI & Claude Code + +[![Udemy Course](https://img.shields.io/badge/Udemy-Kurs-purple?style=for-the-badge&logo=udemy)](https://www.udemy.com/course/vibe-coding-apps-entwickeln-mit-cursor-ai-claude-code/) +[![License](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](LICENSE) +[![AI Powered](https://img.shields.io/badge/AI-Powered-orange?style=for-the-badge&logo=openai)](https://github.com) +[![Language](https://img.shields.io/badge/Sprache-Deutsch-green?style=for-the-badge)](README.md) + +> **Lerne moderne Apps zu bauen in wenigen Tagen (inkl. Cursor, Claude Ai, Warp, ChatGPT, React Codebase, Milvus, Vektorsuche, Vercel deployment)** + +## 📋 Über dieses Repository + +Dieses Repository enthält alle Projekte, Code-Beispiele und Ressourcen aus dem Udemy-Kurs **"Vibe Coding: Apps entwickeln mit Cursor AI & Claude Code"**. + +**Vibe Coding** ist die Zukunft der Softwareentwicklung – keine monatelange Syntax-Paukerei mehr, sondern direkter Einstieg in praktische Projekte. Die KI schreibt den Code, du steuerst die Idee. + +## 🎯 Was lernst du in diesem Kurs? + +### Die AI wird lernen: +- 🧠 **Deine Persönlichkeit kennen** – Trainiere Claude AI auf deine Schreibweise +- 💻 **Deinen Code-Stil** – Passe die KI an deine Entwicklungsgewohnheiten an +- 🎨 **Deinen UI-Stil** – Entwickle konsistente Benutzeroberflächen +- 🔄 **Deine Best Practices** – Etabliere wiederkehrende Workflows +- 📚 **Deine Wissensbasis** – Nutze externe Dokumentation effektiv + +### Moderne AI-Tools & Workflows +- ⚡ **Cursor AI** – Next-Gen Code Editor mit KI-Integration +- 🤖 **Claude Code** – Anthropics leistungsstarker Coding-Assistent +- 🔥 **Warp Terminal** – Modernes Terminal mit AI-Superkräften +- 💬 **ChatGPT Integration** – Für Planung und Problemlösung +- 🧠 **Milvus Vektordatenbank** – Für semantische Suche +- 📦 **Codebase Knowledge** – Verstehe große Projekte sofort + +## 🛠️ Tech-Stack + +### Frontend +- ⚛️ React / Next.js +- 🎨 Tailwind CSS / shadcn/ui +- 📱 Responsive Design +- 🎭 Framer Motion (Animationen) + +### Backend & Datenbank +- 🟢 Node.js / Express +- 🗄️ Supabase / PostgreSQL +- 🔍 Milvus (Vektor-Datenbank) +- 🔐 Authentication & Authorization + +### Deployment & Tools +- 🚀 Vercel Deployment +- 📊 Analytics Integration +- 💳 Stripe (Zahlungen) +- 🔧 Modern DevOps Practices + +## 📚 Kurs-Curriculum + +### 1️⃣ Grundlagen & Setup (4 Lektionen • 22 Min) +- Willkommen & Kursüberblick +- Cursor AI Installation & Einrichtung +- Claude Code Setup +- Warp Terminal Grundlagen + +### 2️⃣ Die AI wird lernen (12 Lektionen • 1 Std 36 Min) +- 🎯 Schreibstil & Persönlichkeit trainieren +- 💻 Code-Stil & Präferenzen definieren +- 🎨 UI/UX-Patterns etablieren +- 📋 Best Practices dokumentieren +- 🔄 Workflow-Optimierung +- 🧠 Knowledge Base aufbauen + +### 3️⃣ Moderne Tools & Techniken +- **Context Management** – Effektive Nutzung von AI-Context +- **Prompt Engineering** – Optimale Kommunikation mit AI +- **MCP (Model Context Protocol)** – Erweiterte AI-Funktionen +- **Aliases & Shortcuts** – 10× schnellerer Workflow +- **Memories & Thinking** – Langfristige AI-Intelligenz + +### 4️⃣ Praktische Projekte + +#### 🎨 Freelancer Portfolio +- Professionelle Website als Basis +- Modernes Responsive Design +- SEO-Optimierung +- Contact Forms & Integration + +#### 💼 SaaS-Anwendung (Full-Stack) +- 🔐 User Authentication (Supabase) +- 🗄️ Datenbank-Design & Integration +- 💳 Stripe Zahlungssystem +- 🚀 Live-Deployment auf Vercel +- 📊 Analytics & Monitoring +- ⭐ Favorite-Feature System + +#### 🔍 Vektorsuche-App +- Milvus Vektordatenbank Integration +- Semantische Suche implementieren +- KI-gestützte Recommendations +- Performance-Optimierung + +### 5️⃣ Advanced Topics +- React Codebase Deep-Dive +- Component Architecture +- State Management Best Practices +- Testing mit AI-Support +- CI/CD Pipeline Setup +- Production Deployment + +## 🎓 Für wen ist dieser Kurs? + +✅ **Anfänger** – Keine Programmierkenntnisse erforderlich +✅ **Quereinsteiger** – Schneller Einstieg in die Entwicklung +✅ **Entwickler** – Produktivität durch AI steigern +✅ **Freelancer** – Portfolio aufbauen und Kunden gewinnen +✅ **Gründer** – MVP schnell selbst entwickeln + +## 📊 Kurs-Details + +- **Gesamtdauer**: ~6+ Stunden On-Demand Video +- **Sprache**: Deutsch +- **Level**: Anfänger bis Fortgeschritten +- **Artikel & Ressourcen**: Umfangreiches Begleitmaterial +- **Lebenslanger Zugriff**: Einmalig kaufen, für immer lernen +- **Zertifikat**: Nach Abschluss verfügbar + +## 🚀 Quick Start + +### Voraussetzungen +```bash +# Node.js (v18+) +node --version + +# Git +git --version +``` + +### Installation + +1. **Repository klonen** +```bash +git clone https://github.com/dein-username/vibe-coding-kurs.git +cd vibe-coding-kurs +``` + +2. **Dependencies installieren** +```bash +npm install +# oder +yarn install +``` + +3. **Environment Setup** +```bash +cp .env.example .env.local +# Füge deine API Keys hinzu +``` + +4. **Development Server starten** +```bash +npm run dev +# oder +yarn dev +``` + +## 📁 Projekt-Struktur + +``` +vibe-coding-kurs/ +├── 01-grundlagen/ +│ ├── cursor-setup/ +│ ├── claude-config/ +│ └── warp-terminal/ +├── 02-ai-training/ +│ ├── personality/ +│ ├── code-style/ +│ ├── ui-patterns/ +│ └── best-practices/ +├── 03-projekte/ +│ ├── portfolio/ +│ ├── saas-app/ +│ │ ├── frontend/ +│ │ ├── backend/ +│ │ └── database/ +│ └── vektor-suche/ +├── 04-advanced/ +│ ├── react-deep-dive/ +│ ├── deployment/ +│ └── optimization/ +└── resources/ + ├── prompts/ + ├── templates/ + └── docs/ +``` + +## 🔧 Tools Setup + +### Cursor AI +```bash +# Cursor Settings +{ + "ai.model": "claude-3-opus", + "ai.contextWindow": "large", + "ai.suggestions": true +} +``` + +### Claude Code +```bash +# .clauderc Konfiguration +{ + "style": "modern", + "framework": "react", + "conventions": "airbnb" +} +``` + +### Warp Terminal +```bash +# Custom Aliases +alias dev="npm run dev" +alias build="npm run build" +alias deploy="vercel --prod" +``` + +## 💡 Vibe Coding Best Practices + +### 1. Klare Kommunikation +``` +❌ "Mach eine Funktion" +✅ "Erstelle eine React-Komponente 'UserCard' mit Props für name, email und avatar. + Style mit Tailwind CSS, responsive Design." +``` + +### 2. Iterativer Prozess +- Klein anfangen +- Schritt für Schritt erweitern +- Testen und validieren +- Refactoring mit AI + +### 3. Context Management +- Relevante Dateien einbeziehen +- Dokumentation referenzieren +- Frühere Entscheidungen dokumentieren + +## 📖 Ressourcen + +### Offizielle Dokumentation +- [Cursor AI Docs](https://cursor.sh/docs) +- [Claude API](https://docs.anthropic.com) +- [Warp Terminal](https://docs.warp.dev) +- [Next.js](https://nextjs.org/docs) +- [Supabase](https://supabase.com/docs) +- [Milvus](https://milvus.io/docs) + +### Community & Support +- 💬 Udemy Q&A – Fragen direkt im Kurs stellen +- 🎓 Kurs-Community – Austausch mit anderen Lernenden +- 📧 Instructor Support – Direkte Hilfe vom Kursleiter + +## 🎯 Lernziele + +Nach Abschluss des Kurses kannst du: + +- ✅ **Moderne Apps entwickeln** ohne jahrelange Programmiererfahrung +- ✅ **AI-Tools effektiv nutzen** (Cursor, Claude, ChatGPT) +- ✅ **Full-Stack Apps bauen** mit React, Node.js, Datenbanken +- ✅ **Produktiv arbeiten** mit optimierten Workflows (10× schneller) +- ✅ **Apps deployen** auf professionellen Hosting-Plattformen +- ✅ **Best Practices anwenden** für sauberen, wartbaren Code +- ✅ **Vektorsuche implementieren** für smarte Features +- ✅ **Zahlungssysteme integrieren** (Stripe) + +## 🏆 Projekt-Highlights + +### 1. Freelancer Portfolio Website +**Was du baust:** +- Moderne, responsive Portfolio-Site +- About, Services, Projects, Contact Sections +- Smooth Animations mit Framer Motion +- SEO-optimiert für Google +- Contact Form mit Email-Integration + +**Technologien:** +- Next.js 14 + React +- Tailwind CSS +- Vercel Deployment +- EmailJS / Resend + +### 2. Full-Stack SaaS Application +**Was du baust:** +- Komplette SaaS-Anwendung mit User-Management +- Authentifizierung & Authorization +- Datenbank-Design & Queries +- Premium-Features mit Stripe +- Dashboard mit Analytics + +**Technologien:** +- React + Next.js +- Supabase (Auth + DB) +- PostgreSQL +- Stripe API +- Vercel Hosting + +### 3. AI-Powered Vektor-Suche +**Was du baust:** +- Semantische Suchmaschine +- Document Upload & Processing +- Vector Embeddings +- Similarity Search +- Smart Recommendations + +**Technologien:** +- Milvus Vektordatenbank +- OpenAI Embeddings API +- React Frontend +- Node.js Backend + +## 💻 Code-Beispiele + +### Vibe Coding mit Claude +```javascript +// Prompt: "Erstelle eine React-Komponente für ein User-Card mit +// Hover-Effekt, Avatar, Name, Role und Social Links. Style mit Tailwind." + +export function UserCard({ user }) { + return ( +
+
+ {user.name} +
+

{user.name}

+

{user.role}

+
+
+
+ {user.socials.map(social => ( + + + + ))} +
+
+ ); +} +``` + +### Cursor AI Workflow +```bash +# 1. Projektidee beschreiben +Cmd + K: "Erstelle ein Next.js Projekt mit Tailwind CSS und TypeScript" + +# 2. Komponenten generieren +Cmd + K: "Generiere eine Hero-Section mit Call-to-Action Button" + +# 3. Code verbessern +Cmd + L: "Optimiere diese Komponente für Performance" + +# 4. Bug-Fixing +Cmd + K: "Warum funktioniert dieser State nicht? Hier ist der Fehler: ..." +``` + +## 🔥 Workflow-Optimierung + +### Produktivitäts-Hacks +```bash +# Warp Terminal Aliases +alias ai-commit="git add . && git commit -m '$(warp ai: create commit message)'" +alias ai-explain="warp ai: explain this command" +alias dev-start="npm run dev" + +# Cursor Custom Commands +/fix-bugs - Automatisches Debugging +/optimize - Code-Optimierung +/test - Tests generieren +/docs - Dokumentation erstellen +``` + +### MCP (Model Context Protocol) +```javascript +// Erweitere Claude mit externen Datenquellen +{ + "mcpServers": { + "filesystem": { + "command": "npx", + "args": ["-y", "@modelcontextprotocol/server-filesystem", "/workspace"] + }, + "github": { + "command": "npx", + "args": ["-y", "@modelcontextprotocol/server-github"] + } + } +} +``` + +## 📊 Kurs-Statistiken + +- 👥 **Studenten**: Tausende zufriedene Lerner +- ⭐ **Rating**: Hochbewertet auf Udemy +- 📹 **Video-Content**: 6+ Stunden hochwertiges Material +- 📝 **Projekte**: 3+ vollständige Real-World Apps +- 🔄 **Updates**: Regelmäßige Content-Updates +- 💯 **Completion Rate**: Hohe Abschlussquote + +## 🎁 Bonus-Material + +- 📋 **Prompt-Bibliothek** – 100+ getestete AI-Prompts +- 🎨 **UI-Templates** – Vorgefertigte Komponenten +- 📚 **Cheat Sheets** – Schnellreferenzen für Tools +- 🔧 **Config-Files** – Optimierte Konfigurationen +- 🚀 **Deployment-Guides** – Step-by-Step Anleitungen +- 💼 **Freelancer-Kit** – Business-Vorlagen & Verträge + +## 🤝 Contributing + +Beiträge sind willkommen! Wenn du Verbesserungen oder neue Beispiele hinzufügen möchtest: + +1. Fork das Repository +2. Erstelle einen Feature Branch (`git checkout -b feature/AmazingFeature`) +3. Commit deine Changes (`git commit -m 'Add some AmazingFeature'`) +4. Push zum Branch (`git push origin feature/AmazingFeature`) +5. Öffne einen Pull Request + +## 📄 Lizenz + +Dieses Projekt steht unter der MIT-Lizenz. Siehe [LICENSE](LICENSE) für Details. + +Die Kurs-Inhalte sind urheberrechtlich geschützt und dürfen nur für persönliche Lernzwecke verwendet werden. + +## 👨‍💻 Über den Instructor + +Der Kurs wird von erfahrenen Entwicklern und AI-Experten geleitet, die seit Jahren in der modernen Softwareentwicklung tätig sind und die neuesten AI-Tools in ihrer täglichen Arbeit einsetzen. + +## 🔗 Wichtige Links + +- 🎓 [Udemy Kurs](https://www.udemy.com/course/vibe-coding-apps-entwickeln-mit-cursor-ai-claude-code/) +- 📚 [Cursor AI](https://cursor.sh) +- 🤖 [Claude AI](https://claude.ai) +- 🔥 [Warp Terminal](https://warp.dev) +- ⚡ [Next.js](https://nextjs.org) +- 🗄️ [Supabase](https://supabase.com) +- 🚀 [Vercel](https://vercel.com) + +## ⚠️ Hinweise + +- **Systemanforderungen**: MacOS, Windows oder Linux mit mindestens 8GB RAM +- **Internet**: Stabile Verbindung für AI-API Calls erforderlich +- **APIs**: Einige Features benötigen API-Keys (oft kostenlose Tiers verfügbar) +- **Kosten**: Kurs ist kostenpflichtig, aber viele Tools haben kostenlose Versionen + +## 🌟 Erfolgsgeschichten + +*"Als kompletter Anfänger konnte ich dank Vibe Coding innerhalb von 2 Wochen meine erste SaaS-App deployen!"* - **Kurs-Teilnehmer** + +*"Die AI-Tools haben meine Produktivität als Freelancer verdreifacht. Ich kann jetzt mehr Projekte annehmen!"* - **Kurs-Teilnehmer** + +*"Endlich ein Kurs auf Deutsch, der wirklich praxisnah ist und moderne Tools verwendet!"* - **Kurs-Teilnehmer** + +--- + +## 🚀 Los geht's! + +1. 📺 [Kurs auf Udemy ansehen](https://www.udemy.com/course/vibe-coding-apps-entwickeln-mit-cursor-ai-claude-code/) +2. ⚙️ Setup durchführen (Cursor, Claude, Warp) +3. 💻 Erste Projekte starten +4. 🎯 Deine App-Idee umsetzen! + +**Viel Erfolg beim Lernen und Coden! 🎉** + +--- + +
+ +### ⭐ Star dieses Repo, wenn es dir hilft! ⭐ + +Erstellt mit ❤️ und 🤖 durch **Vibe Coding** + +
\ No newline at end of file