senior-frontend

Topics in the source

• Senior Frontend
• Table of Contents
• Project Scaffolding
• Workflow: Create New Frontend Project
• Scaffolder Options
• Generated outputs
• Component Generation
• Workflow: Create a New Component

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. Project Scaffolding Component Generation Bundle Analysis React Patterns Next.js Optimization Accessibility and Testing -- Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations. 1. Run the scaffolder with your project name and template: 2. Add optional features (auth, api, forms, testing, storybook): 3. Navigate to the project and install dependencies: 4. Start the development server: | Option | Description | |--------|-------------| | --template nextjs | Next.js 14+ with App Router and Server Components | | --template react | React + Vite with TypeScript | | --features auth | Add NextAuth.js authentication | | --features api | Add React Query + API client | | --features forms | Add React Hook Form + Zod validation | | --features testing | Add Vitest + Testing Library | | --dry-run | Preview files without creating them | The generated project structure and an example component are in references/frontendbestpractices.md (section Generated outputs). -- Generate React components with TypeScript, tests, and Storybook stories. 1.

This is an excerpt. Refer to the complete source and its current requirements.