Christian Mueller
dbe08b4814
10 wiederverwendbare Claude Code Skills für React + Node.js Webprojekte: - code-gen, security, git-push, ssh-deploy, test-runner - docker-build, project-init, log-analyzer, dep-check, workflow Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
135 lines
2.9 KiB
Markdown
135 lines
2.9 KiB
Markdown
---
|
|
name: project-init
|
|
description: Neues React + Node.js Fullstack-Projekt aufsetzen mit allen Konfigurationen
|
|
user_invocable: true
|
|
---
|
|
|
|
Du bist ein Projekt-Scaffolder für React + Node.js Fullstack-Projekte.
|
|
|
|
## PROJEKT-SETUP ABLAUF
|
|
|
|
### 1. Projektstruktur erstellen
|
|
```
|
|
<project-name>/
|
|
├── frontend/
|
|
│ ├── src/
|
|
│ │ ├── components/
|
|
│ │ ├── hooks/
|
|
│ │ ├── services/
|
|
│ │ ├── types/
|
|
│ │ ├── utils/
|
|
│ │ ├── pages/
|
|
│ │ ├── App.tsx
|
|
│ │ └── index.tsx
|
|
│ ├── public/
|
|
│ ├── package.json
|
|
│ ├── tsconfig.json
|
|
│ ├── .env.example
|
|
│ └── Dockerfile
|
|
├── backend/
|
|
│ ├── src/
|
|
│ │ ├── controllers/
|
|
│ │ ├── services/
|
|
│ │ ├── models/
|
|
│ │ ├── middleware/
|
|
│ │ ├── routes/
|
|
│ │ ├── utils/
|
|
│ │ ├── types/
|
|
│ │ └── index.ts
|
|
│ ├── package.json
|
|
│ ├── tsconfig.json
|
|
│ ├── .env.example
|
|
│ └── Dockerfile
|
|
├── docker-compose.yml
|
|
├── .gitignore
|
|
├── .env.example
|
|
├── nginx.conf (optional)
|
|
└── README.md
|
|
```
|
|
|
|
### 2. Frontend Setup (React + TypeScript)
|
|
```bash
|
|
npx create-react-app frontend --template typescript
|
|
# oder: npm create vite@latest frontend -- --template react-ts
|
|
cd frontend
|
|
npm install axios react-router-dom
|
|
npm install -D @testing-library/react @testing-library/jest-dom
|
|
```
|
|
|
|
### 3. Backend Setup (Node.js + Express + TypeScript)
|
|
```bash
|
|
mkdir backend && cd backend
|
|
npm init -y
|
|
npm install express cors helmet dotenv zod
|
|
npm install -D typescript @types/express @types/node @types/cors ts-node nodemon
|
|
npx tsc --init
|
|
```
|
|
|
|
### 4. Basis-Konfigurationen
|
|
|
|
**tsconfig.json (Backend)**:
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
"target": "ES2020",
|
|
"module": "commonjs",
|
|
"lib": ["ES2020"],
|
|
"outDir": "./dist",
|
|
"rootDir": "./src",
|
|
"strict": true,
|
|
"esModuleInterop": true,
|
|
"resolveJsonModule": true
|
|
},
|
|
"include": ["src/**/*"]
|
|
}
|
|
```
|
|
|
|
**Backend package.json scripts**:
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"dev": "nodemon --exec ts-node src/index.ts",
|
|
"build": "tsc",
|
|
"start": "node dist/index.js",
|
|
"test": "jest --coverage"
|
|
}
|
|
}
|
|
```
|
|
|
|
### 5. Git Setup
|
|
```bash
|
|
git init
|
|
# .gitignore erstellen
|
|
git add -A
|
|
git commit -m "chore: initial project setup"
|
|
# Gitea Remote hinzufügen
|
|
git remote add origin https://git.cynfo.net/$GITEA_USER/<project>.git
|
|
git push -u origin main
|
|
```
|
|
|
|
### 6. .gitignore (Global)
|
|
```
|
|
node_modules/
|
|
dist/
|
|
build/
|
|
.env
|
|
*.log
|
|
.DS_Store
|
|
coverage/
|
|
.nyc_output/
|
|
*.pem
|
|
*.key
|
|
```
|
|
|
|
## OPTIONALE ERWEITERUNGEN
|
|
- Docker-Setup: Nutze `/docker-build`
|
|
- CI/CD: Gitea Actions Workflow
|
|
- Datenbank: Prisma ORM Setup
|
|
- Auth: JWT Middleware Template
|
|
|
|
## NACH SETUP
|
|
- Basis Health-Check Endpoint im Backend
|
|
- API-Service Template im Frontend
|
|
- Erste Tests lauffähig
|
|
- Git initialisiert mit Gitea Remote
|