Frontend (React + TypeScript)
- Vite dla szybkich buildów
- React Router do nawigacji
- Tailwind CSS do stylowania
- Axios do wywołań API
- Konfiguracje oparte na środowisku
Rozpoczęcie nowego projektu może być przytłaczające. Jest boilerplate do napisania, zależności do skonfigurowania, decyzje architektoniczne do podjęcia. Claude Code przekształca ten proces z godzin ręcznej konfiguracji w minuty inteligentnej automatyzacji, jednocześnie zapewniając najlepsze praktyki od pierwszego dnia.
Scenariusz: Jest poniedziałek rano. Twój product manager właśnie opisał nowy mikroserwis: “Potrzebujemy REST API, które obsługuje preferencje użytkowników, przechowuje je w PostgreSQL, zawiera uwierzytelnianie, rate limiting i kompleksowe logowanie.” Tradycyjne podejście? Godziny konfiguracji. Z Claude Code? Zobacz sam.
Przejdź do swojego workspace
cd ~/projectsmkdir user-preferences-api && cd user-preferences-api
Uruchom Claude Code
claude
Opisz swój projekt
> Utwórz REST API Node.js dla preferencji użytkowników z PostgreSQL,> JWT auth, rate limiting, strukturalnym logowaniem i wsparciem Docker.> Uwzględnij testy i pipeline CI/CD.
Obserwuj magię Claude analizuje Twoje wymagania, tworzy kompletną strukturę projektu, instaluje zależności i dostarcza działającą aplikację.
W ciągu minut masz bazę kodu gotową do produkcji z:
package.json
Sekret skuteczności Claude Code leży w kontekście. Plik CLAUDE.md
służy jako pamięć AI Twojego projektu - trwały kontekst, który przetrwa sesje.
> /init
Claude analizuje Twój projekt i generuje kompleksowe CLAUDE.md
:
# User Preferences API
## PrzeglądREST API do zarządzania preferencjami użytkowników z przechowywaniem PostgreSQL.
## Stack technologiczny- Node.js 20.x- Express.js- PostgreSQL 15- Redis (cache/sessions)- Docker
## Komendy- `npm run dev` - Uruchom serwer deweloperski- `npm test` - Uruchom zestaw testów- `npm run migrate` - Uruchom migracje bazy danych- `docker-compose up` - Uruchom wszystkie serwisy
## Architektura- `src/routes/` - Endpointy API- `src/models/` - Modele bazy danych- `src/middleware/` - Auth, rate limiting- `src/services/` - Logika biznesowa
## Zmienne środowiskoweSkopiuj `.env.example` do `.env` i skonfiguruj:- DATABASE_URL- JWT_SECRET- REDIS_URL
Utwórz własne CLAUDE.md
dla konkretnych potrzeb:
# Kontekst projektu
## Standardy kodowania- Używaj modułów ES (import/export)- Async/await ponad callbacks- Kompleksowa obsługa błędów- JSDoc dla publicznych API
## Konwencje zespołu- Branche funkcji: feature/JIRA-123-description- Format commit: type(scope): message- PR wymaga 2 zatwierdzeń- Cały kod musi mieć testy
## Wymagania wydajności- Czas odpowiedzi API < 200ms- Wsparcie dla 10k jednoczesnych użytkowników- SLA uptime 99.9%
## Wytyczne bezpieczeństwa- Walidacja wejścia na wszystkich endpointach- Rate limiting: 100 req/min per IP- Tokeny JWT wygasają po 1 godzinie- Audit log wszystkich zmian danych
Claude Code doskonale radzi sobie z tworzeniem struktur projektów, które rosną z Twoimi potrzebami. Poznajmy różne wzorce inicjalizacji.
> Utwórz konfigurację mikroserwisów z API gateway, user service,> notification service i wspólnymi bibliotekami. Użyj Docker Compose> do lokalnego rozwoju.
Claude generuje:
project/├── docker-compose.yml├── api-gateway/│ ├── Dockerfile│ ├── package.json│ └── src/├── services/│ ├── user-service/│ └── notification-service/├── shared/│ ├── auth-middleware/│ └── error-handlers/└── scripts/ ├── setup-dev.sh └── run-migrations.sh
> Skonfiguruj monorepo z aplikacją web Next.js, aplikacją mobilną React Native> i wspólną biblioteką komponentów. Użyj workspaces pnpm.
Wynik:
monorepo/├── pnpm-workspace.yaml├── apps/│ ├── web/ # Next.js│ └── mobile/ # React Native├── packages/│ ├── ui/ # Wspólne komponenty│ ├── api-client/ # Wrapper API│ └── utils/ # Wspólne narzędzia└── tooling/ ├── eslint-config/ └── typescript-config/
Scenariusz: Masz zadanie modernizacji legacy aplikacji Express.js. Zamiast ryzykownego przepisania, musisz progresywnie ulepszyć ją TypeScript, lepszą strukturą i nowoczesnymi wzorcami.
Przeanalizuj istniejącą bazę kodu
> Przeanalizuj tę aplikację Express i zasugeruj strategię migracji do TypeScript> z minimalnym zakłóceniem działającej usługi
Utwórz plan migracji
> Utwórz fazowy plan migracji, który pozwala na stopniowe przyjmowanie TypeScript> przy jednoczesnym utrzymaniu możliwości wdrażania aplikacji na każdym kroku
Wykonaj fazę 1
> Zaimplementuj fazę 1: Dodaj konfigurację TypeScript i przekonwertuj> najprostsze moduły najpierw
Waliduj i iteruj
> Uruchom testy i upewnij się, że wszystko nadal działa. Co dalej?
Claude radzi sobie ze złożonością stopniowej migracji:
Claude Code świeci, gdy konfiguruje projekty polyglot. Oto jak zbootstrapować aplikację full-stack z wieloma językami:
> Utwórz aplikację full-stack: frontend React, backend Python FastAPI,> mikroserwis Go do przetwarzania obrazów, baza danych PostgreSQL,> cache Redis, wszystko skonteneryzowane z Docker Compose
Claude orkiestruje całą konfigurację:
Frontend (React + TypeScript)
Backend (Python FastAPI)
Mikroserwis (Go)
Infrastruktura
Claude Code może utworzyć wyrafinowane zarządzanie konfiguracją:
> Skonfiguruj konfiguracje specyficzne dla środowiska dla development, staging> i production. Uwzględnij zarządzanie sekretami i walidację.
Wygenerowana struktura:
config/├── base.js # Wspólne ustawienia├── development.js # Nadpisania lokalne├── staging.js # Środowisko staging├── production.js # Ustawienia produkcyjne├── index.js # Inteligentny loader└── validate.js # Walidacja konfiguracji
const env = process.env.NODE_ENV || 'development';const baseConfig = require('./base');const envConfig = require(`./${env}`);
// Głębokie łączenie konfiguracjiconst config = deepMerge(baseConfig, envConfig);
// Waliduj przy starcierequire('./validate')(config);
module.exports = config;
const Joi = require('joi');
const schema = Joi.object({ port: Joi.number().port().required(), database: Joi.object({ host: Joi.string().required(), port: Joi.number().port().required(), name: Joi.string().required(), user: Joi.string().required(), password: Joi.string().required() }), jwt: Joi.object({ secret: Joi.string().min(32).required(), expiresIn: Joi.string().required() })});
module.exports = (config) => { const { error } = schema.validate(config); if (error) { throw new Error(`Błąd walidacji konfiguracji: ${error.message}`); }};
Scenariusz: Jesteś na hackathonie. Czas jest krytyczny. Musisz przejść od pomysłu do demo w godzinach, nie dniach.
> Tryb YOLO włączony. Utwórz aplikację collaborative whiteboard w czasie rzeczywistym.> Tech: Next.js, Socket.io, Canvas API, gotowy na Vercel.> Pomiń nice-to-haves, skup się na funkcjonalności podstawowej.
Claude w trybie YOLO priorytetyzuje szybkość:
Claude Code może skonfigurować wyrafinowane workflow Git:
Zainicjalizuj z .gitignore
> Zainicjalizuj repozytorium git z kompleksowym .gitignore dla Node.js,> plików środowiskowych, konfiguracji IDE i plików specyficznych dla OS
Utwórz reguły ochrony branchy
> Skonfiguruj git flow z main, develop i feature branches.> Uwzględnij pre-commit hooks do lintingu i testowania.
Skonfiguruj konwencje commit
> Skonfiguruj conventional commits z commitizen i automatyczną> generacją changelog
Wynik: Profesjonalnie skonfigurowane repozytorium z:
.gitignore
Buduj szablony projektów do ponownego użycia:
> Utwórz szablon do ponownego użycia dla mikroserwisów naszej firmy.> Uwzględnij nasze standardowe logowanie, monitorowanie, obsługę błędów> i konfiguracje wdrożeniowe.
Claude generuje strukturę szablonu:
company-microservice-template/├── .claude/│ └── template.json # Metadane szablonu├── {{cookiecutter.project_name}}/│ ├── src/│ ├── tests/│ ├── Dockerfile│ └── package.json├── hooks/│ ├── pre_gen_project.py│ └── post_gen_project.py└── cookiecutter.json # Zmienne szablonu
> Użyj naszego szablonu mikroserwisu do utworzenia nowego order-processing service
Claude:
> Skonfiguruj VS Code dla tego projektu z rekomendowanymi rozszerzeniami,> ustawieniami i konfiguracjami debug
Wygenerowany folder .vscode/
:
.vscode/├── extensions.json # Rekomendowane rozszerzenia├── settings.json # Ustawienia projektu├── launch.json # Konfiguracje debug└── tasks.json # Zadania budowania
> Skonfiguruj GitHub Actions dla CI/CD z testowaniem, lintingiem,> skanowaniem bezpieczeństwa i wdrożeniem na AWS
Claude tworzy:
.github/workflows/ci.yml
- Continuous Integration.github/workflows/deploy.yml
- Pipeline wdrożeniowy.github/dependabot.yml
- Aktualizacje zależnościIm bardziej szczegółowy jest Twój początkowy prompt, tym lepszy wynik:
❌ “Utwórz aplikację web” ✅ “Utwórz stronę e-commerce Next.js z płatnościami Stripe, auth użytkowników i PostgreSQL”
Nie oczekuj perfekcji za pierwszym razem:
> Struktura wygląda dobrze, ale dodaj oddzielną warstwę serwisów> między kontrolerami a modelami dla logiki biznesowej
Jeśli masz podobny projekt:
> Utwórz nowy projekt podobny do ../existing-project ale> użyj PostgreSQL zamiast MongoDB i dodaj GraphQL API
> Zaktualizuj CLAUDE.md z decyzjami architektonicznymi, które właśnie podjęliśmy
Utwórz setup-log.md
:
> Udokumentuj wszystkie kroki, które podjęliśmy do konfiguracji tego projektu> aby nowy developer mógł zrozumieć nasze wybory
Nauczyłeś się, jak przejść od zera do działającego projektu w ciągu minut. Ale konfiguracja to dopiero początek. W następnej lekcji zbadamy, jak analizować i rozumieć istniejące bazy kodu - kluczową umiejętność przy dołączaniu do trwających projektów lub utrzymywaniu systemów legacy.
Pamiętaj: Claude Code to nie tylko szybsze pisanie kodu. To rozpoczynanie projektów w prawidłowy sposób, z odpowiednią strukturą, najlepszymi praktykami i miejscem na wzrost. Użyj tych wzorców do bootstrappingu swojego następnego projektu i obserwuj, jak Twoja produktywność wzrasta.