README.md aktualisiert
This commit is contained in:
480
README.md
480
README.md
@@ -0,0 +1,480 @@
|
||||
# 🚀 Vibe Coding: Apps entwickeln mit Cursor AI & Claude Code
|
||||
|
||||
[](https://www.udemy.com/course/vibe-coding-apps-entwickeln-mit-cursor-ai-claude-code/)
|
||||
[](LICENSE)
|
||||
[](https://github.com)
|
||||
[](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>
|
||||
Reference in New Issue
Block a user