0
# Web Projects
1

2
React and Next.js projects with modern web development tooling. Provides comprehensive setup for frontend applications with build systems, testing, and deployment.
3

4
## Capabilities
5

6
### ReactProject Class
7

8
React application project with modern frontend tooling and build systems.
9

10
```typescript { .api }
11
/**
12
 * React application project with modern frontend tooling
13
 * Extends NodeProject with React-specific configuration
14
 */
15
class ReactProject extends NodeProject {
16
  constructor(options: ReactProjectOptions);
17
  
18
  /** Tailwind CSS integration (if enabled) */
19
  readonly tailwind?: Tailwind;
20
  /** PostCSS configuration (if enabled) */
21
  readonly postcss?: PostCSS;
22
  /** React version */
23
  readonly reactVersion: string;
24
}
25

26
interface ReactProjectOptions extends NodeProjectOptions {
27
  /** React version (default: "18.x") */
28
  reactVersion?: string;
29
  /** TypeScript support */
30
  typescript?: boolean;
31
  /** Enable Tailwind CSS */
32
  tailwind?: boolean;
33
  /** Tailwind CSS options */
34
  tailwindOptions?: TailwindOptions;
35
  /** Enable PostCSS */
36
  postcss?: boolean;
37
  /** PostCSS options */
38
  postcssOptions?: PostCSSOptions;
39
  /** Build tool (webpack, vite, etc.) */
40
  buildTool?: "webpack" | "vite" | "esbuild";
41
}
42
```
43

44
**Basic React Project Example:**
45

46
```typescript
47
import { ReactProject } from "projen";
48

49
const project = new ReactProject({
50
  name: "my-react-app",
51
  defaultReleaseBranch: "main",
52
  
53
  // React configuration
54
  reactVersion: "18.2.0",
55
  typescript: true,
56
  
57
  // Styling
58
  tailwind: true,
59
  postcss: true,
60
  
61
  // Dependencies
62
  deps: [
63
    "react-router-dom@^6.8.0",
64
    "axios@^1.3.0",
65
  ],
66
  devDeps: [
67
    "@types/react",
68
    "@types/react-dom",
69
    "@testing-library/react",
70
    "@testing-library/jest-dom",
71
  ],
72
  
73
  // Build tool
74
  buildTool: "vite",
75
  
76
  // Testing
77
  jest: true,
78
  eslint: true,
79
  prettier: true,
80
});
81
```
82

83
### NextJsProject Class
84

85
Next.js application with server-side rendering and modern React features.
86

87
```typescript { .api }
88
/**
89
 * Next.js application project
90
 * React framework with server-side rendering and static generation
91
 */
92
class NextJsProject extends NodeProject {
93
  constructor(options: NextJsProjectOptions);
94
  
95
  /** Next.js version */
96
  readonly nextVersion: string;
97
  /** Tailwind CSS integration (if enabled) */
98
  readonly tailwind?: Tailwind;
99
  /** PostCSS configuration (if enabled) */
100
  readonly postcss?: PostCSS;
101
}
102

103
interface NextJsProjectOptions extends NodeProjectOptions {
104
  /** Next.js version (default: "13.x") */
105
  nextVersion?: string;
106
  /** TypeScript support */
107
  typescript?: boolean;
108
  /** Enable Tailwind CSS */
109
  tailwind?: boolean;
110
  /** Tailwind CSS options */
111
  tailwindOptions?: TailwindOptions;
112
  /** Enable PostCSS */
113
  postcss?: boolean;
114
  /** PostCSS options */
115
  postcssOptions?: PostCSSOptions;
116
  /** App directory (Next.js 13+) */
117
  appDir?: boolean;
118
  /** Source directory */
119
  srcDir?: boolean;
120
}
121
```
122

123
**Next.js Project Example:**
124

125
```typescript
126
import { NextJsProject } from "projen";
127

128
const project = new NextJsProject({
129
  name: "my-nextjs-app",
130
  defaultReleaseBranch: "main",
131
  
132
  // Next.js configuration
133
  nextVersion: "13.4.0",
134
  typescript: true,
135
  appDir: true,
136
  srcDir: true,
137
  
138
  // Styling
139
  tailwind: true,
140
  postcss: true,
141
  
142
  // Dependencies
143
  deps: [
144
    "@next/font",
145
    "next-auth@^4.20.0",
146
    "prisma@^4.11.0",
147
  ],
148
  devDeps: [
149
    "@types/react",
150
    "@types/react-dom",
151
    "@types/node",
152
  ],
153
  
154
  // Testing
155
  jest: true,
156
  eslint: true,
157
  prettier: true,
158
});
159

160
// Add Next.js specific scripts
161
project.package.addScript("dev", "next dev");
162
project.package.addScript("build", "next build");
163
project.package.addScript("start", "next start");
164
project.package.addScript("lint", "next lint");
165
```
166

167
### Tailwind CSS Integration
168

169
Tailwind CSS utility framework setup for web projects.
170

