MediaMetz/Vibe-Coding-Kurs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

README.md aktualisiert

Browse Source
This commit is contained in:
admin
2026-02-03 09:34:19 -08:00
parent 6bb02bf157
commit 9f8b053622
1 changed files with 480 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

480
README.md
View File

@@ -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 (
<div className="group relative overflow-hidden rounded-xl bg-white p-6 shadow-lg
transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
<div className="flex items-center gap-4">
<img
src={user.avatar}
alt={user.name}
className="h-16 w-16 rounded-full ring-2 ring-purple-500"
/>
<div>
<h3 className="font-bold text-lg text-gray-900">{user.name}</h3>
<p className="text-sm text-gray-600">{user.role}</p>
</div>
</div>
<div className="mt-4 flex gap-3">
{user.socials.map(social => (
<a key={social.platform} href={social.url}
className="text-gray-400 hover:text-purple-600 transition-colors">
<social.icon className="h-5 w-5" />
</a>
))}
</div>
</div>
);
}
```
### 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! 🎉**
---
<div align="center">
### ⭐ Star dieses Repo, wenn es dir hilft! ⭐
Erstellt mit ❤️ und 🤖 durch **Vibe Coding**
</div>