Back to skills
SkillHub ClubBuild MobileFull StackFrontendBackend
project-scaffolding
IDE-grade project scaffolding wizard for creating new projects with comprehensive configuration. Supports 70+ project types: HTML/CSS websites, React, Next.js, Vue, Astro, Remix, React Native, Flutter, Expo, FastAPI, Django, Express, NestJS, Go/Gin, Rust/Axum, Spring Boot, Hono, Elysia, Chrome Extensions, VS Code Extensions, Tauri desktop apps, serverless functions, and more. Provides WebStorm/PyCharm-level project creation with interactive SDK selection, framework configuration, database setup, and DevOps tooling. Use when: creating a new project, setting up a framework application, initializing a codebase, scaffolding boilerplate, building extensions, creating mobile/desktop/web apps, setting up monorepos, or making static websites/landing pages.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Stars
31
Hot score
89
Updated
March 20, 2026
Overall rating
C2.5
Composite score
2.5
Best-practice grade
B75.6
Install command
npx @skill-hub/cli install hmohamed01-claude-code-scaffolding-skill-project-scaffolding
Repository
hmohamed01/Claude-Code-Scaffolding-Skill
Skill path: project-scaffolding
IDE-grade project scaffolding wizard for creating new projects with comprehensive configuration. Supports 70+ project types: HTML/CSS websites, React, Next.js, Vue, Astro, Remix, React Native, Flutter, Expo, FastAPI, Django, Express, NestJS, Go/Gin, Rust/Axum, Spring Boot, Hono, Elysia, Chrome Extensions, VS Code Extensions, Tauri desktop apps, serverless functions, and more. Provides WebStorm/PyCharm-level project creation with interactive SDK selection, framework configuration, database setup, and DevOps tooling. Use when: creating a new project, setting up a framework application, initializing a codebase, scaffolding boilerplate, building extensions, creating mobile/desktop/web apps, setting up monorepos, or making static websites/landing pages.
Open repositoryBest for
Primary workflow: Build Mobile.
Technical facets: Full Stack, Frontend, Backend, DevOps, Mobile.
Target audience: everyone.
License: str = "MIT".
Original source
Catalog source: SkillHub Club.
Repository owner: hmohamed01.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install project-scaffolding into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/hmohamed01/Claude-Code-Scaffolding-Skill before adding project-scaffolding to shared team environments
- Use project-scaffolding for development workflows
Works across
Claude CodeCodex CLIGemini CLIOpenCode
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
---
name: project-scaffolding
description: >
IDE-grade project scaffolding wizard for creating new projects with comprehensive configuration.
Supports 70+ project types: HTML/CSS websites, React, Next.js, Vue, Astro, Remix, React Native,
Flutter, Expo, FastAPI, Django, Express, NestJS, Go/Gin, Rust/Axum, Spring Boot, Hono, Elysia,
Chrome Extensions, VS Code Extensions, Tauri desktop apps, serverless functions, and more.
Provides WebStorm/PyCharm-level project creation with interactive SDK selection, framework
configuration, database setup, and DevOps tooling. Use when: creating a new project, setting up
a framework application, initializing a codebase, scaffolding boilerplate, building extensions,
creating mobile/desktop/web apps, setting up monorepos, or making static websites/landing pages.
---
# Project Scaffolding Wizard
Professional-grade project scaffolding comparable to WebStorm/PyCharm project wizards. Creates fully configured projects with SDK setup, framework options, database configuration, linting, and CI/CD.
## Wizard Workflow
When a user requests a new project, follow this interactive workflow:
### Step 1: Project Type Selection
Present the project type menu. Ask the user to select a category and type:
| Category | Types |
|----------|-------|
| **Static Websites** | HTML/CSS, HTML+Sass, HTML+Tailwind, Landing Page, Multi-page Site |
| **Frontend Web** | React, Next.js, Vue, Nuxt, Svelte, Angular, Astro, Remix, Solid, Qwik, Preact |
| **Mobile/Desktop** | React Native, Expo, Flutter, Tauri, Electron, Ionic |
| **Backend (JS/TS)** | Express, NestJS, Fastify, Hono, Elysia, tRPC, Koa |
| **Backend (Python)** | FastAPI, Django, Django REST, Flask, Litestar |
| **Backend (Go)** | Gin, Fiber, Echo, Chi |
| **Backend (Rust)** | Axum, Actix, Rocket |
| **Backend (Java)** | Spring Boot, Quarkus, Ktor, Micronaut |
| **Backend (Other)** | Laravel, Rails, .NET Web API |
| **Libraries** | TypeScript NPM, Python PyPI, Go Module, Rust Crate |
| **CLI Tools** | Node CLI, Python CLI (Typer/Click), Go CLI (Cobra), Rust CLI (Clap) |
| **Extensions** | Chrome Extension, Firefox Extension, VS Code Extension, Figma Plugin, Obsidian Plugin |
| **Serverless** | AWS Lambda, Cloudflare Workers, Vercel Functions, Supabase Functions |
| **Full-Stack** | T3 Stack, MERN, PERN, MEAN |
| **Monorepos** | Turborepo, Nx Workspace, pnpm Workspace |
### Step 2: Basic Configuration
Gather for ALL projects:
- **Project name** (required)
- **Location/directory**
- **Description**
- **Author name**
- **License** (MIT, Apache-2.0, GPL-3.0, ISC, Unlicense)
### Step 3: Framework-Specific Options
Load `references/wizard-options.md` for detailed configuration options based on the selected project type. Key decisions include:
- **Language/SDK version** - Node.js, Python, Go, Rust, Java versions
- **Package manager** - npm, pnpm, yarn, bun, poetry, uv
- **CSS framework** - Tailwind, CSS Modules, Styled Components
- **State management** - Zustand, Redux, Jotai, TanStack Query
- **Database/ORM** - PostgreSQL, SQLite, Prisma, SQLAlchemy, sqlc
- **Authentication** - NextAuth, JWT, OAuth2
- **Testing** - Vitest, Jest, pytest, Playwright
### Step 4: Code Quality & DevOps
- **Linting** - ESLint, Ruff, golangci-lint, clippy
- **Formatting** - Prettier, Ruff, gofmt, rustfmt
- **Pre-commit hooks** - husky + lint-staged, pre-commit framework
- **CI/CD** - GitHub Actions, GitLab CI
- **Docker** - Dockerfile (multi-stage), docker-compose
- **Deployment** - Vercel, Railway, Fly.io, AWS, self-hosted
### Step 5: Generate Project
Use `scripts/scaffold.py` or native CLI tools to create the project structure.
## CLI Integration
Prefer native CLI tools when available:
| Framework | CLI Command |
|-----------|-------------|
| Next.js | `npx create-next-app@latest` |
| React (Vite) | `npm create vite@latest -- --template react-ts` |
| Vue | `npm create vue@latest` |
| Nuxt | `npx nuxi@latest init` |
| Astro | `npm create astro@latest` |
| Remix | `npx create-remix@latest` |
| SvelteKit | `npm create svelte@latest` |
| Solid | `npm create solid@latest` |
| Expo | `npx create-expo-app@latest` |
| React Native | `npx @react-native-community/cli init` |
| Flutter | `flutter create` |
| Tauri | `npm create tauri-app@latest` |
| NestJS | `npx @nestjs/cli new` |
| Spring Boot | `spring init` or start.spring.io |
| Go | `go mod init` |
| Rust | `cargo new` |
| Chrome Ext | `npm create plasmo@latest` |
| T3 Stack | `npx create-t3-app@latest` |
## Quick Start Examples
### HTML/CSS Website
```bash
mkdir my-website && cd my-website
touch index.html style.css
# Or use boilerplate:
npx degit h5bp/html5-boilerplate my-website
```
### HTML + Tailwind (CDN)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<h1 class="text-3xl font-bold">Hello World</h1>
</body>
</html>
```
### T3 Stack (Next.js + tRPC + Prisma)
```bash
npx create-t3-app@latest my-app
```
### Expo (React Native)
```bash
npx create-expo-app@latest my-app --template tabs
```
### Tauri Desktop App
```bash
npm create tauri-app@latest my-app -- --template react-ts
```
### Chrome Extension
```bash
npm create plasmo@latest my-extension
```
## Example Conversations
### Simple HTML/CSS Website
```
User: Create a simple website with HTML and CSS
Claude: I'll create a static HTML/CSS website:
- Multi-page (Home, About, Contact)
- Mobile-first responsive CSS
- BEM naming convention
- Live Server for development
Structure:
my-website/
├── index.html
├── about.html
├── contact.html
├── css/style.css
├── js/main.js
└── images/
Shall I create this?
```
### Mobile App
```
User: Create a mobile app for iOS and Android
Claude: I recommend Expo for the easiest setup:
- TypeScript
- Expo Router (file-based navigation)
- NativeWind (Tailwind for RN)
- Tab navigation template
Ready to scaffold?
```
### Full-Stack with Type Safety
```
User: Create a full-stack app with type-safe API
Claude: I recommend the T3 Stack:
- Next.js 14 (App Router)
- tRPC (type-safe API)
- Prisma (type-safe ORM)
- Tailwind CSS
- NextAuth.js
- PostgreSQL with docker-compose
This gives you full type safety from database to frontend!
```
### Chrome Extension
```
User: Build a Chrome extension
Claude: What features do you need?
- Popup UI
- Content script (modifies pages)
- Background service worker
- Side panel
Tech stack: React + Vite + TypeScript + Manifest V3
I recommend using Plasmo framework for easier development.
```
## Available Resources
Load reference files based on what you need:
| Resource | When to Load | Purpose |
|----------|--------------|---------|
| `references/wizard-options.md` | During Step 3 (gathering user preferences) | Configuration choices and defaults for each framework |
| `references/frameworks.md` | When generating code | Project structures, code examples, configuration files |
| `references/best-practices.md` | For architecture decisions | Directory organization, naming conventions, patterns |
| `scripts/scaffold.py` | For custom scaffolding | Python engine when CLI tools aren't suitable |
**Workflow:**
1. Present options from `wizard-options.md` to gather user preferences
2. Use `frameworks.md` for code patterns and project structure when generating
3. Consult `best-practices.md` for architecture decisions
## Default Recommendations
| Category | Recommendation |
|----------|----------------|
| JS Runtime | Node.js 22 LTS |
| Package Manager | pnpm |
| Python Version | 3.12 |
| Go Version | 1.23 |
| Rust Edition | 2021 |
| Java Version | 21 LTS |
| CSS Framework | Tailwind CSS |
| State (React) | Zustand + TanStack Query |
| ORM (Node) | Prisma |
| ORM (Python) | SQLAlchemy 2.0 |
| ORM (Go) | sqlc |
| Testing (JS) | Vitest |
| Testing (Python) | pytest |
| E2E Testing | Playwright |
| Linting (JS) | ESLint + Prettier |
| Linting (Python) | Ruff |
| CI/CD | GitHub Actions |
| Containerization | Multi-stage Dockerfile |
---
## Referenced Files
> The following files are referenced in this skill and included for context.
### references/wizard-options.md
```markdown
# Wizard Configuration Options
Detailed configuration options for each project type. Load this reference when gathering user preferences for a specific framework.
## Table of Contents
1. [Language & SDK Options](#language--sdk-options)
2. [HTML/CSS Projects](#htmlcss-projects)
3. [React Projects](#react-projects)
4. [Next.js Projects](#nextjs-projects)
5. [Vue Projects](#vue-projects)
6. [Nuxt Projects](#nuxt-projects)
7. [Svelte Projects](#svelte-projects)
8. [Angular Projects](#angular-projects)
9. [Astro Projects](#astro-projects)
10. [Mobile Projects](#mobile-projects)
11. [JavaScript/TypeScript Backend](#javascripttypescript-backend)
12. [Python Backend](#python-backend)
13. [Go Backend](#go-backend)
14. [Rust Backend](#rust-backend)
15. [Java/Kotlin Backend](#javakotlin-backend)
16. [Other Backends](#other-backends)
17. [Libraries & Packages](#libraries--packages)
18. [CLI Tools](#cli-tools)
19. [Browser Extensions](#browser-extensions)
20. [Desktop Apps](#desktop-apps)
21. [Serverless & Edge](#serverless--edge)
22. [Full-Stack Templates](#full-stack-templates)
23. [Monorepos](#monorepos)
24. [Code Quality & Tooling](#code-quality--tooling)
25. [Testing Configuration](#testing-configuration)
26. [DevOps & Deployment](#devops--deployment)
---
## Language & SDK Options
### JavaScript/TypeScript
| Option | Choices | Default |
|--------|---------|---------|
| Language | TypeScript, JavaScript | TypeScript |
| Strict mode | Yes, No | Yes |
| Path aliases (@/*) | Yes, No | Yes |
| Runtime | Node.js 20/22, Bun, Deno | Node.js 22 |
| Package Manager | npm, yarn, pnpm, bun | pnpm |
### Python
| Option | Choices | Default |
|--------|---------|---------|
| Version | 3.11, 3.12, 3.13 | 3.12 |
| Environment | venv, uv, poetry, pipenv, conda | uv |
| Type Hints | Full, Minimal, None | Full |
### Go
| Option | Choices | Default |
|--------|---------|---------|
| Version | 1.22, 1.23 | 1.23 |
| Module Path | github.com/username/project | - |
### Rust
| Option | Choices | Default |
|--------|---------|---------|
| Edition | 2021, 2024 | 2021 |
| Crate Type | Binary, Library, Both | Library |
### Java/Kotlin
| Option | Choices | Default |
|--------|---------|---------|
| Java Version | 17 LTS, 21 LTS, 23 | 21 LTS |
| Build Tool | Gradle (Kotlin DSL), Gradle (Groovy), Maven | Gradle (Kotlin DSL) |
---
## HTML/CSS Projects
### Structure Options
- Single page (index.html only)
- Multi-page (index, about, contact, etc.) *recommended*
- Landing page template
### CSS Approach
- Plain CSS
- Sass/SCSS *recommended*
- Tailwind CLI
- CSS Variables + Custom Properties
### Features
- Responsive design (mobile-first) *recommended*
- SEO meta tags *recommended*
- Open Graph tags
- Favicon set
- Sitemap.xml
- Robots.txt
### JavaScript Enhancement
- None (pure HTML/CSS)
- Vanilla JS (minimal interactivity)
- Alpine.js (reactive)
- HTMX (server interactions)
### CSS Methodology
- BEM naming convention *recommended*
- SMACSS
- Utility-first
- None (custom)
### Development Tools
- Live Server / Browser Sync *recommended*
- Sass watch mode
- Image optimization script
---
## React Projects
### Build Tool
- Vite *recommended*
- Create React App (legacy)
### CSS Framework
- Tailwind CSS *recommended*
- CSS Modules
- Styled Components
- Emotion
- Vanilla Extract
- UnoCSS
- None
### UI Component Library
- None
- shadcn/ui *recommended*
- Radix UI
- Headless UI
- Chakra UI
- Material UI
- Ant Design
### State Management
- None (React Context only)
- Zustand *recommended*
- Jotai (atomic)
- Redux Toolkit
- TanStack Query (server state)
### Data Fetching
- TanStack Query *recommended*
- SWR
- Apollo Client (GraphQL)
- None
### Routing
- React Router v6 *recommended*
- TanStack Router
- None
### Forms
- React Hook Form + Zod *recommended*
- Formik + Yup
- None
### Testing
- Vitest + Testing Library *recommended*
- Jest + Testing Library
- None
---
## Next.js Projects
### Version & Router
- Next.js 14+ App Router *recommended*
- Next.js Pages Router
### Features
- TypeScript *default*
- ESLint *default*
- Tailwind CSS *default*
- src/ directory *default*
- Turbopack
### Database/ORM
- None
- Prisma *recommended*
- Drizzle
- Supabase
### Authentication
- None
- NextAuth.js / Auth.js *recommended*
- Clerk
- Lucia
- Custom JWT
### API Style
- REST (Route Handlers)
- tRPC *recommended for full-stack*
- GraphQL (Apollo/Yoga)
---
## Vue Projects
### Build Tool
- Vite *recommended*
- Vue CLI (legacy)
### API Style
- Composition API *recommended*
- Options API
### CSS Framework
- Tailwind CSS *recommended*
- UnoCSS
- CSS Modules
- None
### UI Component Library
- None
- Vuetify
- PrimeVue
- Naive UI
- Element Plus
- Headless UI
### State Management
- Pinia *recommended*
- Vuex (legacy)
- None
### Routing
- Vue Router *default*
### Forms
- VeeValidate + Zod *recommended*
- FormKit
- None
### Testing
- Vitest + Vue Test Utils *recommended*
- Jest
- None
---
## Nuxt Projects
### Version
- Nuxt 3 *recommended*
### Features
- TypeScript *default*
- Auto-imports *default*
- ESLint *default*
- Tailwind CSS (@nuxtjs/tailwindcss)
### Rendering Mode
- Universal (SSR) *recommended*
- SPA (client-only)
- Static (SSG)
- Hybrid
### Modules
- @pinia/nuxt (state) *recommended*
- @nuxt/image
- @nuxt/content (for content sites)
- @sidebase/nuxt-auth
### API
- Nitro server routes *default*
- tRPC (@trpc-nuxt/client)
---
## Svelte Projects
### Framework
- SvelteKit *recommended*
- Svelte (standalone)
### Features
- TypeScript *default*
- ESLint *default*
### CSS Framework
- Tailwind CSS *recommended*
- UnoCSS
- None
### State Management
- Svelte stores *default*
- None (props only)
### Rendering Mode (SvelteKit)
- SSR *default*
- SPA
- Static (prerender)
### Testing
- Vitest + Testing Library *recommended*
- Playwright (E2E)
---
## Angular Projects
### Version
- Angular 17+ *recommended*
### Features
- TypeScript *default*
- Standalone components *recommended*
- Signals *recommended*
- SSR (Angular Universal)
### CSS Framework
- Tailwind CSS
- Angular Material *recommended*
- PrimeNG
- None (SCSS)
### State Management
- Signals *recommended*
- NgRx
- Akita
- None (services)
### HTTP Client
- HttpClient *default*
- Apollo Client (GraphQL)
### Forms
- Reactive Forms *recommended*
- Template-driven Forms
### Testing
- Jest *recommended*
- Karma (default)
- Playwright (E2E)
---
## Astro Projects
### Template
- Minimal *default*
- Blog
- Documentation (Starlight)
- Portfolio
### Integrations
- React
- Vue
- Svelte
- Solid
- Tailwind CSS *recommended*
- MDX
### Rendering Mode
- Static (SSG)
- Hybrid (SSG + SSR) *recommended*
- Server (SSR)
---
## Mobile Projects
### React Native / Expo
#### Template
- Expo (managed workflow) *recommended*
- Expo (bare workflow)
- React Native CLI
#### Navigation
- Expo Router (file-based) *recommended*
- React Navigation
#### Features
- TypeScript *default*
- NativeWind (Tailwind)
- Tamagui
- Expo Router typed routes
### Flutter
#### Platforms
- Android *default*
- iOS *default*
- Web
- Desktop (Windows/macOS/Linux)
#### State Management
- Riverpod *recommended*
- BLoC
- Provider
- GetX
#### Integrations
- Firebase
- Supabase
- Local storage (Hive/Isar)
---
## JavaScript/TypeScript Backend
### Express
#### Features
- TypeScript *recommended*
- ESLint + Prettier
#### Project Structure
- Simple (single file)
- Standard (routes/, controllers/, services/) *recommended*
- Domain-driven
#### Database/ORM
- None
- Prisma *recommended*
- Drizzle
- TypeORM
- Sequelize
#### Authentication
- None
- Passport.js *recommended*
- Custom JWT
#### Validation
- Zod *recommended*
- Joi
- express-validator
### NestJS
#### Features
- TypeScript *default*
- Strict mode *default*
#### Database/ORM
- Prisma *recommended*
- TypeORM
- Sequelize
- Mongoose (MongoDB)
#### Authentication
- @nestjs/passport *recommended*
- Custom guards
#### API Style
- REST *default*
- GraphQL (@nestjs/graphql)
- gRPC
#### Microservices
- None (monolith)
- @nestjs/microservices
### Fastify
#### Features
- TypeScript *recommended*
- Schema validation (JSON Schema)
#### Plugins
- @fastify/cors
- @fastify/jwt
- @fastify/swagger
### Hono
#### Runtime
- Node.js
- Bun *recommended*
- Cloudflare Workers
- Deno
#### Features
- TypeScript *default*
- Zod validation
- JWT middleware
### Elysia
#### Runtime
- Bun *required*
#### Features
- TypeScript *default*
- End-to-end type safety
- Swagger/OpenAPI
### tRPC
#### Framework Integration
- Next.js *recommended*
- Express
- Fastify
- Standalone
#### Features
- Zod validation *default*
- React Query integration
- Subscriptions (WebSocket)
### Koa
#### Features
- TypeScript *recommended*
- Middleware-based
#### Common Middleware
- koa-router
- koa-bodyparser
- koa-jwt
---
## Python Backend
### FastAPI
#### Project Structure
- Simple (single main.py)
- Standard (app/ directory) *recommended*
- Large-scale (domain-driven)
#### Database
- None
- SQLite (development)
- PostgreSQL *recommended*
- MySQL
- MongoDB
#### ORM
- SQLAlchemy 2.0 *recommended*
- SQLModel
- Tortoise ORM
- Beanie (MongoDB)
#### Authentication
- None
- JWT with python-jose *recommended*
- OAuth2 with authlib
- Session-based
#### Additional Features
- Background tasks (Celery/ARQ)
- WebSocket support
- GraphQL (Strawberry)
- Redis caching
### Django
#### API Framework
- Django REST Framework *recommended*
- Django Ninja
#### Features
- Custom User model *recommended*
- Celery for background tasks
- Channels (WebSocket)
#### Database
- PostgreSQL *recommended*
- MySQL
- SQLite (dev)
#### Authentication
- Django Allauth *recommended*
- Simple JWT
- Session-based
### Flask
#### Extensions
- Flask-SQLAlchemy
- Flask-Migrate
- Flask-JWT-Extended
- Flask-CORS
### Litestar
#### Features
- Async-first
- Msgspec/Pydantic validation
- SQLAlchemy integration
---
## Go Backend
### Framework
- Gin *recommended*
- Fiber
- Echo
- Chi
- Standard library (net/http)
### Project Structure
- Simple (single main.go)
- Standard (internal/, cmd/, pkg/) *recommended*
- Domain-driven
### Database
- None
- PostgreSQL *recommended*
- MySQL
- MongoDB
- SQLite
### ORM/Query Builder
- sqlc (type-safe SQL) *recommended*
- GORM
- sqlx
- Ent
### Features
- JWT authentication
- Rate limiting
- Swagger/OpenAPI (swaggo)
- Graceful shutdown
---
## Rust Backend
### Framework
- Axum *recommended*
- Actix Web
- Rocket
### Axum Features
- Async runtime (Tokio) *default*
- Database (SQLx + PostgreSQL)
- Tracing/logging
- Error handling (thiserror/anyhow)
- Configuration (config-rs)
### Actix Features
- Actor model
- WebSocket support
- High performance
### Rocket Features
- Request guards
- Fairings (middleware)
- Type-safe routing
---
## Java/Kotlin Backend
### Spring Boot
#### Language
- Java *default*
- Kotlin
#### Dependencies
- Spring Web *default*
- Spring Data JPA *default*
- Spring Security
- Spring Cloud
- Spring Actuator
#### Database
- H2 (dev)
- PostgreSQL *recommended*
- MySQL
- MongoDB
### Quarkus
#### Features
- Native compilation (GraalVM)
- Fast startup
- Low memory footprint
### Ktor
#### Features
- Kotlin-first
- Coroutines
- Lightweight
### Micronaut
#### Features
- Compile-time DI
- GraalVM native
- Cloud-native
---
## Other Backends
### Laravel (PHP)
#### Features
- Eloquent ORM
- Blade templates
- Sanctum (API auth)
- Horizon (queues)
### Ruby on Rails
#### Features
- Active Record
- Action Cable (WebSocket)
- Hotwire/Turbo
### .NET Web API
#### Features
- C# *default*
- Entity Framework Core
- Identity (auth)
- Minimal APIs or Controllers
---
## Libraries & Packages
### TypeScript NPM Package
#### Build Tool
- tsup *recommended*
- Rollup
- esbuild
- tsc only
#### Features
- ESM + CJS dual publish *recommended*
- TypeScript declarations
- Changesets (versioning)
#### Testing
- Vitest *recommended*
- Jest
### Python PyPI Package
#### Build Tool
- Hatch *recommended*
- Poetry
- Setuptools
- Flit
#### Features
- Type hints (py.typed)
- Multiple Python versions
- Documentation (mkdocs/sphinx)
#### Testing
- pytest *recommended*
- tox/nox (multi-version)
### Go Module
#### Features
- Semantic versioning
- Example tests
- Benchmarks
#### Documentation
- pkg.go.dev *default*
- GoDoc comments
### Rust Crate
#### Crate Type
- Library *default*
- Binary
- Proc-macro
#### Features
- Documentation (rustdoc)
- Feature flags
- no_std support
---
## CLI Tools
### Node.js CLI
#### Framework
- Commander.js *recommended*
- Yargs
- Oclif
- CAC
#### Features
- TypeScript *recommended*
- Interactive prompts (inquirer/prompts)
- Progress bars (ora/cli-progress)
- Colors (chalk/picocolors)
### Python CLI
#### Framework
- Typer *recommended*
- Click
- argparse (stdlib)
#### Features
- Rich (formatting)
- Type hints
- Auto-completion
### Go CLI
#### Framework
- Cobra *recommended*
- urfave/cli
- Kong
#### Features
- Viper (config)
- Cross-compilation
- Single binary
### Rust CLI
#### Framework
- Clap *recommended*
- argh
- structopt (legacy)
#### Features
- Colored output (colored/termcolor)
- Progress bars (indicatif)
- Cross-compilation
---
## Browser Extensions
### Chrome Extension
#### Manifest Version
- Manifest V3 *required*
#### Features
- Popup UI
- Options page
- Background service worker
- Content scripts
- Side panel
#### UI Framework
- React + Vite *recommended*
- Vue + Vite
- Svelte
- Vanilla JS
- Plasmo framework
### Firefox Extension
#### Features
- WebExtension API
- Cross-browser compatibility
- Manifest V2/V3
### VS Code Extension
#### Extension Type
- Language support
- Themes/colors
- Snippets
- Commands/tools *default*
- Webview
#### Features
- TypeScript *default*
- Webview UI
- Language Server Protocol
- Testing setup
### Figma Plugin
#### Features
- TypeScript *recommended*
- UI (HTML/CSS or React)
- Figma API
### Obsidian Plugin
#### Features
- TypeScript *recommended*
- Obsidian API
- Settings tab
---
## Desktop Apps
### Tauri
#### Frontend
- React + Vite *recommended*
- Vue + Vite
- Svelte + Vite
- Solid + Vite
- Vanilla
#### Features
- System tray
- Auto-updater
- Custom titlebar
- File system access
### Electron
#### Frontend
- React *recommended*
- Vue
- Svelte
- Vanilla
#### Build Tool
- Electron Forge *recommended*
- electron-builder
#### Features
- Auto-updater
- Native menus
- System tray
- IPC communication
---
## Serverless & Edge
### AWS Lambda
#### Runtime
- Node.js 20 *recommended*
- Python 3.12
- Go
- Rust (custom runtime)
#### Framework
- SST *recommended*
- Serverless Framework
- SAM
- CDK
#### Features
- API Gateway
- DynamoDB
- S3 triggers
- EventBridge
### Cloudflare Workers
#### Framework
- Hono *recommended*
- Itty Router
- None (Fetch API)
#### Features
- KV storage
- D1 (SQLite)
- R2 (object storage)
- Durable Objects
### Vercel Functions
#### Runtime
- Node.js *default*
- Edge Runtime
#### Features
- Next.js API routes
- Edge middleware
- Cron jobs
### Supabase Functions
#### Runtime
- Deno *default*
#### Features
- Database access
- Auth integration
- Edge deployment
---
## Full-Stack Templates
### T3 Stack
- Next.js 14+ (App Router)
- tRPC
- Prisma
- Tailwind CSS
- NextAuth.js
### MERN Stack
- MongoDB
- Express
- React
- Node.js
### PERN Stack
- PostgreSQL
- Express
- React
- Node.js
### MEAN Stack
- MongoDB
- Express
- Angular
- Node.js
---
## Monorepos
### Turborepo
#### Package Manager
- pnpm *recommended*
- npm
- yarn
#### Features
- Remote caching
- Parallel execution
- Incremental builds
#### Structure
- apps/ (applications)
- packages/ (shared libraries)
### Nx Workspace
#### Features
- Generators
- Executors
- Affected commands
- Module federation
#### Plugins
- @nx/react
- @nx/next
- @nx/node
- @nx/nest
### pnpm Workspace
#### Features
- Simple setup
- Workspace protocol
- Catalog (shared deps)
---
## Code Quality & Tooling
### JavaScript/TypeScript
| Tool | Options | Default |
|------|---------|---------|
| Linting | ESLint (flat config), Biome | ESLint |
| Formatting | Prettier, Biome | Prettier |
| Pre-commit | lint-staged + husky | Yes |
### Python
| Tool | Options | Default |
|------|---------|---------|
| Linting | Ruff, Flake8, Pylint | Ruff |
| Formatting | Ruff, Black | Ruff |
| Pre-commit | pre-commit framework | Yes |
### Go
| Tool | Options | Default |
|------|---------|---------|
| Linting | golangci-lint | Yes |
| Formatting | gofmt/goimports | Yes |
### Rust
| Tool | Options | Default |
|------|---------|---------|
| Linting | clippy | Yes |
| Formatting | rustfmt | Yes |
### CSS
| Tool | Options | Default |
|------|---------|---------|
| Linting | Stylelint | Yes (for CSS/SCSS) |
---
## Testing Configuration
### Unit Testing
| Language | Options | Default |
|----------|---------|---------|
| JS/TS | Vitest, Jest | Vitest |
| Python | pytest, unittest | pytest |
| Go | Built-in, Testify | Built-in |
| Rust | Built-in | Built-in |
### E2E Testing
| Tool | Best For |
|------|----------|
| Playwright *recommended* | Cross-browser, modern |
| Cypress | Component + E2E |
### Coverage
- With threshold (80%) *recommended*
- Reporting only
- None
---
## DevOps & Deployment
### Version Control
- Initialize Git repository *default*
- Add .gitignore *default*
- Create initial commit *default*
### CI/CD
- GitHub Actions *recommended*
- GitLab CI
- None
### Containerization
- Dockerfile (multi-stage) *recommended*
- docker-compose.yml *recommended*
- None
### Deployment Targets
| Target | Best For |
|--------|----------|
| GitHub Pages | Static HTML/CSS |
| Netlify | Static/JAMstack |
| Vercel | Next.js, frontend |
| Railway | Full-stack, databases |
| Fly.io | Containers, edge |
| AWS (ECS/Lambda) | Enterprise |
| Google Cloud Run | Containers |
| Self-hosted | Full control |
### Environment Management
- .env.example template *default*
- Config validation (Zod/Pydantic) *recommended*
### Monitoring
- Structured logging
- Error tracking (Sentry)
- None
```
### scripts/scaffold.py
```python
#!/usr/bin/env python3
"""
Project scaffolding script - IDE-grade project creation comparable to WebStorm/PyCharm.
Supports comprehensive configuration options for modern development workflows.
"""
import os
import sys
import json
import shutil
import subprocess
from pathlib import Path
from typing import Dict, List, Optional, Any
from dataclasses import dataclass, field
from enum import Enum
class Language(Enum):
TYPESCRIPT = "typescript"
JAVASCRIPT = "javascript"
PYTHON = "python"
class PackageManager(Enum):
NPM = "npm"
YARN = "yarn"
PNPM = "pnpm"
BUN = "bun"
PIP = "pip"
POETRY = "poetry"
PIPENV = "pipenv"
CONDA = "conda"
class CSSFramework(Enum):
TAILWIND = "tailwind"
CSS_MODULES = "css-modules"
STYLED_COMPONENTS = "styled-components"
EMOTION = "emotion"
SCSS = "scss"
NONE = "none"
class Database(Enum):
NONE = "none"
SQLITE = "sqlite"
POSTGRESQL = "postgresql"
MYSQL = "mysql"
MONGODB = "mongodb"
class ORM(Enum):
NONE = "none"
PRISMA = "prisma"
DRIZZLE = "drizzle"
TYPEORM = "typeorm"
SEQUELIZE = "sequelize"
SQLALCHEMY = "sqlalchemy"
SQLMODEL = "sqlmodel"
TORTOISE = "tortoise"
MONGOOSE = "mongoose"
@dataclass
class ProjectConfig:
"""Configuration for a new project."""
name: str
project_type: str
language: Language = Language.TYPESCRIPT
description: str = ""
author: str = ""
license: str = "MIT"
version: str = "0.1.0"
# SDK/Runtime
node_version: str = "22"
python_version: str = "3.12"
package_manager: PackageManager = PackageManager.NPM
# Framework options
css_framework: CSSFramework = CSSFramework.TAILWIND
database: Database = Database.NONE
orm: ORM = ORM.NONE
# Features
typescript_strict: bool = True
eslint: bool = True
prettier: bool = True
testing: bool = True
docker: bool = False
github_actions: bool = False
# Python-specific
type_hints: bool = True
ruff: bool = True
mypy: bool = True
pytest: bool = True
# Additional features
features: List[str] = field(default_factory=list)
class ProjectScaffolder:
"""Main scaffolding engine for creating projects with IDE-grade configuration."""
def __init__(self, base_path: Path = Path.cwd()):
self.base_path = base_path
def create_project(self, config: ProjectConfig) -> Path:
"""Create a new project from configuration."""
project_path = self.base_path / config.name
if project_path.exists():
raise FileExistsError(f"Project {config.name} already exists")
# Map project types to creation methods
creators = {
# Static Sites
"html": self._create_html,
# Frontend
"react": self._create_react,
"nextjs": self._create_nextjs,
"vue": self._create_vue,
"nuxt": self._create_nuxt,
"svelte": self._create_svelte,
"angular": self._create_angular,
# Backend
"express": self._create_express,
"nestjs": self._create_nestjs,
"fastapi": self._create_fastapi,
"django": self._create_django,
"flask": self._create_flask,
# Libraries
"python": self._create_python,
"typescript": self._create_typescript_lib,
"cli": self._create_cli,
"electron": self._create_electron,
"monorepo": self._create_monorepo,
}
if config.project_type not in creators:
raise ValueError(f"Unknown project type: {config.project_type}")
project_path.mkdir(parents=True)
creators[config.project_type](project_path, config)
return project_path
# =========================================================================
# Frontend Projects
# =========================================================================
def _create_react(self, path: Path, config: ProjectConfig):
"""Create a React project with Vite."""
# Create directory structure
self._create_dirs(path, [
"src/components/ui",
"src/components/features",
"src/hooks",
"src/lib",
"src/types",
"src/styles",
"public",
"tests/unit",
"tests/e2e",
])
# Package.json
ext = "tsx" if config.language == Language.TYPESCRIPT else "jsx"
deps = {
"react": "^18.2.0",
"react-dom": "^18.2.0",
}
dev_deps = {
"@vitejs/plugin-react": "^4.2.0",
"vite": "^5.0.0",
}
if config.language == Language.TYPESCRIPT:
dev_deps.update({
"typescript": "^5.3.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
})
if config.css_framework == CSSFramework.TAILWIND:
dev_deps.update({
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0",
})
if config.eslint:
dev_deps.update({
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.0",
"eslint-plugin-react-hooks": "^4.6.0",
})
if config.language == Language.TYPESCRIPT:
dev_deps["@typescript-eslint/eslint-plugin"] = "^6.0.0"
dev_deps["@typescript-eslint/parser"] = "^6.0.0"
if config.prettier:
dev_deps["prettier"] = "^3.1.0"
if config.testing:
dev_deps.update({
"vitest": "^1.0.0",
"@testing-library/react": "^14.0.0",
"@testing-library/jest-dom": "^6.0.0",
})
# State management based on features
if "zustand" in config.features:
deps["zustand"] = "^4.4.0"
if "redux" in config.features:
deps["@reduxjs/toolkit"] = "^2.0.0"
deps["react-redux"] = "^9.0.0"
# Data fetching
if "tanstack-query" in config.features:
deps["@tanstack/react-query"] = "^5.0.0"
# Routing
if "react-router" in config.features:
deps["react-router-dom"] = "^6.20.0"
package_json = self._create_package_json(config, deps, dev_deps, {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint src --ext .ts,.tsx" if config.eslint else None,
"format": "prettier --write src" if config.prettier else None,
"test": "vitest" if config.testing else None,
"test:coverage": "vitest --coverage" if config.testing else None,
})
self._write_json(path / "package.json", package_json)
# Vite config
vite_config = self._generate_vite_config(config)
self._write_file(path / "vite.config.ts", vite_config)
# TypeScript config
if config.language == Language.TYPESCRIPT:
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "react"))
# Tailwind config
if config.css_framework == CSSFramework.TAILWIND:
self._create_tailwind_config(path, config)
# ESLint config
if config.eslint:
self._create_eslint_config(path, config, "react")
# Prettier config
if config.prettier:
self._create_prettier_config(path)
# Source files
self._write_file(path / f"src/main.{ext}", self._react_main(config))
self._write_file(path / f"src/App.{ext}", self._react_app(config))
self._write_file(path / "src/styles/globals.css", self._css_globals(config))
self._write_file(path / "index.html", self._react_index_html(config))
# Vitest config
if config.testing:
self._write_file(path / "vitest.config.ts", self._vitest_config())
self._write_file(path / "tests/setup.ts", self._vitest_setup())
# Common files
self._create_common_files(path, config)
def _create_nextjs(self, path: Path, config: ProjectConfig):
"""Create a Next.js project with App Router."""
# Directory structure
self._create_dirs(path, [
"src/app/(auth)/login",
"src/app/(auth)/register",
"src/app/api",
"src/components/ui",
"src/components/features",
"src/lib",
"src/hooks",
"src/types",
"public",
"tests/unit",
"tests/e2e",
])
if config.orm == ORM.PRISMA:
self._create_dirs(path, ["prisma"])
deps = {
"next": "^14.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
}
dev_deps = {}
if config.language == Language.TYPESCRIPT:
dev_deps.update({
"typescript": "^5.3.0",
"@types/node": "^22.0.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
})
if config.css_framework == CSSFramework.TAILWIND:
dev_deps.update({
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0",
})
if config.eslint:
dev_deps.update({
"eslint": "^8.56.0",
"eslint-config-next": "^14.0.0",
})
if config.prettier:
dev_deps["prettier"] = "^3.1.0"
dev_deps["prettier-plugin-tailwindcss"] = "^0.5.0"
if config.testing:
dev_deps.update({
"vitest": "^1.0.0",
"@testing-library/react": "^14.0.0",
"@vitejs/plugin-react": "^4.2.0",
})
# ORM
if config.orm == ORM.PRISMA:
deps["@prisma/client"] = "^5.7.0"
dev_deps["prisma"] = "^5.7.0"
# Auth
if "nextauth" in config.features:
deps["next-auth"] = "^4.24.0"
package_json = self._create_package_json(config, deps, dev_deps, {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint" if config.eslint else None,
"format": "prettier --write ." if config.prettier else None,
"test": "vitest" if config.testing else None,
"db:generate": "prisma generate" if config.orm == ORM.PRISMA else None,
"db:push": "prisma db push" if config.orm == ORM.PRISMA else None,
"db:migrate": "prisma migrate dev" if config.orm == ORM.PRISMA else None,
})
self._write_json(path / "package.json", package_json)
# Next.js config
self._write_file(path / "next.config.js", self._nextjs_config(config))
# TypeScript config
if config.language == Language.TYPESCRIPT:
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "nextjs"))
# Tailwind config
if config.css_framework == CSSFramework.TAILWIND:
self._create_tailwind_config(path, config, framework="nextjs")
# ESLint config
if config.eslint:
self._write_json(path / ".eslintrc.json", {
"extends": ["next/core-web-vitals"],
"rules": {}
})
# Prettier config
if config.prettier:
self._create_prettier_config(path, plugins=["prettier-plugin-tailwindcss"])
# App files
ext = "tsx" if config.language == Language.TYPESCRIPT else "jsx"
self._write_file(path / f"src/app/layout.{ext}", self._nextjs_layout(config))
self._write_file(path / f"src/app/page.{ext}", self._nextjs_page(config))
self._write_file(path / "src/app/globals.css", self._css_globals(config))
# Prisma schema
if config.orm == ORM.PRISMA:
self._write_file(path / "prisma/schema.prisma", self._prisma_schema(config))
self._write_file(path / "src/lib/db.ts", self._prisma_client())
# Lib utilities
self._write_file(path / "src/lib/utils.ts", self._utils_file())
# Common files
self._create_common_files(path, config)
def _create_vue(self, path: Path, config: ProjectConfig):
"""Create a Vue 3 project with Vite."""
self._create_dirs(path, [
"src/components",
"src/composables",
"src/views",
"src/stores",
"src/assets",
"src/router",
"public",
"tests",
])
deps = {"vue": "^3.4.0"}
dev_deps = {
"@vitejs/plugin-vue": "^4.5.0",
"vite": "^5.0.0",
}
if config.language == Language.TYPESCRIPT:
dev_deps.update({
"typescript": "^5.3.0",
"vue-tsc": "^1.8.0",
})
if "pinia" in config.features:
deps["pinia"] = "^2.1.0"
if "vue-router" in config.features:
deps["vue-router"] = "^4.2.0"
if config.css_framework == CSSFramework.TAILWIND:
dev_deps.update({
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0",
})
package_json = self._create_package_json(config, deps, dev_deps, {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"type-check": "vue-tsc --noEmit" if config.language == Language.TYPESCRIPT else None,
})
self._write_json(path / "package.json", package_json)
# Vite config
self._write_file(path / "vite.config.ts", self._vue_vite_config(config))
# TypeScript config
if config.language == Language.TYPESCRIPT:
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "vue"))
# Source files
ext = "ts" if config.language == Language.TYPESCRIPT else "js"
self._write_file(path / f"src/main.{ext}", self._vue_main(config))
self._write_file(path / "src/App.vue", self._vue_app(config))
self._write_file(path / "index.html", self._vue_index_html(config))
if config.css_framework == CSSFramework.TAILWIND:
self._create_tailwind_config(path, config)
self._write_file(path / "src/assets/main.css", self._css_globals(config))
self._create_common_files(path, config)
def _create_nuxt(self, path: Path, config: ProjectConfig):
"""Create a Nuxt 3 project."""
self._create_dirs(path, [
"components",
"composables",
"layouts",
"pages",
"public",
"server/api",
"stores",
])
deps = {}
dev_deps = {"nuxt": "^3.9.0"}
if config.css_framework == CSSFramework.TAILWIND:
dev_deps["@nuxtjs/tailwindcss"] = "^6.10.0"
if "pinia" in config.features:
deps["@pinia/nuxt"] = "^0.5.0"
deps["pinia"] = "^2.1.0"
package_json = self._create_package_json(config, deps, dev_deps, {
"dev": "nuxt dev",
"build": "nuxt build",
"generate": "nuxt generate",
"preview": "nuxt preview",
})
self._write_json(path / "package.json", package_json)
# Nuxt config
self._write_file(path / "nuxt.config.ts", self._nuxt_config(config))
# Pages
self._write_file(path / "pages/index.vue", self._nuxt_index_page(config))
self._write_file(path / "app.vue", self._nuxt_app(config))
self._create_common_files(path, config)
def _create_svelte(self, path: Path, config: ProjectConfig):
"""Create a SvelteKit project."""
self._create_dirs(path, [
"src/lib",
"src/lib/components",
"src/routes",
"static",
"tests",
])
deps = {}
dev_deps = {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"svelte": "^4.2.0",
"vite": "^5.0.0",
}
if config.language == Language.TYPESCRIPT:
dev_deps.update({
"typescript": "^5.3.0",
"svelte-check": "^3.6.0",
"tslib": "^2.6.0",
})
if config.css_framework == CSSFramework.TAILWIND:
dev_deps.update({
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0",
})
package_json = self._create_package_json(config, deps, dev_deps, {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
})
self._write_json(path / "package.json", package_json)
# SvelteKit config
self._write_file(path / "svelte.config.js", self._svelte_config(config))
self._write_file(path / "vite.config.ts", self._svelte_vite_config(config))
# Routes
ext = "ts" if config.language == Language.TYPESCRIPT else "js"
self._write_file(path / f"src/routes/+page.svelte", self._svelte_page(config))
self._write_file(path / f"src/routes/+layout.svelte", self._svelte_layout(config))
if config.css_framework == CSSFramework.TAILWIND:
self._create_tailwind_config(path, config)
self._write_file(path / "src/app.css", self._css_globals(config))
self._write_file(path / "src/app.html", self._svelte_app_html(config))
self._create_common_files(path, config)
def _create_angular(self, path: Path, config: ProjectConfig):
"""Create an Angular project structure (recommend using ng new)."""
# For Angular, we primarily recommend using the CLI
self._create_dirs(path, [
"src/app/components",
"src/app/services",
"src/app/models",
"src/app/pages",
"src/assets",
"src/environments",
])
deps = {
"@angular/core": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"rxjs": "^7.8.0",
"zone.js": "^0.14.0",
}
dev_deps = {
"@angular/cli": "^17.0.0",
"@angular/compiler-cli": "^17.0.0",
"typescript": "^5.2.0",
}
package_json = self._create_package_json(config, deps, dev_deps, {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
})
self._write_json(path / "package.json", package_json)
# Angular config
self._write_json(path / "angular.json", self._angular_config(config))
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "angular"))
self._create_common_files(path, config)
# =========================================================================
# Static Websites
# =========================================================================
def _create_html(self, path: Path, config: ProjectConfig):
"""Create a static HTML/CSS website."""
# Create directory structure
self._create_dirs(path, [
"css",
"js",
"images",
])
# Main HTML file
self._write_file(path / "index.html", self._html_index(config))
# Additional pages
self._write_file(path / "about.html", self._html_about(config))
self._write_file(path / "contact.html", self._html_contact(config))
# CSS files
self._write_file(path / "css/reset.css", self._css_reset())
self._write_file(path / "css/style.css", self._css_main(config))
# JavaScript
self._write_file(path / "js/main.js", self._js_main())
# Favicon and robots.txt
self._write_file(path / "robots.txt", "User-agent: *\nDisallow:\n")
# Package.json for dev server (optional)
if config.css_framework == CSSFramework.TAILWIND:
package_json = {
"name": config.name,
"version": config.version,
"description": config.description or "",
"scripts": {
"dev": "npx tailwindcss -i ./css/style.css -o ./css/output.css --watch",
"build": "npx tailwindcss -i ./css/style.css -o ./css/output.css --minify",
},
"devDependencies": {
"tailwindcss": "^3.4.0"
}
}
self._write_json(path / "package.json", package_json)
# Create Tailwind config (no PostCSS needed for CLI usage)
tailwind_config = """/** @type {import('tailwindcss').Config} */
export default {
content: ['./**/*.html'],
theme: {
extend: {},
},
plugins: [],
}
"""
self._write_file(path / "tailwind.config.js", tailwind_config)
else:
# Simple package.json for live server
package_json = {
"name": config.name,
"version": config.version,
"description": config.description or "",
"scripts": {
"dev": "npx live-server",
},
"devDependencies": {
"live-server": "^1.2.2"
}
}
self._write_json(path / "package.json", package_json)
# Create basic README
readme = f"""# {config.name}
{config.description or 'A static HTML/CSS website'}
## Development
Start the development server:
```bash
npm install
npm run dev
```
The site will be available at http://localhost:8080
## Project Structure
```
{config.name}/
├── index.html # Home page
├── about.html # About page
├── contact.html # Contact page
├── css/
│ ├── reset.css # CSS reset
│ └── style.css # Main styles
├── js/
│ └── main.js # Main JavaScript
├── images/ # Image assets
└── robots.txt # SEO
```
## Features
- Mobile-first responsive design
- BEM naming convention for CSS
- Semantic HTML5
- SEO-ready
{'- Tailwind CSS' if config.css_framework == CSSFramework.TAILWIND else '- Pure CSS'}
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## License
{config.license}
"""
self._write_file(path / "README.md", readme)
# .gitignore for HTML projects
gitignore = """# Dependencies
node_modules/
# Tailwind output
css/output.css
# OS files
.DS_Store
Thumbs.db
# Editor
.vscode/
.idea/
*.sublime-*
# Logs
*.log
"""
self._write_file(path / ".gitignore", gitignore)
# =========================================================================
# Backend Projects
# =========================================================================
def _create_express(self, path: Path, config: ProjectConfig):
"""Create an Express.js project."""
self._create_dirs(path, [
"src/routes",
"src/controllers",
"src/middleware",
"src/models",
"src/services",
"src/utils",
"src/config",
"tests",
])
deps = {
"express": "^4.18.0",
"cors": "^2.8.0",
"helmet": "^7.1.0",
"morgan": "^1.10.0",
"dotenv": "^16.3.0",
}
dev_deps = {}
if config.language == Language.TYPESCRIPT:
dev_deps.update({
"typescript": "^5.3.0",
"@types/node": "^22.0.0",
"@types/express": "^4.17.0",
"@types/cors": "^2.8.0",
"@types/morgan": "^1.9.0",
"ts-node": "^10.9.0",
"tsx": "^4.6.0",
"nodemon": "^3.0.0",
})
if config.orm == ORM.PRISMA:
deps["@prisma/client"] = "^5.7.0"
dev_deps["prisma"] = "^5.7.0"
elif config.orm == ORM.TYPEORM:
deps["typeorm"] = "^0.3.0"
deps["reflect-metadata"] = "^0.1.0"
elif config.orm == ORM.SEQUELIZE:
deps["sequelize"] = "^6.35.0"
if config.database == Database.POSTGRESQL:
deps["pg"] = "^8.11.0"
elif config.database == Database.MYSQL:
deps["mysql2"] = "^3.6.0"
elif config.database == Database.MONGODB:
deps["mongoose"] = "^8.0.0"
if "zod" in config.features:
deps["zod"] = "^3.22.0"
if "swagger" in config.features:
deps["swagger-ui-express"] = "^5.0.0"
deps["swagger-jsdoc"] = "^6.2.0"
if config.testing:
dev_deps.update({
"vitest": "^1.0.0",
"supertest": "^6.3.0",
"@types/supertest": "^2.0.0",
})
package_json = self._create_package_json(config, deps, dev_deps, {
"dev": "tsx watch src/index.ts" if config.language == Language.TYPESCRIPT else "nodemon src/index.js",
"build": "tsc" if config.language == Language.TYPESCRIPT else None,
"start": "node dist/index.js" if config.language == Language.TYPESCRIPT else "node src/index.js",
"lint": "eslint src" if config.eslint else None,
"test": "vitest" if config.testing else None,
})
self._write_json(path / "package.json", package_json)
# TypeScript config
if config.language == Language.TYPESCRIPT:
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "node"))
# Source files
ext = "ts" if config.language == Language.TYPESCRIPT else "js"
self._write_file(path / f"src/index.{ext}", self._express_index(config))
self._write_file(path / f"src/app.{ext}", self._express_app(config))
self._write_file(path / f"src/config/index.{ext}", self._express_config(config))
self._write_file(path / f"src/routes/index.{ext}", self._express_routes(config))
self._write_file(path / f"src/middleware/errorHandler.{ext}", self._express_error_handler(config))
self._create_common_files(path, config)
def _create_nestjs(self, path: Path, config: ProjectConfig):
"""Create a NestJS project structure."""
self._create_dirs(path, [
"src/modules",
"src/common/decorators",
"src/common/filters",
"src/common/guards",
"src/common/interceptors",
"src/config",
"test",
])
deps = {
"@nestjs/common": "^10.0.0",
"@nestjs/core": "^10.0.0",
"@nestjs/platform-express": "^10.0.0",
"reflect-metadata": "^0.1.0",
"rxjs": "^7.8.0",
}
dev_deps = {
"@nestjs/cli": "^10.0.0",
"@nestjs/schematics": "^10.0.0",
"@types/node": "^22.0.0",
"@types/express": "^4.17.0",
"typescript": "^5.3.0",
"ts-node": "^10.9.0",
}
if config.testing:
dev_deps.update({
"@nestjs/testing": "^10.0.0",
"jest": "^29.7.0",
"@types/jest": "^29.5.0",
"ts-jest": "^29.1.0",
})
package_json = self._create_package_json(config, deps, dev_deps, {
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"build": "nest build",
"test": "jest" if config.testing else None,
"test:watch": "jest --watch" if config.testing else None,
})
self._write_json(path / "package.json", package_json)
# Nest CLI config
self._write_json(path / "nest-cli.json", {
"$schema": "https://json.schemastore.org/nest-cli",
"collection": "@nestjs/schematics",
"sourceRoot": "src"
})
# TypeScript config
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "nestjs"))
# Source files
self._write_file(path / "src/main.ts", self._nestjs_main(config))
self._write_file(path / "src/app.module.ts", self._nestjs_app_module(config))
self._write_file(path / "src/app.controller.ts", self._nestjs_controller(config))
self._write_file(path / "src/app.service.ts", self._nestjs_service(config))
self._create_common_files(path, config)
def _create_fastapi(self, path: Path, config: ProjectConfig):
"""Create a FastAPI project."""
# Determine structure based on features
if "large-scale" in config.features:
self._create_dirs(path, [
"app/api/v1/endpoints",
"app/core",
"app/models",
"app/schemas",
"app/services",
"app/db",
"tests/unit",
"tests/integration",
"alembic/versions",
])
else:
self._create_dirs(path, [
"app/api",
"app/models",
"app/schemas",
"app/core",
"tests",
])
# Requirements
requirements = [
"fastapi>=0.109.0",
"uvicorn[standard]>=0.25.0",
"pydantic>=2.5.0",
"pydantic-settings>=2.1.0",
"python-dotenv>=1.0.0",
]
dev_requirements = []
if config.orm == ORM.SQLALCHEMY:
requirements.extend([
"sqlalchemy>=2.0.0",
"alembic>=1.13.0",
])
if config.database == Database.POSTGRESQL:
requirements.append("asyncpg>=0.29.0")
requirements.append("psycopg2-binary>=2.9.0")
elif config.database == Database.MYSQL:
requirements.append("aiomysql>=0.2.0")
elif config.database == Database.SQLITE:
requirements.append("aiosqlite>=0.19.0")
elif config.orm == ORM.SQLMODEL:
requirements.append("sqlmodel>=0.0.14")
if "jwt" in config.features:
requirements.extend([
"python-jose[cryptography]>=3.3.0",
"passlib[bcrypt]>=1.7.0",
])
if "celery" in config.features:
requirements.extend([
"celery>=5.3.0",
"redis>=5.0.0",
])
if config.pytest:
dev_requirements.extend([
"pytest>=7.4.0",
"pytest-asyncio>=0.23.0",
"pytest-cov>=4.1.0",
"httpx>=0.26.0",
])
if config.ruff:
dev_requirements.append("ruff>=0.1.0")
if config.mypy:
dev_requirements.append("mypy>=1.8.0")
# Write requirements
self._write_file(path / "requirements.txt", "\n".join(requirements))
if dev_requirements:
self._write_file(path / "requirements-dev.txt", "\n".join(dev_requirements))
# pyproject.toml
self._write_file(path / "pyproject.toml", self._fastapi_pyproject(config))
# Source files
self._write_file(path / "app/__init__.py", "")
self._write_file(path / "app/main.py", self._fastapi_main(config))
self._write_file(path / "app/core/__init__.py", "")
self._write_file(path / "app/core/config.py", self._fastapi_config(config))
self._write_file(path / "app/api/__init__.py", "")
if config.orm == ORM.SQLALCHEMY:
self._write_file(path / "app/db/__init__.py", "")
self._write_file(path / "app/db/session.py", self._fastapi_db_session(config))
self._write_file(path / "app/db/base.py", self._fastapi_db_base())
self._write_file(path / "alembic.ini", self._alembic_ini(config))
self._write_file(path / "alembic/env.py", self._alembic_env(config))
# Ruff config
if config.ruff:
self._write_file(path / "ruff.toml", self._ruff_config())
# Docker
if config.docker:
self._write_file(path / "Dockerfile", self._fastapi_dockerfile(config))
self._write_file(path / "docker-compose.yml", self._fastapi_docker_compose(config))
self._create_common_files(path, config, python=True)
def _create_django(self, path: Path, config: ProjectConfig):
"""Create a Django project."""
project_name = config.name.replace("-", "_")
self._create_dirs(path, [
f"{project_name}/settings",
"apps/core",
"apps/users",
"static",
"media",
"templates",
"tests",
])
requirements = [
"django>=5.0.0",
"python-dotenv>=1.0.0",
"django-environ>=0.11.0",
]
if "drf" in config.features:
requirements.append("djangorestframework>=3.14.0")
if config.database == Database.POSTGRESQL:
requirements.append("psycopg2-binary>=2.9.0")
if "celery" in config.features:
requirements.extend([
"celery>=5.3.0",
"django-celery-beat>=2.5.0",
"redis>=5.0.0",
])
self._write_file(path / "requirements.txt", "\n".join(requirements))
# Django settings
self._write_file(path / f"{project_name}/__init__.py", "")
self._write_file(path / f"{project_name}/settings/__init__.py", "from .base import *")
self._write_file(path / f"{project_name}/settings/base.py", self._django_settings_base(config, project_name))
self._write_file(path / f"{project_name}/settings/dev.py", self._django_settings_dev(config))
self._write_file(path / f"{project_name}/settings/prod.py", self._django_settings_prod(config))
self._write_file(path / f"{project_name}/urls.py", self._django_urls(config))
self._write_file(path / f"{project_name}/wsgi.py", self._django_wsgi(config, project_name))
self._write_file(path / f"{project_name}/asgi.py", self._django_asgi(config, project_name))
# manage.py
self._write_file(path / "manage.py", self._django_manage(config, project_name))
# Apps
self._write_file(path / "apps/__init__.py", "")
self._write_file(path / "apps/core/__init__.py", "")
self._write_file(path / "apps/users/__init__.py", "")
self._create_common_files(path, config, python=True)
def _create_flask(self, path: Path, config: ProjectConfig):
"""Create a Flask project."""
self._create_dirs(path, [
"app/api",
"app/models",
"app/services",
"app/templates",
"app/static",
"tests",
])
requirements = [
"flask>=3.0.0",
"python-dotenv>=1.0.0",
]
if config.orm == ORM.SQLALCHEMY:
requirements.append("flask-sqlalchemy>=3.1.0")
self._write_file(path / "requirements.txt", "\n".join(requirements))
self._write_file(path / "app/__init__.py", self._flask_init(config))
self._write_file(path / "app/config.py", self._flask_config(config))
self._write_file(path / "run.py", self._flask_run(config))
self._create_common_files(path, config, python=True)
# =========================================================================
# Library/Tool Projects
# =========================================================================
def _create_python(self, path: Path, config: ProjectConfig):
"""Create a Python package/library."""
package_name = config.name.replace("-", "_")
self._create_dirs(path, [
f"src/{package_name}",
"tests",
"docs",
])
# pyproject.toml
self._write_file(path / "pyproject.toml", self._python_pyproject(config, package_name))
# Package files
self._write_file(path / f"src/{package_name}/__init__.py", f'"""{ config.description or config.name }"""\n\n__version__ = "{config.version}"\n')
self._write_file(path / f"src/{package_name}/main.py", self._python_main(config))
# Tests
self._write_file(path / "tests/__init__.py", "")
self._write_file(path / "tests/test_main.py", self._python_test(config, package_name))
if config.ruff:
self._write_file(path / "ruff.toml", self._ruff_config())
self._create_common_files(path, config, python=True)
def _create_typescript_lib(self, path: Path, config: ProjectConfig):
"""Create a TypeScript library/package."""
self._create_dirs(path, [
"src",
"tests",
"dist",
])
deps = {}
dev_deps = {
"typescript": "^5.3.0",
"tsup": "^8.0.0",
}
if config.testing:
dev_deps["vitest"] = "^1.0.0"
if config.eslint:
dev_deps.update({
"eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
})
package_json = self._create_package_json(config, deps, dev_deps, {
"build": "tsup",
"dev": "tsup --watch",
"test": "vitest" if config.testing else None,
"lint": "eslint src" if config.eslint else None,
"prepublishOnly": "npm run build",
})
package_json["main"] = "./dist/index.js"
package_json["module"] = "./dist/index.mjs"
package_json["types"] = "./dist/index.d.ts"
package_json["exports"] = {
".": {
"require": "./dist/index.js",
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts"
}
}
package_json["files"] = ["dist"]
self._write_json(path / "package.json", package_json)
# tsconfig
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "library"))
# tsup config
self._write_file(path / "tsup.config.ts", self._tsup_config())
# Source files
self._write_file(path / "src/index.ts", f'export const hello = (name: string): string => `Hello, ${{name}}!`;\n')
if config.testing:
self._write_file(path / "tests/index.test.ts", "import { describe, it, expect } from 'vitest';\nimport { hello } from '../src';\n\ndescribe('hello', () => {\n it('should greet', () => {\n expect(hello('World')).toBe('Hello, World!');\n });\n});\n")
self._create_common_files(path, config)
def _create_cli(self, path: Path, config: ProjectConfig):
"""Create a CLI tool project."""
if config.language == Language.PYTHON:
self._create_python_cli(path, config)
else:
self._create_node_cli(path, config)
def _create_python_cli(self, path: Path, config: ProjectConfig):
"""Create a Python CLI with Click or Typer."""
package_name = config.name.replace("-", "_")
self._create_dirs(path, [
f"src/{package_name}/commands",
"tests",
])
requirements = [
"typer[all]>=0.9.0",
"rich>=13.7.0",
]
self._write_file(path / "requirements.txt", "\n".join(requirements))
self._write_file(path / "pyproject.toml", self._python_cli_pyproject(config, package_name))
self._write_file(path / f"src/{package_name}/__init__.py", f'__version__ = "{config.version}"\n')
self._write_file(path / f"src/{package_name}/__main__.py", f"from {package_name}.cli import app\n\nif __name__ == '__main__':\n app()\n")
self._write_file(path / f"src/{package_name}/cli.py", self._python_cli_main(config, package_name))
self._create_common_files(path, config, python=True)
def _create_node_cli(self, path: Path, config: ProjectConfig):
"""Create a Node.js CLI tool."""
self._create_dirs(path, [
"src/commands",
"tests",
])
deps = {
"commander": "^11.1.0",
"chalk": "^5.3.0",
"ora": "^8.0.0",
}
dev_deps = {}
if config.language == Language.TYPESCRIPT:
dev_deps.update({
"typescript": "^5.3.0",
"@types/node": "^22.0.0",
"tsup": "^8.0.0",
})
package_json = self._create_package_json(config, deps, dev_deps, {
"build": "tsup",
"dev": "tsup --watch",
"start": "node dist/cli.js",
})
package_json["bin"] = {config.name: "./dist/cli.js"}
package_json["type"] = "module"
self._write_json(path / "package.json", package_json)
if config.language == Language.TYPESCRIPT:
self._write_json(path / "tsconfig.json", self._create_tsconfig(config, "node"))
self._write_file(path / "tsup.config.ts", self._cli_tsup_config(config))
ext = "ts" if config.language == Language.TYPESCRIPT else "js"
self._write_file(path / f"src/cli.{ext}", self._node_cli_main(config))
self._create_common_files(path, config)
def _create_electron(self, path: Path, config: ProjectConfig):
"""Create an Electron desktop application."""
self._create_dirs(path, [
"src/main",
"src/renderer",
"src/preload",
"resources",
])
deps = {}
dev_deps = {
"electron": "^28.0.0",
"electron-builder": "^24.9.0",
}
if config.language == Language.TYPESCRIPT:
dev_deps.update({
"typescript": "^5.3.0",
"@types/node": "^22.0.0",
})
package_json = self._create_package_json(config, deps, dev_deps, {
"start": "electron .",
"build": "electron-builder",
})
package_json["main"] = "src/main/index.js"
self._write_json(path / "package.json", package_json)
ext = "ts" if config.language == Language.TYPESCRIPT else "js"
self._write_file(path / f"src/main/index.{ext}", self._electron_main(config))
self._write_file(path / f"src/preload/preload.{ext}", self._electron_preload(config))
self._write_file(path / "src/renderer/index.html", self._electron_html(config))
self._create_common_files(path, config)
def _create_monorepo(self, path: Path, config: ProjectConfig):
"""Create a monorepo structure."""
self._create_dirs(path, [
"packages",
"apps",
".github/workflows",
])
# Root package.json for pnpm/npm workspaces
package_json = {
"name": config.name,
"private": True,
"workspaces": ["packages/*", "apps/*"],
"scripts": {
"build": "turbo build",
"dev": "turbo dev",
"lint": "turbo lint",
"test": "turbo test",
},
"devDependencies": {
"turbo": "^1.11.0",
}
}
self._write_json(path / "package.json", package_json)
# Turbo config
self._write_json(path / "turbo.json", {
"$schema": "https://turbo.build/schema.json",
"globalDependencies": ["**/.env.*local"],
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"]
},
"dev": {
"cache": False,
"persistent": True
},
"lint": {},
"test": {}
}
})
# pnpm workspace
self._write_file(path / "pnpm-workspace.yaml", "packages:\n - 'packages/*'\n - 'apps/*'\n")
self._create_common_files(path, config)
# =========================================================================
# Helper Methods
# =========================================================================
def _create_dirs(self, path: Path, dirs: List[str]):
"""Create directory structure."""
for d in dirs:
(path / d).mkdir(parents=True, exist_ok=True)
def _write_file(self, path: Path, content: str):
"""Write content to a file."""
path.parent.mkdir(parents=True, exist_ok=True)
path.write_text(content)
def _write_json(self, path: Path, data: dict):
"""Write JSON to a file."""
path.parent.mkdir(parents=True, exist_ok=True)
with open(path, "w") as f:
json.dump(data, f, indent=2)
def _create_package_json(self, config: ProjectConfig, deps: dict, dev_deps: dict, scripts: dict) -> dict:
"""Create a package.json structure."""
return {
"name": config.name,
"version": config.version,
"description": config.description or f"{config.name} project",
"author": config.author,
"license": config.license,
"scripts": {k: v for k, v in scripts.items() if v is not None},
"dependencies": deps,
"devDependencies": dev_deps,
}
def _create_tsconfig(self, config: ProjectConfig, framework: str) -> dict:
"""Create TypeScript configuration."""
base = {
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"esModuleInterop": True,
"skipLibCheck": True,
"forceConsistentCasingInFileNames": True,
"strict": config.typescript_strict,
}
}
if framework == "react":
base["compilerOptions"].update({
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {"@/*": ["./src/*"]},
})
base["include"] = ["src"]
elif framework == "nextjs":
base["compilerOptions"].update({
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"jsx": "preserve",
"incremental": True,
"plugins": [{"name": "next"}],
"baseUrl": ".",
"paths": {"@/*": ["./src/*"]},
})
base["include"] = ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
base["exclude"] = ["node_modules"]
elif framework == "vue":
base["compilerOptions"].update({
"lib": ["DOM", "ES2022"],
"jsx": "preserve",
"baseUrl": ".",
"paths": {"@/*": ["./src/*"]},
})
base["include"] = ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
elif framework == "node":
base["compilerOptions"].update({
"module": "CommonJS",
"moduleResolution": "node",
"outDir": "./dist",
"rootDir": "./src",
"declaration": True,
})
base["include"] = ["src"]
base["exclude"] = ["node_modules", "dist"]
elif framework == "library":
base["compilerOptions"].update({
"declaration": True,
"declarationMap": True,
"sourceMap": True,
"outDir": "./dist",
})
base["include"] = ["src"]
elif framework == "nestjs":
base["compilerOptions"].update({
"module": "CommonJS",
"declaration": True,
"removeComments": True,
"emitDecoratorMetadata": True,
"experimentalDecorators": True,
"allowSyntheticDefaultImports": True,
"sourceMap": True,
"outDir": "./dist",
"baseUrl": "./",
"incremental": True,
})
elif framework == "angular":
base["compilerOptions"].update({
"outDir": "./dist/out-tsc",
"sourceMap": True,
"declaration": False,
"downlevelIteration": True,
"experimentalDecorators": True,
"moduleResolution": "node",
"importHelpers": True,
"lib": ["ES2022", "dom"],
})
return base
def _create_common_files(self, path: Path, config: ProjectConfig, python: bool = False):
"""Create common project files."""
# .gitignore
if python:
gitignore = """# Python
__pycache__/
*.py[cod]
*$py.class
*.so
.Python
env/
venv/
.venv/
ENV/
.env
build/
dist/
*.egg-info/
.pytest_cache/
.coverage
htmlcov/
.mypy_cache/
.ruff_cache/
# IDE
.vscode/
.idea/
*.swp
*.swo
# OS
.DS_Store
Thumbs.db
# Project
*.log
"""
else:
gitignore = """# Dependencies
node_modules/
# Build
dist/
build/
.next/
out/
# Environment
.env
.env.local
.env.*.local
# IDE
.vscode/
.idea/
*.swp
*.swo
# OS
.DS_Store
Thumbs.db
# Testing
coverage/
# Logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
"""
self._write_file(path / ".gitignore", gitignore)
# .env.example
if python:
env_example = """# Environment
DEBUG=true
LOG_LEVEL=debug
# Database
DATABASE_URL=postgresql://user:password@localhost:5432/dbname
# Security
SECRET_KEY=your-secret-key-here
"""
else:
env_example = """# Environment
NODE_ENV=development
# Database
DATABASE_URL=postgresql://user:password@localhost:5432/dbname
# API
API_URL=http://localhost:3000
# Auth
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000
"""
self._write_file(path / ".env.example", env_example)
# README.md
readme = f"""# {config.name}
{config.description or 'Project description'}
## Getting Started
### Prerequisites
"""
if python:
readme += f"""- Python {config.python_version}+
### Installation
```bash
# Create virtual environment
python -m venv .venv
source .venv/bin/activate # Unix
# .venv\\Scripts\\activate # Windows
# Install dependencies
pip install -r requirements.txt
# Copy environment file
cp .env.example .env
```
### Development
```bash
# Run development server
uvicorn app.main:app --reload # FastAPI
# python manage.py runserver # Django
```
### Testing
```bash
pytest
```
"""
else:
readme += f"""- Node.js {config.node_version}+
- {config.package_manager.value}
### Installation
```bash
# Install dependencies
{config.package_manager.value} install
# Copy environment file
cp .env.example .env.local
```
### Development
```bash
{config.package_manager.value} run dev
```
### Building
```bash
{config.package_manager.value} run build
```
### Testing
```bash
{config.package_manager.value} run test
```
"""
readme += f"""
## License
{config.license}
"""
self._write_file(path / "README.md", readme)
# VS Code settings
if config.eslint or config.prettier or config.ruff:
vscode_settings = {}
if config.eslint:
vscode_settings["editor.codeActionsOnSave"] = {"source.fixAll.eslint": "explicit"}
if config.prettier:
vscode_settings["editor.defaultFormatter"] = "esbenp.prettier-vscode"
vscode_settings["editor.formatOnSave"] = True
if config.ruff:
vscode_settings["[python]"] = {
"editor.defaultFormatter": "charliermarsh.ruff",
"editor.formatOnSave": True,
"editor.codeActionsOnSave": {"source.fixAll.ruff": "explicit"}
}
(path / ".vscode").mkdir(exist_ok=True)
self._write_json(path / ".vscode/settings.json", vscode_settings)
# GitHub Actions
if config.github_actions:
self._create_github_actions(path, config, python)
# Docker
if config.docker and not python:
self._create_node_docker(path, config)
def _create_tailwind_config(self, path: Path, config: ProjectConfig, framework: str = "react"):
"""Create Tailwind CSS configuration."""
content_paths = {
"html": "'./**/*.html'",
"react": "'./index.html', './src/**/*.{js,ts,jsx,tsx}'",
"nextjs": "'./src/**/*.{js,ts,jsx,tsx,mdx}'",
"vue": "'./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'",
"svelte": "'./src/**/*.{html,js,svelte,ts}'",
}
config_content = f"""/** @type {{import('tailwindcss').Config}} */
export default {{
content: [{content_paths.get(framework, content_paths['react'])}],
theme: {{
extend: {{}},
}},
plugins: [],
}}
"""
self._write_file(path / "tailwind.config.js", config_content)
postcss_content = """export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
"""
self._write_file(path / "postcss.config.js", postcss_content)
def _create_eslint_config(self, path: Path, config: ProjectConfig, framework: str):
"""Create ESLint configuration."""
eslint_config = {
"env": {"browser": True, "es2022": True, "node": True},
"extends": ["eslint:recommended"],
"parserOptions": {"ecmaVersion": "latest", "sourceType": "module"},
"rules": {}
}
if config.language == Language.TYPESCRIPT:
eslint_config["extends"].append("plugin:@typescript-eslint/recommended")
eslint_config["parser"] = "@typescript-eslint/parser"
eslint_config["plugins"] = ["@typescript-eslint"]
if framework == "react":
eslint_config["extends"].extend([
"plugin:react/recommended",
"plugin:react-hooks/recommended"
])
eslint_config["plugins"] = eslint_config.get("plugins", []) + ["react", "react-hooks"]
eslint_config["settings"] = {"react": {"version": "detect"}}
eslint_config["rules"]["react/react-in-jsx-scope"] = "off"
self._write_json(path / ".eslintrc.json", eslint_config)
def _create_prettier_config(self, path: Path, plugins: List[str] = None):
"""Create Prettier configuration."""
config = {
"semi": True,
"singleQuote": True,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
}
if plugins:
config["plugins"] = plugins
self._write_json(path / ".prettierrc", config)
def _create_github_actions(self, path: Path, config: ProjectConfig, python: bool):
"""Create GitHub Actions workflow."""
(path / ".github/workflows").mkdir(parents=True, exist_ok=True)
if python:
workflow = f"""name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: '{config.python_version}'
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install -r requirements.txt
pip install -r requirements-dev.txt
- name: Lint with ruff
run: ruff check .
- name: Type check with mypy
run: mypy .
- name: Test with pytest
run: pytest --cov
"""
else:
workflow = f"""name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '{config.node_version}'
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Type check
run: npm run type-check
- name: Test
run: npm run test
- name: Build
run: npm run build
"""
self._write_file(path / ".github/workflows/ci.yml", workflow)
def _create_node_docker(self, path: Path, config: ProjectConfig):
"""Create Docker configuration for Node.js projects."""
dockerfile = f"""FROM node:{config.node_version}-alpine AS base
# Install dependencies only when needed
FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci
# Build the application
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
# Production image
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["node", "dist/index.js"]
"""
self._write_file(path / "Dockerfile", dockerfile)
docker_compose = """version: '3.8'
services:
app:
build: .
ports:
- "3000:3000"
environment:
- NODE_ENV=development
volumes:
- .:/app
- /app/node_modules
"""
self._write_file(path / "docker-compose.yml", docker_compose)
# =========================================================================
# Template Content Methods (simplified - full implementation would be longer)
# =========================================================================
def _generate_vite_config(self, config: ProjectConfig) -> str:
return """import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
"""
def _react_main(self, config: ProjectConfig) -> str:
ext = "tsx" if config.language == Language.TYPESCRIPT else "jsx"
return f"""import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/globals.css';
ReactDOM.createRoot(document.getElementById('root'){'!' if config.language == Language.TYPESCRIPT else ''}).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
"""
def _react_app(self, config: ProjectConfig) -> str:
return """function App() {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold text-gray-900">Welcome</h1>
<p className="mt-2 text-gray-600">Your app is ready!</p>
</div>
</div>
);
}
export default App;
"""
def _css_globals(self, config: ProjectConfig) -> str:
if config.css_framework == CSSFramework.TAILWIND:
return """@tailwind base;
@tailwind components;
@tailwind utilities;
"""
return """* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
}
"""
def _react_index_html(self, config: ProjectConfig) -> str:
return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{config.name}</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.{'tsx' if config.language == Language.TYPESCRIPT else 'jsx'}"></script>
</body>
</html>
"""
def _vitest_config(self) -> str:
return """import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: './tests/setup.ts',
},
});
"""
def _vitest_setup(self) -> str:
return """import '@testing-library/jest-dom';
"""
def _nextjs_config(self, config: ProjectConfig) -> str:
return """/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
module.exports = nextConfig;
"""
def _nextjs_layout(self, config: ProjectConfig) -> str:
return f"""import type {{ Metadata }} from 'next';
import './globals.css';
export const metadata: Metadata = {{
title: '{config.name}',
description: '{config.description or "Generated by Next.js"}',
}};
export default function RootLayout({{
children,
}}: {{
children: React.ReactNode;
}}) {{
return (
<html lang="en">
<body>{{children}}</body>
</html>
);
}}
"""
def _nextjs_page(self, config: ProjectConfig) -> str:
return """export default function Home() {
return (
<main className="min-h-screen flex items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold">Welcome</h1>
<p className="mt-2 text-gray-600">Your Next.js app is ready!</p>
</div>
</main>
);
}
"""
def _prisma_schema(self, config: ProjectConfig) -> str:
provider = "postgresql" if config.database == Database.POSTGRESQL else "sqlite"
return f"""generator client {{
provider = "prisma-client-js"
}}
datasource db {{
provider = "{provider}"
url = env("DATABASE_URL")
}}
model User {{
id String @id @default(cuid())
email String @unique
name String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}}
"""
def _prisma_client(self) -> str:
return """import { PrismaClient } from '@prisma/client';
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
export default prisma;
"""
def _utils_file(self) -> str:
return """import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
"""
def _vue_vite_config(self, config: ProjectConfig) -> str:
return """import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
"""
def _vue_main(self, config: ProjectConfig) -> str:
imports = ["import { createApp } from 'vue';", "import App from './App.vue';"]
setup = ["const app = createApp(App);"]
if "pinia" in config.features:
imports.append("import { createPinia } from 'pinia';")
setup.append("app.use(createPinia());")
if "vue-router" in config.features:
imports.append("import router from './router';")
setup.append("app.use(router);")
if config.css_framework == CSSFramework.TAILWIND:
imports.append("import './assets/main.css';")
setup.append("app.mount('#app');")
return "\n".join(imports) + "\n\n" + "\n".join(setup) + "\n"
def _vue_app(self, config: ProjectConfig) -> str:
return """<script setup lang="ts">
</script>
<template>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="text-center">
<h1 class="text-4xl font-bold text-gray-900">Welcome</h1>
<p class="mt-2 text-gray-600">Your Vue app is ready!</p>
</div>
</div>
</template>
"""
def _vue_index_html(self, config: ProjectConfig) -> str:
return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{config.name}</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.{'ts' if config.language == Language.TYPESCRIPT else 'js'}"></script>
</body>
</html>
"""
def _nuxt_config(self, config: ProjectConfig) -> str:
modules = []
if config.css_framework == CSSFramework.TAILWIND:
modules.append("'@nuxtjs/tailwindcss'")
if "pinia" in config.features:
modules.append("'@pinia/nuxt'")
return f"""export default defineNuxtConfig({{
devtools: {{ enabled: true }},
modules: [{', '.join(modules)}],
}});
"""
def _nuxt_index_page(self, config: ProjectConfig) -> str:
return """<template>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="text-center">
<h1 class="text-4xl font-bold text-gray-900">Welcome</h1>
<p class="mt-2 text-gray-600">Your Nuxt app is ready!</p>
</div>
</div>
</template>
"""
def _nuxt_app(self, config: ProjectConfig) -> str:
return """<template>
<NuxtPage />
</template>
"""
def _svelte_config(self, config: ProjectConfig) -> str:
return """import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
},
};
export default config;
"""
def _svelte_vite_config(self, config: ProjectConfig) -> str:
return """import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
});
"""
def _svelte_page(self, config: ProjectConfig) -> str:
return """<script lang="ts">
</script>
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="text-center">
<h1 class="text-4xl font-bold text-gray-900">Welcome</h1>
<p class="mt-2 text-gray-600">Your SvelteKit app is ready!</p>
</div>
</div>
"""
def _svelte_layout(self, config: ProjectConfig) -> str:
css_import = "import '../app.css';" if config.css_framework == CSSFramework.TAILWIND else ""
return f"""<script>
{css_import}
</script>
<slot />
"""
def _svelte_app_html(self, config: ProjectConfig) -> str:
return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
"""
def _angular_config(self, config: ProjectConfig) -> dict:
return {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
config.name: {
"projectType": "application",
"root": "",
"sourceRoot": "src",
"architect": {}
}
}
}
def _express_index(self, config: ProjectConfig) -> str:
return """import app from './app';
import { config } from './config';
const PORT = config.port || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
"""
def _express_app(self, config: ProjectConfig) -> str:
return """import express from 'express';
import cors from 'cors';
import helmet from 'helmet';
import morgan from 'morgan';
import routes from './routes';
import { errorHandler } from './middleware/errorHandler';
const app = express();
// Middleware
app.use(helmet());
app.use(cors());
app.use(morgan('dev'));
app.use(express.json());
// Routes
app.use('/api', routes);
// Error handling
app.use(errorHandler);
export default app;
"""
def _express_config(self, config: ProjectConfig) -> str:
return """import dotenv from 'dotenv';
dotenv.config();
export const config = {
port: process.env.PORT || 3000,
nodeEnv: process.env.NODE_ENV || 'development',
databaseUrl: process.env.DATABASE_URL,
};
"""
def _express_routes(self, config: ProjectConfig) -> str:
return """import { Router } from 'express';
const router = Router();
router.get('/health', (req, res) => {
res.json({ status: 'ok' });
});
export default router;
"""
def _express_error_handler(self, config: ProjectConfig) -> str:
return """import { Request, Response, NextFunction } from 'express';
export const errorHandler = (
err: Error,
req: Request,
res: Response,
next: NextFunction
) => {
console.error(err.stack);
res.status(500).json({ error: 'Something went wrong!' });
};
"""
def _nestjs_main(self, config: ProjectConfig) -> str:
return """import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(3000);
}
bootstrap();
"""
def _nestjs_app_module(self, config: ProjectConfig) -> str:
return """import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
@Module({
imports: [],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
"""
def _nestjs_controller(self, config: ProjectConfig) -> str:
return """import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Get()
getHello(): string {
return this.appService.getHello();
}
}
"""
def _nestjs_service(self, config: ProjectConfig) -> str:
return """import { Injectable } from '@nestjs/common';
@Injectable()
export class AppService {
getHello(): string {
return 'Hello World!';
}
}
"""
def _fastapi_pyproject(self, config: ProjectConfig) -> str:
return f"""[project]
name = "{config.name}"
version = "{config.version}"
description = "{config.description or ''}"
authors = [{{name = "{config.author}"}}]
readme = "README.md"
requires-python = ">={config.python_version}"
[tool.ruff]
line-length = 100
target-version = "py311"
[tool.ruff.lint]
select = ["E", "F", "I", "N", "W", "UP"]
[tool.mypy]
python_version = "{config.python_version}"
strict = true
"""
def _fastapi_main(self, config: ProjectConfig) -> str:
return """from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from app.core.config import settings
app = FastAPI(
title=settings.PROJECT_NAME,
version=settings.VERSION,
openapi_url=f"{settings.API_V1_STR}/openapi.json",
)
# CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/health")
async def health_check():
return {"status": "healthy"}
@app.get("/")
async def root():
return {"message": "Welcome to the API"}
"""
def _fastapi_config(self, config: ProjectConfig) -> str:
return f"""from pydantic_settings import BaseSettings
class Settings(BaseSettings):
PROJECT_NAME: str = "{config.name}"
VERSION: str = "{config.version}"
API_V1_STR: str = "/api/v1"
DATABASE_URL: str = "sqlite:///./app.db"
class Config:
env_file = ".env"
settings = Settings()
"""
def _fastapi_db_session(self, config: ProjectConfig) -> str:
return """from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine
from sqlalchemy.orm import sessionmaker
from app.core.config import settings
engine = create_async_engine(settings.DATABASE_URL, echo=True)
async_session = sessionmaker(
engine, class_=AsyncSession, expire_on_commit=False
)
async def get_db() -> AsyncSession:
async with async_session() as session:
yield session
"""
def _fastapi_db_base(self) -> str:
return """from sqlalchemy.orm import DeclarativeBase
class Base(DeclarativeBase):
pass
"""
def _alembic_ini(self, config: ProjectConfig) -> str:
return """[alembic]
script_location = alembic
prepend_sys_path = .
version_path_separator = os
[post_write_hooks]
[loggers]
keys = root,sqlalchemy,alembic
[handlers]
keys = console
[formatters]
keys = generic
[logger_root]
level = WARN
handlers = console
qualname =
[logger_sqlalchemy]
level = WARN
handlers =
qualname = sqlalchemy.engine
[logger_alembic]
level = INFO
handlers =
qualname = alembic
[handler_console]
class = StreamHandler
args = (sys.stderr,)
level = NOTSET
formatter = generic
[formatter_generic]
format = %(levelname)-5.5s [%(name)s] %(message)s
datefmt = %H:%M:%S
"""
def _alembic_env(self, config: ProjectConfig) -> str:
return """from logging.config import fileConfig
from sqlalchemy import pool
from sqlalchemy.engine import Connection
from sqlalchemy.ext.asyncio import async_engine_from_config
from alembic import context
from app.core.config import settings
from app.db.base import Base
config = context.config
config.set_main_option("sqlalchemy.url", settings.DATABASE_URL)
if config.config_file_name is not None:
fileConfig(config.config_file_name)
target_metadata = Base.metadata
def run_migrations_offline() -> None:
url = config.get_main_option("sqlalchemy.url")
context.configure(
url=url,
target_metadata=target_metadata,
literal_binds=True,
dialect_opts={"paramstyle": "named"},
)
with context.begin_transaction():
context.run_migrations()
def do_run_migrations(connection: Connection) -> None:
context.configure(connection=connection, target_metadata=target_metadata)
with context.begin_transaction():
context.run_migrations()
async def run_async_migrations() -> None:
connectable = async_engine_from_config(
config.get_section(config.config_ini_section, {}),
prefix="sqlalchemy.",
poolclass=pool.NullPool,
)
async with connectable.connect() as connection:
await connection.run_sync(do_run_migrations)
await connectable.dispose()
def run_migrations_online() -> None:
import asyncio
asyncio.run(run_async_migrations())
if context.is_offline_mode():
run_migrations_offline()
else:
run_migrations_online()
"""
def _ruff_config(self) -> str:
return """line-length = 100
target-version = "py311"
[lint]
select = [
"E", # pycodestyle errors
"F", # pyflakes
"I", # isort
"N", # pep8-naming
"W", # pycodestyle warnings
"UP", # pyupgrade
"B", # flake8-bugbear
"C4", # flake8-comprehensions
]
ignore = ["E501"]
[lint.isort]
known-first-party = ["app"]
"""
def _fastapi_dockerfile(self, config: ProjectConfig) -> str:
return f"""FROM python:{config.python_version}-slim as builder
WORKDIR /app
RUN pip install --no-cache-dir poetry
COPY pyproject.toml poetry.lock* ./
RUN poetry export -f requirements.txt --output requirements.txt --without-hashes
FROM python:{config.python_version}-slim
WORKDIR /app
COPY --from=builder /app/requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 8000
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
"""
def _fastapi_docker_compose(self, config: ProjectConfig) -> str:
services = """version: '3.8'
services:
app:
build: .
ports:
- "8000:8000"
environment:
- DATABASE_URL=postgresql://postgres:postgres@db:5432/app
depends_on:
- db
volumes:
- .:/app
db:
image: postgres:15
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=postgres
- POSTGRES_DB=app
volumes:
- postgres_data:/var/lib/postgresql/data
ports:
- "5432:5432"
volumes:
postgres_data:
"""
return services
def _django_settings_base(self, config: ProjectConfig, project_name: str) -> str:
return f"""from pathlib import Path
import environ
BASE_DIR = Path(__file__).resolve().parent.parent.parent
env = environ.Env()
environ.Env.read_env(BASE_DIR / '.env')
SECRET_KEY = env('SECRET_KEY', default='your-secret-key-change-in-production')
DEBUG = env.bool('DEBUG', default=False)
ALLOWED_HOSTS = env.list('ALLOWED_HOSTS', default=[])
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'apps.core',
'apps.users',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = '{project_name}.urls'
TEMPLATES = [
{{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True,
'OPTIONS': {{
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
}},
}},
]
WSGI_APPLICATION = '{project_name}.wsgi.application'
DATABASES = {{
'default': env.db('DATABASE_URL', default='sqlite:///db.sqlite3')
}}
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
"""
def _django_settings_dev(self, config: ProjectConfig) -> str:
return """from .base import *
DEBUG = True
ALLOWED_HOSTS = ['*']
"""
def _django_settings_prod(self, config: ProjectConfig) -> str:
return """from .base import *
DEBUG = False
# Add production-specific settings
"""
def _django_urls(self, config: ProjectConfig) -> str:
return """from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]
"""
def _django_wsgi(self, config: ProjectConfig, project_name: str) -> str:
return f"""import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', '{project_name}.settings')
application = get_wsgi_application()
"""
def _django_asgi(self, config: ProjectConfig, project_name: str) -> str:
return f"""import os
from django.core.asgi import get_asgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', '{project_name}.settings')
application = get_asgi_application()
"""
def _django_manage(self, config: ProjectConfig, project_name: str) -> str:
return f"""#!/usr/bin/env python
import os
import sys
def main():
os.environ.setdefault('DJANGO_SETTINGS_MODULE', '{project_name}.settings')
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
raise ImportError(
"Couldn't import Django."
) from exc
execute_from_command_line(sys.argv)
if __name__ == '__main__':
main()
"""
def _flask_init(self, config: ProjectConfig) -> str:
return """from flask import Flask
def create_app():
app = Flask(__name__)
app.config.from_object('app.config.Config')
@app.route('/')
def index():
return {'message': 'Hello, World!'}
return app
"""
def _flask_config(self, config: ProjectConfig) -> str:
return """import os
class Config:
SECRET_KEY = os.environ.get('SECRET_KEY', 'dev-secret-key')
DEBUG = os.environ.get('DEBUG', 'true').lower() == 'true'
"""
def _flask_run(self, config: ProjectConfig) -> str:
return """from app import create_app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)
"""
def _python_pyproject(self, config: ProjectConfig, package_name: str) -> str:
return f"""[project]
name = "{config.name}"
version = "{config.version}"
description = "{config.description or ''}"
authors = [{{name = "{config.author}"}}]
readme = "README.md"
license = {{text = "{config.license}"}}
requires-python = ">={config.python_version}"
classifiers = [
"Development Status :: 3 - Alpha",
"Intended Audience :: Developers",
"License :: OSI Approved :: MIT License",
"Programming Language :: Python :: 3",
]
dependencies = []
[project.optional-dependencies]
dev = [
"pytest>=7.4.0",
"pytest-cov>=4.1.0",
"ruff>=0.1.0",
"mypy>=1.8.0",
]
[build-system]
requires = ["setuptools>=61.0", "wheel"]
build-backend = "setuptools.build_meta"
[tool.setuptools.packages.find]
where = ["src"]
[tool.ruff]
line-length = 100
target-version = "py311"
[tool.mypy]
python_version = "{config.python_version}"
strict = true
"""
def _python_main(self, config: ProjectConfig) -> str:
return '''"""Main module."""
def hello(name: str) -> str:
"""Return a greeting."""
return f"Hello, {name}!"
'''
def _python_test(self, config: ProjectConfig, package_name: str) -> str:
return f'''"""Tests for main module."""
from {package_name}.main import hello
def test_hello():
"""Test hello function."""
assert hello("World") == "Hello, World!"
'''
def _python_cli_pyproject(self, config: ProjectConfig, package_name: str) -> str:
return f"""[project]
name = "{config.name}"
version = "{config.version}"
description = "{config.description or ''}"
authors = [{{name = "{config.author}"}}]
readme = "README.md"
requires-python = ">={config.python_version}"
dependencies = [
"typer[all]>=0.9.0",
"rich>=13.7.0",
]
[project.scripts]
{config.name} = "{package_name}.cli:app"
[build-system]
requires = ["setuptools>=61.0", "wheel"]
build-backend = "setuptools.build_meta"
[tool.setuptools.packages.find]
where = ["src"]
"""
def _python_cli_main(self, config: ProjectConfig, package_name: str) -> str:
return f'''"""CLI application."""
import typer
from rich import print
app = typer.Typer(help="{config.description or config.name}")
@app.command()
def hello(name: str = "World"):
"""Say hello."""
print(f"[green]Hello, {{name}}![/green]")
@app.command()
def version():
"""Show version."""
from {package_name} import __version__
print(f"[blue]{{__version__}}[/blue]")
if __name__ == "__main__":
app()
'''
def _tsup_config(self) -> str:
return """import { defineConfig } from 'tsup';
export default defineConfig({
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
dts: true,
splitting: false,
sourcemap: true,
clean: true,
});
"""
def _cli_tsup_config(self, config: ProjectConfig) -> str:
return """import { defineConfig } from 'tsup';
export default defineConfig({
entry: ['src/cli.ts'],
format: ['esm'],
target: 'node18',
splitting: false,
sourcemap: true,
clean: true,
banner: {
js: '#!/usr/bin/env node',
},
});
"""
def _node_cli_main(self, config: ProjectConfig) -> str:
return f"""import {{ Command }} from 'commander';
import chalk from 'chalk';
const program = new Command();
program
.name('{config.name}')
.description('{config.description or "CLI tool"}')
.version('0.1.0');
program
.command('hello')
.description('Say hello')
.argument('[name]', 'Name to greet', 'World')
.action((name) => {{
console.log(chalk.green(`Hello, ${{name}}!`));
}});
program.parse();
"""
def _electron_main(self, config: ProjectConfig) -> str:
return """const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, '../preload/preload.js'),
contextIsolation: true,
nodeIntegration: false,
},
});
mainWindow.loadFile('src/renderer/index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
"""
def _electron_preload(self, config: ProjectConfig) -> str:
return """const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
// Add your API methods here
});
"""
def _electron_html(self, config: ProjectConfig) -> str:
return f"""<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
<title>{config.name}</title>
</head>
<body>
<h1>Hello from {config.name}!</h1>
</body>
</html>
"""
# =========================================================================
# HTML/CSS Templates
# =========================================================================
def _html_css_links(self, config: ProjectConfig) -> str:
"""Generate CSS link tags based on framework configuration."""
if config.css_framework == CSSFramework.TAILWIND:
return '\n <link rel="stylesheet" href="css/output.css">'
return '''
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">'''
def _html_header(self, config: ProjectConfig, active_page: str = "index") -> str:
"""Generate HTML header with navigation."""
nav_items = [
("index.html", "Home", "index"),
("about.html", "About", "about"),
("contact.html", "Contact", "contact"),
]
nav_links = "\n".join(
f' <li class="nav__item"><a href="{href}" class="nav__link{" nav__link--active" if key == active_page else ""}">{label}</a></li>'
for href, label, key in nav_items
)
return f''' <header class="header">
<nav class="nav">
<div class="nav__logo">
<a href="index.html">{config.name}</a>
</div>
<ul class="nav__menu">
{nav_links}
</ul>
</nav>
</header>'''
def _html_footer(self, config: ProjectConfig) -> str:
"""Generate HTML footer."""
return f''' <footer class="footer">
<div class="container">
<p>© 2024 {config.name}. All rights reserved.</p>
</div>
</footer>'''
def _html_index(self, config: ProjectConfig) -> str:
"""Generate index.html for static website."""
css_links = self._html_css_links(config)
header = self._html_header(config, "index")
footer = self._html_footer(config)
return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{config.description or config.name}">
<meta name="author" content="{config.author or ''}">
<title>{config.name}</title>{css_links}
</head>
<body>
{header}
<!-- Main Content -->
<main class="main">
<section class="hero">
<div class="hero__content">
<h1 class="hero__title">Welcome to {config.name}</h1>
<p class="hero__subtitle">{config.description or 'A modern, responsive website'}</p>
<a href="about.html" class="btn btn--primary">Learn More</a>
</div>
</section>
<section class="features">
<div class="container">
<h2 class="section__title">Features</h2>
<div class="features__grid">
<div class="feature">
<h3 class="feature__title">Responsive Design</h3>
<p class="feature__text">Works seamlessly on all devices</p>
</div>
<div class="feature">
<h3 class="feature__title">Modern CSS</h3>
<p class="feature__text">Clean and maintainable styles</p>
</div>
<div class="feature">
<h3 class="feature__title">Fast Performance</h3>
<p class="feature__text">Optimized for speed</p>
</div>
</div>
</div>
</section>
</main>
{footer}
<script src="js/main.js"></script>
</body>
</html>
"""
def _html_about(self, config: ProjectConfig) -> str:
"""Generate about.html page."""
css_links = self._html_css_links(config)
header = self._html_header(config, "about")
footer = self._html_footer(config)
return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="About {config.name}">
<title>About - {config.name}</title>{css_links}
</head>
<body>
{header}
<main class="main">
<section class="page-header">
<div class="container">
<h1 class="page-header__title">About Us</h1>
<p class="page-header__subtitle">Learn more about {config.name}</p>
</div>
</section>
<section class="content">
<div class="container">
<p>This is the about page. Add your content here.</p>
</div>
</section>
</main>
{footer}
<script src="js/main.js"></script>
</body>
</html>
"""
def _html_contact(self, config: ProjectConfig) -> str:
"""Generate contact.html page."""
css_links = self._html_css_links(config)
header = self._html_header(config, "contact")
footer = self._html_footer(config)
return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Contact {config.name}">
<title>Contact - {config.name}</title>{css_links}
</head>
<body>
{header}
<main class="main">
<section class="page-header">
<div class="container">
<h1 class="page-header__title">Contact Us</h1>
<p class="page-header__subtitle">Get in touch</p>
</div>
</section>
<section class="content">
<div class="container">
<form class="contact-form" action="#" method="post">
<div class="form-group">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" name="name" class="form-input" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input type="email" id="email" name="email" class="form-input" required>
</div>
<div class="form-group">
<label for="message" class="form-label">Message</label>
<textarea id="message" name="message" class="form-textarea" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn--primary">Send Message</button>
</form>
</div>
</section>
</main>
{footer}
<script src="js/main.js"></script>
</body>
</html>
"""
def _css_reset(self) -> str:
"""Generate CSS reset file."""
return """/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
line-height: 1.6;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
button {
border: none;
background: none;
cursor: pointer;
font: inherit;
}
ul {
list-style: none;
}
"""
def _css_main(self, config: ProjectConfig) -> str:
"""Generate main stylesheet with BEM methodology."""
if config.css_framework == CSSFramework.TAILWIND:
return """@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom styles can be added here */
"""
return """/* Variables */
:root {
--color-primary: #3b82f6;
--color-primary-dark: #2563eb;
--color-secondary: #64748b;
--color-text: #1e293b;
--color-text-light: #64748b;
--color-background: #ffffff;
--color-background-light: #f8fafc;
--color-border: #e2e8f0;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--border-radius: 0.5rem;
--box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
/* Global Styles */
body {
font-family: var(--font-sans);
color: var(--color-text);
background-color: var(--color-background);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Header & Navigation */
.header {
background-color: var(--color-background);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-sm) var(--spacing-md);
max-width: 1200px;
margin: 0 auto;
}
.nav__logo a {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
}
.nav__menu {
display: flex;
gap: var(--spacing-md);
}
.nav__link {
color: var(--color-text-light);
transition: color 0.2s;
}
.nav__link:hover,
.nav__link--active {
color: var(--color-primary);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: var(--spacing-xl) 0;
text-align: center;
}
.hero__content {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.hero__title {
font-size: 3rem;
font-weight: 800;
margin-bottom: var(--spacing-sm);
}
.hero__subtitle {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
opacity: 0.9;
}
/* Buttons */
.btn {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius);
font-weight: 600;
transition: all 0.2s;
}
.btn--primary {
background-color: white;
color: var(--color-primary);
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Features Section */
.features {
padding: var(--spacing-xl) 0;
}
.section__title {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: var(--spacing-lg);
}
.features__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
}
.feature {
padding: var(--spacing-lg);
background-color: var(--color-background-light);
border-radius: var(--border-radius);
text-align: center;
}
.feature__title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--color-primary);
}
.feature__text {
color: var(--color-text-light);
}
/* Page Header */
.page-header {
background-color: var(--color-background-light);
padding: var(--spacing-xl) 0;
text-align: center;
}
.page-header__title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
}
.page-header__subtitle {
font-size: 1.125rem;
color: var(--color-text-light);
}
/* Content Section */
.content {
padding: var(--spacing-xl) 0;
}
/* Contact Form */
.contact-form {
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: var(--spacing-md);
}
.form-label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 600;
}
.form-input,
.form-textarea {
width: 100%;
padding: var(--spacing-sm);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
font-family: inherit;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
}
/* Footer */
.footer {
background-color: var(--color-background-light);
border-top: 1px solid var(--color-border);
padding: var(--spacing-lg) 0;
text-align: center;
color: var(--color-text-light);
}
/* Responsive */
@media (max-width: 768px) {
.hero__title {
font-size: 2rem;
}
.nav__menu {
gap: var(--spacing-sm);
}
.features__grid {
grid-template-columns: 1fr;
}
}
"""
def _js_main(self) -> str:
"""Generate main JavaScript file."""
return """// Main JavaScript file
console.log('Website loaded successfully');
// Mobile menu toggle (if needed)
document.addEventListener('DOMContentLoaded', () => {
// Add your JavaScript here
// Example: Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
});
"""
def main():
"""Main entry point for CLI usage."""
import argparse
parser = argparse.ArgumentParser(
description="Create a new project with IDE-grade configuration",
formatter_class=argparse.RawDescriptionHelpFormatter,
epilog="""
Examples:
%(prog)s html my-site --tailwind
%(prog)s react my-app --typescript --tailwind
%(prog)s nextjs my-app --database postgresql --orm prisma
%(prog)s fastapi my-api --database postgresql --orm sqlalchemy
%(prog)s python my-lib --pytest --ruff
"""
)
parser.add_argument("type", help="Project type (html, react, nextjs, vue, fastapi, django, etc.)")
parser.add_argument("name", help="Project name")
parser.add_argument("--description", help="Project description")
parser.add_argument("--author", help="Author name")
parser.add_argument("--license", default="MIT", help="License type")
parser.add_argument("--version", default="0.1.0", help="Initial version")
# Language options
parser.add_argument("--typescript", action="store_true", help="Use TypeScript")
parser.add_argument("--javascript", action="store_true", help="Use JavaScript")
# Framework options
parser.add_argument("--tailwind", action="store_true", help="Include Tailwind CSS")
parser.add_argument("--database", choices=["sqlite"
... (truncated)
```
### references/frameworks.md
```markdown
# Framework-Specific Configuration Guide
Comprehensive configuration options for each supported framework, comparable to WebStorm/PyCharm project wizards.
## Frontend Frameworks
### React (with Vite)
#### Recommended Stack
```
Build Tool: Vite (fast HMR, ESM-native)
Language: TypeScript (strict mode)
Styling: Tailwind CSS
State: Zustand or TanStack Query
Routing: React Router v6 or TanStack Router
Forms: React Hook Form + Zod
Testing: Vitest + React Testing Library
```
#### Project Structure
```
my-react-app/
├── src/
│ ├── components/
│ │ ├── ui/ # Reusable UI (Button, Card, Modal)
│ │ └── features/ # Feature-specific components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities, API clients
│ ├── stores/ # State management
│ ├── types/ # TypeScript types
│ ├── styles/ # Global styles
│ ├── App.tsx
│ └── main.tsx
├── public/
├── tests/
│ ├── unit/
│ └── e2e/
├── .eslintrc.json
├── .prettierrc
├── tailwind.config.js
├── tsconfig.json
├── vite.config.ts
└── package.json
```
#### Key Configuration Files
**vite.config.ts**
```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
},
});
```
**tsconfig.json**
```json
{
"compilerOptions": {
"target": "ES2022",
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
}
```
#### State Management Options
| Library | Best For | Bundle Size |
|---------|----------|-------------|
| Zustand | Simple global state | ~1KB |
| Jotai | Atomic state | ~2KB |
| Redux Toolkit | Complex apps, time-travel | ~11KB |
| TanStack Query | Server state | ~12KB |
#### Data Fetching Patterns
```typescript
// TanStack Query (recommended)
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
export function useUsers() {
return useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(r => r.json()),
staleTime: 5 * 60 * 1000, // 5 minutes
});
}
export function useCreateUser() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (user: User) =>
fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['users'] });
},
});
}
```
---
### Next.js
#### Recommended Stack
```
Version: 14+ with App Router
Language: TypeScript (strict)
Styling: Tailwind CSS
Database: Prisma or Drizzle
Auth: NextAuth.js v5 (Auth.js)
Validation: Zod
Testing: Vitest + Playwright
```
#### Project Structure (App Router)
```
my-nextjs-app/
├── src/
│ ├── app/
│ │ ├── (auth)/
│ │ │ ├── login/page.tsx
│ │ │ └── register/page.tsx
│ │ ├── (dashboard)/
│ │ │ └── dashboard/page.tsx
│ │ ├── api/
│ │ │ ├── auth/[...nextauth]/route.ts
│ │ │ └── users/route.ts
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── globals.css
│ ├── components/
│ │ ├── ui/
│ │ └── features/
│ ├── lib/
│ │ ├── auth.ts
│ │ ├── db.ts
│ │ └── utils.ts
│ ├── hooks/
│ └── types/
├── prisma/
│ ├── schema.prisma
│ └── migrations/
├── public/
├── tests/
├── next.config.js
├── tailwind.config.ts
└── package.json
```
#### Server Components vs Client Components
```typescript
// Server Component (default) - runs on server
// app/users/page.tsx
import { prisma } from '@/lib/db';
export default async function UsersPage() {
const users = await prisma.user.findMany();
return <UserList users={users} />;
}
// Client Component - runs on client
// components/features/UserForm.tsx
'use client';
import { useState } from 'react';
export function UserForm() {
const [name, setName] = useState('');
// Client-side interactivity
}
```
#### Server Actions (Next.js 14+)
```typescript
// app/actions.ts
'use server';
import { prisma } from '@/lib/db';
import { revalidatePath } from 'next/cache';
export async function createUser(formData: FormData) {
const name = formData.get('name') as string;
await prisma.user.create({
data: { name },
});
revalidatePath('/users');
}
```
---
### Vue 3
#### Recommended Stack
```
Build Tool: Vite
Language: TypeScript
API Style: Composition API
State: Pinia
Routing: Vue Router 4
Styling: Tailwind CSS or UnoCSS
Testing: Vitest + Vue Test Utils
```
#### Project Structure
```
my-vue-app/
├── src/
│ ├── components/
│ │ ├── common/
│ │ └── features/
│ ├── composables/ # Composition API utilities
│ ├── views/ # Page components
│ ├── stores/ # Pinia stores
│ ├── router/
│ ├── types/
│ ├── assets/
│ ├── App.vue
│ └── main.ts
├── public/
├── tests/
├── vite.config.ts
├── tsconfig.json
└── package.json
```
#### Composition API Patterns
```vue
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
// Reactive state
const count = ref(0);
const doubled = computed(() => count.value * 2);
// Store
const userStore = useUserStore();
// Lifecycle
onMounted(() => {
userStore.fetchUsers();
});
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<p>Doubled: {{ doubled }}</p>
</div>
</template>
```
#### Pinia Store Pattern
```typescript
// stores/user.ts
import { defineStore } from 'pinia';
interface User {
id: string;
name: string;
}
export const useUserStore = defineStore('user', {
state: () => ({
users: [] as User[],
loading: false,
}),
getters: {
userCount: (state) => state.users.length,
},
actions: {
async fetchUsers() {
this.loading = true;
try {
const response = await fetch('/api/users');
this.users = await response.json();
} finally {
this.loading = false;
}
},
},
});
```
---
### Nuxt 3
#### Recommended Stack
```
Version: 3.x
Auto-imports: Enabled
Styling: @nuxtjs/tailwindcss
State: Pinia (@pinia/nuxt)
API: Nitro server routes
```
#### Project Structure
```
my-nuxt-app/
├── assets/
├── components/
├── composables/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── public/
├── server/
│ ├── api/
│ └── middleware/
├── stores/
├── app.vue
├── nuxt.config.ts
└── package.json
```
#### Auto-imports
Nuxt auto-imports Vue functions and composables:
```vue
<script setup lang="ts">
// No imports needed!
const count = ref(0);
const route = useRoute();
const { data } = await useFetch('/api/users');
</script>
```
---
### SvelteKit
#### Recommended Stack
```
Version: 2.x
Language: TypeScript
Styling: Tailwind CSS
State: Svelte stores
```
#### Project Structure
```
my-sveltekit-app/
├── src/
│ ├── lib/
│ │ ├── components/
│ │ ├── stores/
│ │ └── utils/
│ ├── routes/
│ │ ├── +layout.svelte
│ │ ├── +page.svelte
│ │ └── api/
│ └── app.html
├── static/
├── tests/
├── svelte.config.js
├── vite.config.ts
└── package.json
```
#### SvelteKit Routing
```
routes/
├── +page.svelte → /
├── +layout.svelte → Layout for all pages
├── about/+page.svelte → /about
├── blog/
│ ├── +page.svelte → /blog
│ └── [slug]/+page.svelte → /blog/:slug
└── api/
└── users/+server.ts → /api/users
```
---
## Backend Frameworks
### FastAPI
#### Recommended Stack
```
Python: 3.12+
Async: Full async/await
Database: PostgreSQL + asyncpg
ORM: SQLAlchemy 2.0 (async)
Migrations: Alembic
Validation: Pydantic v2
Auth: python-jose (JWT)
Testing: pytest-asyncio + httpx
```
#### Project Structure (Large-Scale)
```
my-fastapi-app/
├── app/
│ ├── api/
│ │ ├── v1/
│ │ │ ├── endpoints/
│ │ │ │ ├── users.py
│ │ │ │ └── items.py
│ │ │ └── __init__.py
│ │ └── deps.py # Dependencies
│ ├── core/
│ │ ├── config.py # Pydantic Settings
│ │ ├── security.py # JWT, hashing
│ │ └── exceptions.py
│ ├── db/
│ │ ├── session.py # Database session
│ │ ├── base.py # SQLAlchemy Base
│ │ └── models/
│ ├── schemas/ # Pydantic models
│ ├── services/ # Business logic
│ ├── crud/ # Database operations
│ └── main.py
├── alembic/
│ ├── versions/
│ └── env.py
├── tests/
│ ├── unit/
│ ├── integration/
│ └── conftest.py
├── alembic.ini
├── pyproject.toml
├── requirements.txt
└── Dockerfile
```
#### Configuration with Pydantic Settings
```python
# app/core/config.py
from pydantic_settings import BaseSettings, SettingsConfigDict
class Settings(BaseSettings):
model_config = SettingsConfigDict(
env_file=".env",
env_file_encoding="utf-8",
)
# App
PROJECT_NAME: str = "My API"
VERSION: str = "1.0.0"
API_V1_STR: str = "/api/v1"
DEBUG: bool = False
# Database
DATABASE_URL: str
# Security
SECRET_KEY: str
ACCESS_TOKEN_EXPIRE_MINUTES: int = 30
# CORS
ALLOWED_ORIGINS: list[str] = ["http://localhost:3000"]
settings = Settings()
```
#### Async SQLAlchemy 2.0
```python
# app/db/session.py
from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine
from sqlalchemy.orm import sessionmaker
from app.core.config import settings
engine = create_async_engine(
settings.DATABASE_URL,
echo=settings.DEBUG,
future=True,
)
async_session = sessionmaker(
engine,
class_=AsyncSession,
expire_on_commit=False,
)
async def get_db() -> AsyncSession:
async with async_session() as session:
try:
yield session
await session.commit()
except Exception:
await session.rollback()
raise
```
#### Dependency Injection Pattern
```python
# app/api/deps.py
from typing import Annotated
from fastapi import Depends, HTTPException, status
from fastapi.security import OAuth2PasswordBearer
from sqlalchemy.ext.asyncio import AsyncSession
from app.db.session import get_db
from app.core.security import decode_token
from app.crud import user as user_crud
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="auth/token")
async def get_current_user(
db: Annotated[AsyncSession, Depends(get_db)],
token: Annotated[str, Depends(oauth2_scheme)],
):
credentials_exception = HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED,
detail="Could not validate credentials",
)
payload = decode_token(token)
if payload is None:
raise credentials_exception
user = await user_crud.get_by_id(db, id=payload.sub)
if user is None:
raise credentials_exception
return user
```
---
### Django
#### Recommended Stack
```
Version: 5.x
API: Django REST Framework
Database: PostgreSQL
Auth: Django Allauth (social)
Background: Celery + Redis
Testing: pytest-django
```
#### Project Structure
```
my-django-project/
├── config/ # Project settings
│ ├── settings/
│ │ ├── base.py
│ │ ├── dev.py
│ │ └── prod.py
│ ├── urls.py
│ ├── wsgi.py
│ └── asgi.py
├── apps/
│ ├── core/ # Shared utilities
│ ├── users/
│ │ ├── models.py
│ │ ├── views.py
│ │ ├── serializers.py
│ │ ├── urls.py
│ │ └── tests/
│ └── api/
├── static/
├── media/
├── templates/
├── requirements/
│ ├── base.txt
│ ├── dev.txt
│ └── prod.txt
├── manage.py
└── docker-compose.yml
```
#### Custom User Model (Always Do This)
```python
# apps/users/models.py
from django.contrib.auth.models import AbstractUser
from django.db import models
class User(AbstractUser):
email = models.EmailField(unique=True)
USERNAME_FIELD = 'email'
REQUIRED_FIELDS = ['username']
```
```python
# config/settings/base.py
AUTH_USER_MODEL = 'users.User'
```
---
### Express.js
#### Recommended Stack
```
Language: TypeScript
Runtime: Node.js 22+
ORM: Prisma or Drizzle
Validation: Zod
Auth: Passport.js or custom JWT
Testing: Vitest + Supertest
```
#### Project Structure
```
my-express-api/
├── src/
│ ├── routes/
│ │ ├── index.ts
│ │ ├── users.ts
│ │ └── auth.ts
│ ├── controllers/
│ ├── middleware/
│ │ ├── auth.ts
│ │ ├── validate.ts
│ │ └── errorHandler.ts
│ ├── services/
│ ├── models/
│ ├── schemas/ # Zod schemas
│ ├── utils/
│ ├── config/
│ ├── app.ts
│ └── index.ts
├── prisma/
├── tests/
├── tsconfig.json
└── package.json
```
#### Middleware Pattern
```typescript
// src/middleware/validate.ts
import { Request, Response, NextFunction } from 'express';
import { ZodSchema } from 'zod';
export const validate = (schema: ZodSchema) => {
return (req: Request, res: Response, next: NextFunction) => {
try {
schema.parse({
body: req.body,
query: req.query,
params: req.params,
});
next();
} catch (error) {
res.status(400).json({ error: 'Validation failed', details: error });
}
};
};
```
---
### NestJS
#### Recommended Stack
```
Language: TypeScript
ORM: Prisma or TypeORM
Validation: class-validator
Auth: @nestjs/passport
Testing: Jest
```
#### Project Structure
```
my-nestjs-app/
├── src/
│ ├── modules/
│ │ ├── users/
│ │ │ ├── users.module.ts
│ │ │ ├── users.controller.ts
│ │ │ ├── users.service.ts
│ │ │ ├── dto/
│ │ │ └── entities/
│ │ └── auth/
│ ├── common/
│ │ ├── decorators/
│ │ ├── filters/
│ │ ├── guards/
│ │ └── interceptors/
│ ├── config/
│ ├── app.module.ts
│ └── main.ts
├── test/
├── nest-cli.json
├── tsconfig.json
└── package.json
```
---
## Database & ORM Comparison
### JavaScript/TypeScript ORMs
| ORM | Type Safety | Migrations | Learning Curve | Best For |
|-----|-------------|------------|----------------|----------|
| Prisma | Excellent | Built-in | Low | Most projects |
| Drizzle | Excellent | Built-in | Medium | Performance-critical |
| TypeORM | Good | Built-in | High | NestJS, complex queries |
| Sequelize | Fair | Built-in | Medium | Legacy projects |
### Python ORMs
| ORM | Async Support | Type Hints | Learning Curve | Best For |
|-----|---------------|------------|----------------|----------|
| SQLAlchemy 2.0 | Full | Excellent | Medium | Most projects |
| SQLModel | Full | Excellent | Low | FastAPI |
| Tortoise | Full | Good | Low | Simple async apps |
| Django ORM | Limited | Good | Low | Django projects |
---
## Testing Strategies
### Frontend Testing Pyramid
```
E2E Tests (Playwright/Cypress) [10%]
Integration Tests [20%]
Unit Tests (Vitest/Jest) [70%]
```
### Backend Testing Pyramid
```
E2E/API Tests [10%]
Integration Tests [30%]
Unit Tests [60%]
```
### Example Test Setup (Vitest + React)
```typescript
// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: './tests/setup.ts',
coverage: {
provider: 'v8',
reporter: ['text', 'html'],
exclude: ['node_modules/', 'tests/'],
},
},
});
```
```typescript
// tests/setup.ts
import '@testing-library/jest-dom';
import { cleanup } from '@testing-library/react';
import { afterEach } from 'vitest';
afterEach(() => {
cleanup();
});
```
```
### references/best-practices.md
```markdown
# Scaffolding Best Practices
Comprehensive best practices for IDE-grade project scaffolding, aligned with WebStorm/PyCharm standards.
## Project Organization
### Directory Structure Principles
1. **Feature-Based Organization** (Recommended for large apps)
```
src/
├── features/
│ ├── auth/
│ │ ├── components/
│ │ ├── hooks/
│ │ ├── services/
│ │ └── index.ts
│ └── dashboard/
├── shared/
│ ├── components/
│ ├── hooks/
│ └── utils/
└── app/ # Entry points, routing
```
2. **Layer-Based Organization** (Traditional, good for small-medium apps)
```
src/
├── components/
├── hooks/
├── services/
├── utils/
└── types/
```
3. **Domain-Driven Design** (Enterprise apps)
```
src/
├── domain/ # Business logic, entities
├── application/ # Use cases, services
├── infrastructure/ # External services, DB
└── presentation/ # UI, API controllers
```
### Naming Conventions
| Item | Convention | Example |
|------|------------|---------|
| Components | PascalCase | `UserProfile.tsx` |
| Hooks | camelCase, `use` prefix | `useAuth.ts` |
| Utilities | camelCase | `formatDate.ts` |
| Constants | SCREAMING_SNAKE | `API_URL` |
| Types/Interfaces | PascalCase | `User`, `ApiResponse` |
| CSS Modules | kebab-case | `user-profile.module.css` |
| Python modules | snake_case | `user_service.py` |
---
## Configuration Management
### Environment Variables
**Structure:**
```
.env.example # Template (committed)
.env.local # Local overrides (not committed)
.env.development # Dev defaults (optional)
.env.production # Prod defaults (optional)
```
**Best Practices:**
1. Never commit `.env` files with secrets
2. Always provide `.env.example` with all variables
3. Validate env vars at startup
4. Use typed configuration objects
**TypeScript Env Validation (Zod):**
```typescript
// src/env.ts
import { z } from 'zod';
const envSchema = z.object({
NODE_ENV: z.enum(['development', 'production', 'test']),
DATABASE_URL: z.string().url(),
API_KEY: z.string().min(1),
PORT: z.coerce.number().default(3000),
});
export const env = envSchema.parse(process.env);
```
**Python Env Validation (Pydantic):**
```python
# app/core/config.py
from pydantic_settings import BaseSettings
class Settings(BaseSettings):
DEBUG: bool = False
DATABASE_URL: str
SECRET_KEY: str
API_KEY: str
class Config:
env_file = ".env"
settings = Settings()
```
---
## Code Quality Setup
### ESLint Configuration (2024)
**Flat Config (eslint.config.js) - Recommended:**
```javascript
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
export default [
js.configs.recommended,
{
files: ['**/*.{ts,tsx}'],
languageOptions: {
parser: typescriptParser,
parserOptions: {
project: './tsconfig.json',
},
},
plugins: {
'@typescript-eslint': typescript,
react,
'react-hooks': reactHooks,
},
rules: {
'@typescript-eslint/no-unused-vars': 'error',
'@typescript-eslint/no-explicit-any': 'warn',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
},
},
];
```
### Prettier Configuration
**.prettierrc:**
```json
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"plugins": ["prettier-plugin-tailwindcss"]
}
```
### Python Linting with Ruff
**ruff.toml:**
```toml
line-length = 100
target-version = "py311"
[lint]
select = [
"E", # pycodestyle errors
"F", # pyflakes
"I", # isort
"N", # pep8-naming
"UP", # pyupgrade
"B", # flake8-bugbear
"C4", # flake8-comprehensions
"SIM", # flake8-simplify
"ARG", # flake8-unused-arguments
"PTH", # flake8-use-pathlib
]
ignore = ["E501"] # Line too long (handled by formatter)
[lint.isort]
known-first-party = ["app"]
combine-as-imports = true
[format]
quote-style = "double"
indent-style = "space"
```
### Pre-commit Hooks
**JavaScript/TypeScript (.husky/pre-commit):**
```bash
#!/bin/sh
npx lint-staged
```
**lint-staged.config.js:**
```javascript
export default {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'*.{json,md,yml}': ['prettier --write'],
};
```
**Python (.pre-commit-config.yaml):**
```yaml
repos:
- repo: https://github.com/astral-sh/ruff-pre-commit
rev: v0.1.9
hooks:
- id: ruff
args: [--fix]
- id: ruff-format
- repo: https://github.com/pre-commit/mirrors-mypy
rev: v1.8.0
hooks:
- id: mypy
additional_dependencies: [types-all]
```
---
## TypeScript Best Practices
### Strict Mode Configuration
```json
{
"compilerOptions": {
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true
}
}
```
### Path Aliases
**tsconfig.json:**
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/components/*": ["./src/components/*"],
"@/lib/*": ["./src/lib/*"]
}
}
}
```
**vite.config.ts:**
```typescript
import path from 'path';
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
```
### Type Organization
```typescript
// types/api.ts - API response types
export interface ApiResponse<T> {
data: T;
error?: string;
meta?: {
page: number;
total: number;
};
}
// types/user.ts - Domain types
export interface User {
id: string;
email: string;
name: string;
role: 'admin' | 'user';
createdAt: Date;
}
// types/index.ts - Re-export all
export * from './api';
export * from './user';
```
---
## Security Best Practices
### Environment Security
**Always include in .gitignore:**
```
.env
.env.local
.env.*.local
*.pem
*.key
credentials.json
service-account.json
```
**Never commit:**
- API keys
- Database credentials
- JWT secrets
- Private keys
- Service account files
### Input Validation
**Frontend (Zod):**
```typescript
import { z } from 'zod';
export const userSchema = z.object({
email: z.string().email(),
password: z.string().min(8).max(100),
name: z.string().min(1).max(100),
});
export type UserInput = z.infer<typeof userSchema>;
```
**Backend (Python/Pydantic):**
```python
from pydantic import BaseModel, EmailStr, Field
class UserCreate(BaseModel):
email: EmailStr
password: str = Field(min_length=8, max_length=100)
name: str = Field(min_length=1, max_length=100)
```
### API Security Headers
**Express.js (Helmet):**
```typescript
import helmet from 'helmet';
app.use(helmet());
app.use(helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "'unsafe-inline'"],
styleSrc: ["'self'", "'unsafe-inline'"],
imgSrc: ["'self'", "data:", "https:"],
},
}));
```
**Next.js (next.config.js):**
```javascript
const securityHeaders = [
{ key: 'X-DNS-Prefetch-Control', value: 'on' },
{ key: 'X-XSS-Protection', value: '1; mode=block' },
{ key: 'X-Frame-Options', value: 'SAMEORIGIN' },
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
];
module.exports = {
async headers() {
return [{ source: '/:path*', headers: securityHeaders }];
},
};
```
---
## Testing Setup
### Test Directory Structure
```
tests/
├── unit/ # Isolated unit tests
│ ├── components/
│ ├── hooks/
│ └── utils/
├── integration/ # Integration tests
│ ├── api/
│ └── db/
├── e2e/ # End-to-end tests
│ └── flows/
├── fixtures/ # Test data
├── mocks/ # Mock implementations
└── setup.ts # Global setup
```
### Vitest Configuration
```typescript
// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['./tests/setup.ts'],
include: ['tests/**/*.test.{ts,tsx}'],
coverage: {
provider: 'v8',
reporter: ['text', 'html', 'lcov'],
exclude: [
'node_modules/',
'tests/',
'**/*.d.ts',
'**/*.config.*',
],
thresholds: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
```
### pytest Configuration
```toml
# pyproject.toml
[tool.pytest.ini_options]
asyncio_mode = "auto"
testpaths = ["tests"]
addopts = [
"-v",
"--strict-markers",
"--cov=app",
"--cov-report=term-missing",
"--cov-report=html",
"--cov-fail-under=80",
]
filterwarnings = ["ignore::DeprecationWarning"]
[tool.coverage.run]
source = ["app"]
omit = ["*/tests/*", "*/__init__.py"]
```
---
## CI/CD Configuration
### GitHub Actions (Node.js)
```yaml
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm run type-check
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npm run test -- --coverage
- uses: codecov/codecov-action@v3
build:
runs-on: ubuntu-latest
needs: [lint, test]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npm run build
- uses: actions/upload-artifact@v4
with:
name: build
path: dist/
```
### GitHub Actions (Python)
```yaml
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-python@v5
with:
python-version: '3.11'
- run: pip install ruff mypy
- run: ruff check .
- run: ruff format --check .
- run: mypy .
test:
runs-on: ubuntu-latest
services:
postgres:
image: postgres:15
env:
POSTGRES_PASSWORD: postgres
options: >-
--health-cmd pg_isready
--health-interval 10s
--health-timeout 5s
--health-retries 5
ports:
- 5432:5432
steps:
- uses: actions/checkout@v4
- uses: actions/setup-python@v5
with:
python-version: '3.11'
- run: pip install -r requirements.txt -r requirements-dev.txt
- run: pytest --cov --cov-report=xml
env:
DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test
- uses: codecov/codecov-action@v3
```
---
## Docker Configuration
### Node.js Multi-Stage Dockerfile
```dockerfile
# syntax=docker/dockerfile:1
FROM node:20-alpine AS base
WORKDIR /app
# Dependencies
FROM base AS deps
COPY package*.json ./
RUN npm ci --only=production
# Build
FROM base AS builder
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Production
FROM base AS runner
ENV NODE_ENV=production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 appuser
COPY --from=deps --chown=appuser:nodejs /app/node_modules ./node_modules
COPY --from=builder --chown=appuser:nodejs /app/dist ./dist
COPY --from=builder --chown=appuser:nodejs /app/package.json ./
USER appuser
EXPOSE 3000
CMD ["node", "dist/index.js"]
```
### Python Multi-Stage Dockerfile
```dockerfile
# syntax=docker/dockerfile:1
FROM python:3.11-slim AS builder
WORKDIR /app
RUN pip install --no-cache-dir poetry
COPY pyproject.toml poetry.lock* ./
RUN poetry export -f requirements.txt --output requirements.txt --without-hashes
FROM python:3.11-slim AS runner
WORKDIR /app
RUN useradd --create-home appuser
COPY --from=builder /app/requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY --chown=appuser:appuser . .
USER appuser
EXPOSE 8000
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
```
### Docker Compose for Development
```yaml
# docker-compose.yml
version: '3.8'
services:
app:
build:
context: .
target: builder
volumes:
- .:/app
- /app/node_modules
ports:
- "3000:3000"
environment:
- NODE_ENV=development
- DATABASE_URL=postgresql://postgres:postgres@db:5432/app
depends_on:
db:
condition: service_healthy
command: npm run dev
db:
image: postgres:15-alpine
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_DB: app
volumes:
- postgres_data:/var/lib/postgresql/data
ports:
- "5432:5432"
healthcheck:
test: ["CMD-SHELL", "pg_isready -U postgres"]
interval: 5s
timeout: 5s
retries: 5
redis:
image: redis:7-alpine
ports:
- "6379:6379"
volumes:
postgres_data:
```
---
## Documentation Standards
### README.md Template
```markdown
# Project Name
Brief description of the project.
## Features
- Feature 1
- Feature 2
## Tech Stack
- Frontend: React, TypeScript, Tailwind CSS
- Backend: Node.js, Express, Prisma
- Database: PostgreSQL
## Prerequisites
- Node.js 20+
- PostgreSQL 15+
- Docker (optional)
## Getting Started
### Installation
\`\`\`bash
# Clone the repository
git clone https://github.com/user/project.git
cd project
# Install dependencies
npm install
# Set up environment
cp .env.example .env.local
# Set up database
npm run db:push
# Start development server
npm run dev
\`\`\`
### Environment Variables
| Variable | Description | Required |
|----------|-------------|----------|
| DATABASE_URL | PostgreSQL connection string | Yes |
| API_KEY | External API key | Yes |
| DEBUG | Enable debug mode | No |
## Scripts
| Script | Description |
|--------|-------------|
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run test` | Run tests |
| `npm run lint` | Run linter |
## Project Structure
\`\`\`
src/
├── components/ # React components
├── lib/ # Utilities and helpers
├── app/ # Next.js app directory
└── types/ # TypeScript types
\`\`\`
## Contributing
1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request
## License
MIT
```
---
## Common Pitfalls to Avoid
### 1. Over-Engineering
- Don't add abstractions before you need them
- Start simple, refactor when patterns emerge
- YAGNI: You Aren't Gonna Need It
### 2. Configuration Sprawl
- Centralize configuration in one place
- Use typed configuration objects
- Document all configuration options
### 3. Dependency Hell
- Keep dependencies minimal
- Audit dependencies regularly
- Pin versions for reproducibility
### 4. Missing Error Handling
- Handle all error cases explicitly
- Provide meaningful error messages
- Log errors with context
### 5. Security Afterthoughts
- Build security in from the start
- Validate all inputs
- Never trust client data
### 6. No Tests
- Write tests from the beginning
- Maintain test coverage thresholds
- Test critical paths thoroughly
### 7. Poor Documentation
- Document as you build
- Keep docs up to date
- Include examples
### 8. Ignoring Performance
- Profile before optimizing
- Monitor in production
- Set performance budgets
```