web-development

Web Development Patterns

Modern web development best practices for JavaScript, TypeScript, and related frameworks.

CRITICAL: Project Setup Workflow

ALWAYS Use CLI Tools for New Projects

WRONG approach (creates incomplete/broken projects):

1. Create package.json manually
2. Create files one by one
3. Copy component code from documentation
4. Forget to run npm install

CORRECT approach:

# Next.js
npx create-next-app@latest my-app --typescript --tailwind --app --eslint

# React (Vite)
npm create vite@latest my-app -- --template react-ts

# Vue
npm create vue@latest

# Then for component libraries:
cd my-app
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card dialog

Version Checking Before Setup

<think>
Before creating a project, I MUST:
1. Check current stable versions
2. Verify CLI options are up to date
3. Check for compatibility issues
</think>

→ web_search("create-next-app latest version options December 2024")
→ web_search("shadcn-ui Next.js 15 compatibility 2024")

---

JavaScript Best Practices

Modern Syntax

• Use const by default, let when reassignment needed, never var
• Prefer arrow functions for callbacks and short functions
• Use template literals for string interpolation
• Destructure objects and arrays
• Use spread operator for immutable operations

// Modern patterns
const { name, email } = user;
const updatedList = [...items, newItem];
const greeting = `Hello, ${name}!`;
const fetchData = async () => { /* ... */ };

Async Patterns

• Prefer async/await over .then() chains
• Always handle errors with try/catch
• Use Promise.all() for parallel operations
• Use Promise.allSettled() when some failures are acceptable

// Parallel operations
const [users, posts] = await Promise.all([
  fetchUsers(),
  fetchPosts()
]);

// Error handling
try {
  const data = await fetchData();
} catch (error) {
  console.error('Fetch failed:', error.message);
  throw new DataFetchError(error);
}