Frontend (React + TypeScript)
- Vite for fast builds
- React Router for navigation
- Tailwind CSS for styling
- Axios for API calls
- Environment-based configs
Starting a new project can be overwhelming. There’s boilerplate to write, dependencies to configure, architecture decisions to make. Claude Code transforms this process from hours of manual setup into minutes of intelligent automation, while ensuring best practices from day one.
Scenario: It’s Monday morning. Your product manager just described a new microservice: “We need a REST API that handles user preferences, stores them in PostgreSQL, includes authentication, rate limiting, and comprehensive logging.” Traditional approach? Hours of setup. With Claude Code? Let’s see.
Navigate to your workspace
cd ~/projectsmkdir user-preferences-api && cd user-preferences-api
Launch Claude Code
claude
Describe your project
> Create a Node.js REST API for user preferences with PostgreSQL,> JWT auth, rate limiting, structured logging, and Docker support.> Include tests and CI/CD pipeline.
Watch the magic happen Claude analyzes your requirements, creates a complete project structure, installs dependencies, and provides a running application.
Within minutes, you have a production-ready codebase with:
package.json
The secret to Claude Code’s effectiveness lies in context. The CLAUDE.md
file serves as your project’s AI memory - a persistent context that survives across sessions.
> /init
Claude analyzes your project and generates a comprehensive CLAUDE.md
:
# User Preferences API
## OverviewREST API for managing user preferences with PostgreSQL storage.
## Tech Stack- Node.js 20.x- Express.js- PostgreSQL 15- Redis (caching/sessions)- Docker
## Commands- `npm run dev` - Start development server- `npm test` - Run test suite- `npm run migrate` - Run database migrations- `docker-compose up` - Start all services
## Architecture- `src/routes/` - API endpoints- `src/models/` - Database models- `src/middleware/` - Auth, rate limiting- `src/services/` - Business logic
## Environment VariablesCopy `.env.example` to `.env` and configure:- DATABASE_URL- JWT_SECRET- REDIS_URL
Create your own CLAUDE.md
for specific needs:
# Project Context
## Coding Standards- Use ES modules (import/export)- Async/await over callbacks- Comprehensive error handling- JSDoc for public APIs
## Team Conventions- Feature branches: feature/JIRA-123-description- Commit format: type(scope): message- PR requires 2 approvals- All code must have tests
## Performance Requirements- API response time < 200ms- Support 10k concurrent users- 99.9% uptime SLA
## Security Guidelines- Input validation on all endpoints- Rate limiting: 100 req/min per IP- JWT tokens expire in 1 hour- Audit log all data changes
Claude Code excels at creating project structures that grow with your needs. Let’s explore different initialization patterns.
> Create a microservices setup with API gateway, user service,> notification service, and shared libraries. Use Docker Compose> for local development.
Claude generates:
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
> Set up a monorepo with Next.js web app, React Native mobile app,> and shared component library. Use pnpm workspaces.
Result:
monorepo/├── pnpm-workspace.yaml├── apps/│ ├── web/ # Next.js│ └── mobile/ # React Native├── packages/│ ├── ui/ # Shared components│ ├── api-client/ # API wrapper│ └── utils/ # Common utilities└── tooling/ ├── eslint-config/ └── typescript-config/
Scenario: You’re tasked with modernizing a legacy Express.js application. Instead of a risky rewrite, you need to progressively enhance it with TypeScript, better structure, and modern patterns.
Analyze existing codebase
> Analyze this Express app and suggest a migration strategy to TypeScript> with minimal disruption to the running service
Create migration plan
> Create a phased migration plan that allows gradual TypeScript adoption> while keeping the app deployable at each step
Execute phase 1
> Implement phase 1: Add TypeScript configuration and convert the> simplest modules first
Validate and iterate
> Run the tests and ensure everything still works. What's next?
Claude handles the complexity of gradual migration:
Claude Code shines when setting up polyglot projects. Here’s how to bootstrap a full-stack application with multiple languages:
> Create a full-stack app: React frontend, Python FastAPI backend,> Go microservice for image processing, PostgreSQL database,> Redis cache, all containerized with Docker Compose
Claude orchestrates the entire setup:
Frontend (React + TypeScript)
Backend (Python FastAPI)
Microservice (Go)
Infrastructure
Claude Code can create sophisticated configuration management:
> Set up environment-specific configurations for development, staging,> and production. Include secrets management and validation.
Generated structure:
config/├── base.js # Shared settings├── development.js # Local overrides├── staging.js # Staging environment├── production.js # Production settings├── index.js # Smart loader└── validate.js # Config validation
const env = process.env.NODE_ENV || 'development';const baseConfig = require('./base');const envConfig = require(`./${env}`);
// Deep merge configurationsconst config = deepMerge(baseConfig, envConfig);
// Validate on startuprequire('./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(`Config validation error: ${error.message}`); }};
Scenario: You’re in a hackathon. Time is critical. You need to go from idea to demo in hours, not days.
> YOLO mode on. Create a real-time collaborative whiteboard app.> Tech: Next.js, Socket.io, Canvas API, Vercel-ready.> Skip the nice-to-haves, focus on core functionality.
Claude in YOLO mode prioritizes speed:
Claude Code can set up sophisticated Git workflows:
Initialize with .gitignore
> Initialize git repo with comprehensive .gitignore for Node.js,> environment files, IDE configs, and OS-specific files
Create branch protection rules
> Set up git flow with main, develop, and feature branches.> Include pre-commit hooks for linting and testing.
Configure commit conventions
> Set up conventional commits with commitizen and automatic> changelog generation
Result: A professionally configured repository with:
.gitignore
Build reusable project templates:
> Create a reusable template for our company's microservices.> Include our standard logging, monitoring, error handling,> and deployment configurations.
Claude generates a template structure:
company-microservice-template/├── .claude/│ └── template.json # Template metadata├── {{cookiecutter.project_name}}/│ ├── src/│ ├── tests/│ ├── Dockerfile│ └── package.json├── hooks/│ ├── pre_gen_project.py│ └── post_gen_project.py└── cookiecutter.json # Template variables
> Use our microservice template to create a new order-processing service
Claude:
> Configure VS Code for this project with recommended extensions,> settings, and debug configurations
Generated .vscode/
folder:
.vscode/├── extensions.json # Recommended extensions├── settings.json # Project settings├── launch.json # Debug configurations└── tasks.json # Build tasks
> Set up GitHub Actions for CI/CD with testing, linting,> security scanning, and deployment to AWS
Claude creates:
.github/workflows/ci.yml
- Continuous Integration.github/workflows/deploy.yml
- Deployment pipeline.github/dependabot.yml
- Dependency updatesThe more specific your initial prompt, the better the result:
❌ “Create a web app” ✅ “Create a Next.js e-commerce site with Stripe payments, user auth, and PostgreSQL”
Don’t expect perfection on the first try:
> The structure looks good, but add a separate services layer> between controllers and models for business logic
If you have a similar project:
> Create a new project similar to ../existing-project but> use PostgreSQL instead of MongoDB and add GraphQL API
> Update CLAUDE.md with the architectural decisions we just made
Create a setup-log.md
:
> Document all the steps we took to set up this project> so a new developer can understand our choices
You’ve learned how to go from zero to a running project in minutes. But setup is just the beginning. In the next lesson, we’ll explore how to analyze and understand existing codebases - a crucial skill when joining ongoing projects or maintaining legacy systems.
Remember: Claude Code isn’t just about writing code faster. It’s about starting projects the right way, with proper structure, best practices, and room to grow. Use these patterns to bootstrap your next project and watch your productivity soar.