171
```typescript { .api }
172
/**
173
 * Tailwind CSS utility framework setup
174
 * Provides utility-first CSS framework integration
175
 */
176
class Tailwind extends Component {
177
  constructor(project: NodeProject, options?: TailwindOptions);
178
  
179
  /** Tailwind configuration file */
180
  readonly config: any;
181
  /** PostCSS integration */
182
  readonly postcss?: PostCSS;
183
}
184

185
interface TailwindOptions {
186
  /** Tailwind CSS version */
187
  version?: string;
188
  /** Content paths for purging */
189
  content?: string[];
190
  /** Tailwind theme customization */
191
  theme?: Record<string, any>;
192
  /** Tailwind plugins */
193
  plugins?: string[];
194
  /** Enable JIT mode */
195
  jit?: boolean;
196
}
197
```
198

199
**Tailwind Configuration Example:**
200

201
```typescript
202
import { ReactProject } from "projen";
203

204
const project = new ReactProject({
205
  name: "tailwind-app",
206
  tailwind: true,
207
  tailwindOptions: {
208
    content: [
209
      "./src/**/*.{js,jsx,ts,tsx}",
210
      "./public/index.html",
211
    ],
212
    theme: {
213
      extend: {
214
        colors: {
215
          primary: {
216
            50: "#eff6ff",
217
            500: "#3b82f6",
218
            900: "#1e3a8a",
219
          },
220
        },
221
        fontFamily: {
222
          sans: ["Inter", "sans-serif"],
223
        },
224
      },
225
    },
226
    plugins: [
227
      "@tailwindcss/forms",
228
      "@tailwindcss/typography",
229
    ],
230
  },
231
});
232
```
233

234
### PostCSS Configuration
235

236
PostCSS processing setup for CSS transformation and optimization.
237

238
```typescript { .api }
239
/**
240
 * PostCSS configuration for CSS processing
241
 * Handles CSS transformations, autoprefixing, and optimization
242
 */
243
class PostCSS extends Component {
244
  constructor(project: NodeProject, options?: PostCSSOptions);
245
  
246
  /** PostCSS configuration */
247
  readonly config: any;
248
  
249
  /** Add PostCSS plugin */
250
  addPlugin(plugin: string, options?: any): void;
251
}
252

253
interface PostCSSOptions {
254
  /** PostCSS plugins */
255
  plugins?: Record<string, any>;
256
  /** Enable autoprefixer */
257
  autoprefixer?: boolean;
258
  /** Enable cssnano for production */
259
  cssnano?: boolean;
260
}
261
```
262

263
### TypeScript React Configuration
264

265
TypeScript configuration optimized for React projects.
266

267
```typescript { .api }
268
/**
269
 * TypeScript React project configuration
270
 * Extends TypeScriptProject with React-specific settings
271
 */
272
class ReactTypescriptProject extends TypeScriptProject {
273
  constructor(options: ReactTypescriptProjectOptions);
274
  
275
  /** React version */
276
  readonly reactVersion: string;
277
  /** JSX configuration */
278
  readonly jsxFactory?: string;
279
}
280

281
interface ReactTypescriptProjectOptions extends TypeScriptProjectOptions {
282
  /** React version */
283
  reactVersion?: string;
284
  /** JSX factory function */
285
  jsxFactory?: string;
286
  /** JSX fragment factory */
287
  jsxFragmentFactory?: string;
288
  /** JSX import source */
289
  jsxImportSource?: string;
290
}
291
```
292

293
**Complete Web Project Example:**
294

