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>
2.9 KiB
2.9 KiB
name, description, user_invocable
| name | description | user_invocable |
|---|---|---|
| project-init | Neues React + Node.js Fullstack-Projekt aufsetzen mit allen Konfigurationen | 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)
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)
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):
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2020"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"resolveJsonModule": true
},
"include": ["src/**/*"]
}
Backend package.json scripts:
{
"scripts": {
"dev": "nodemon --exec ts-node src/index.ts",
"build": "tsc",
"start": "node dist/index.js",
"test": "jest --coverage"
}
}
5. Git Setup
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