295
```typescript
296
import { NextJsProject } from "projen";
297

298
const project = new NextJsProject({
299
  name: "advanced-nextjs-app",
300
  defaultReleaseBranch: "main",
301
  
302
  // Next.js configuration
303
  nextVersion: "13.4.0",
304
  typescript: true,
305
  appDir: true,
306
  srcDir: true,
307
  
308
  // Project metadata
309
  description: "Advanced Next.js application with full-stack features",
310
  author: "Frontend Developer",
311
  authorEmail: "frontend@example.com",
312
  
313
  // Styling
314
  tailwind: true,
315
  tailwindOptions: {
316
    content: [
317
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
318
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
319
    ],
320
    theme: {
321
      extend: {
322
        colors: {
323
          brand: {
324
            50: "#f0f9ff",
325
            500: "#0ea5e9",
326
            900: "#0c4a6e",
327
          },
328
        },
329
      },
330
    },
331
    plugins: [
332
      "@tailwindcss/forms",
333
      "@tailwindcss/typography",
334
      "@tailwindcss/aspect-ratio",
335
    ],
336
  },
337
  
338
  postcss: true,
339
  postcssOptions: {
340
    plugins: {
341
      "tailwindcss": {},
342
      "autoprefixer": {},
343
    },
344
  },
345
  
346
  // Frontend dependencies
347
  deps: [
348
    "@next/font",
349
    "next-auth@^4.20.0",
350
    "@prisma/client@^4.11.0",
351
    "react-hook-form@^7.43.0",
352
    "@hookform/resolvers@^2.9.0",
353
    "zod@^3.20.0",
354
    "framer-motion@^10.0.0",
355
    "lucide-react@^0.220.0",
356
  ],
357
  
358
  // Development dependencies
359
  devDeps: [
360
    "@types/react",
361
    "@types/react-dom", 
362
    "@types/node",
363
    "prisma@^4.11.0",
364
    "@tailwindcss/forms",
365
    "@tailwindcss/typography",
366
    "@tailwindcss/aspect-ratio",
367
    "autoprefixer",
368
    "postcss",
369
  ],
370
  
371
  // Testing setup
372
  jest: true,
373
  jestOptions: {
374
    testEnvironment: "jsdom",
375
    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
376
    moduleNameMapping: {
377
      "^@/(.*)$": "<rootDir>/$1",
378
    },
379
  },
380
  
381
  // Code quality
382
  eslint: true,
383
  eslintOptions: {
384
    extends: ["next/core-web-vitals"],
385
    rules: {
386
      "@next/next/no-html-link-for-pages": "off",
387
    },
388
  },
389
  
390
  prettier: true,
391
  prettierOptions: {
392
    settings: {
393
      semi: true,
394
      singleQuote: false,
395
      tabWidth: 2,
396
      trailingComma: "es5",
397
    },
398
  },
399
});
400

401
// Add custom Next.js scripts
402
project.package.addScript("dev", "next dev");
403
project.package.addScript("build", "next build");
404
project.package.addScript("start", "next start");
405
project.package.addScript("lint", "next lint");
406
project.package.addScript("type-check", "tsc --noEmit");
407

408
// Database scripts
409
project.package.addScript("db:generate", "prisma generate");
410
project.package.addScript("db:push", "prisma db push");
411
project.package.addScript("db:migrate", "prisma migrate dev");
412
project.package.addScript("db:studio", "prisma studio");
413

414
// Add custom tasks
415
project.addTask("dev:full", {
416
  description: "Start development with database",
417
  exec: "npm run db:push && npm run dev",
418
});
419

420
project.addTask("build:analyze", {
421
  description: "Analyze bundle size",
422
  exec: "ANALYZE=true npm run build",
423
});
424

425
project.addTask("test:e2e", {
426
  description: "Run end-to-end tests",
427
  exec: "playwright test",
428
});
429

430
// Custom package.json fields
431
project.package.addField("engines", {
432
  node: ">=16.0.0",
433
  npm: ">=8.0.0",
434
});
435

436
// Environment configuration
437
project.package.addScript("env:example", "cp .env.example .env.local");
438
```
439

440
### Storybook Integration
441

442
Storybook component development environment for React projects.
443

444
```typescript { .api }
445
/**
446
 * Storybook integration for component development
447
 * Provides isolated component development and testing
448
 */
449
class Storybook extends Component {
450
  constructor(project: ReactProject, options?: StorybookOptions);
451
  
452
  /** Storybook version */
453
  readonly version: string;
454
  /** Storybook configuration directory */
455
  readonly configDir: string;
456
}
457

458
interface StorybookOptions {
459
  /** Storybook version */
460
  version?: string;
461
  /** Storybook addons */
462
  addons?: string[];
463
  /** Stories directory pattern */
464
  stories?: string[];
465
  /** Static directory */
466
  staticDirs?: string[];
467
}
468
```
469

470
## Types
471

472
### Web-Specific Types
473

474
```typescript { .api }
475
interface TailwindConfig {
476
  content: string[];
477
  theme?: {
478
    extend?: Record<string, any>;
479
    colors?: Record<string, any>;
480
    fontFamily?: Record<string, string[]>;
481
    spacing?: Record<string, string>;
482
  };
483
  plugins?: string[];
484
  darkMode?: "media" | "class" | ["class", string];
485
}
486

487
interface NextConfig {
488
  /** Experimental features */
489
  experimental?: {
490
    appDir?: boolean;
491
    serverComponentsExternalPackages?: string[];
492
  };
493
  /** Image optimization */
494
  images?: {
495
    domains?: string[];
496
    formats?: string[];
497
  };
498
  /** Environment variables */
499
  env?: Record<string, string>;
500
  /** Redirects */
501
  redirects?: () => Promise<Array<{
502
    source: string;
503
    destination: string;
504
    permanent: boolean;
505
  }>>;
506
}
507

508
interface PostCSSConfig {
509
  plugins: Record<string, any>;
510
  parser?: string;
511
  syntax?: string;
512
}
513

514
interface ReactTestingOptions {
515
  /** Testing library version */
516
  testingLibraryVersion?: string;
517
  /** Jest DOM version */
518
  jestDomVersion?: string;
519
  /** MSW for API mocking */
520
  msw?: boolean;
521
  /** Playwright for E2E testing */
522
  playwright?: boolean;
523
}
524
```