web-development

name	web-development
description	Fundamentals of modern web development. Framework selection (React, Vue, Next.js), project architecture, state management, routing, build tools, and CSS strategy best practices.

Web Development Skill

Fundamentals of modern web development. Framework selection (React, Vue, Next.js), project architecture, state management, routing, build tools, and CSS strategy best practices.

Table of Contents

Fundamentals (this file)

1. Overview
2. When to Use
3. Framework Selection
4. Project Structure
5. Development Environment
6. Practical Examples
7. Anti-patterns

Detailed Guides

1. Framework Selection — Complete Guide
2. State Management — Complete Guide
3. Project Architecture — Complete Guide

---

Overview

This skill covers modern web development fundamentals:

• Framework selection — React, Vue, Next.js, Remix, etc.
• Project architecture — Directory structure, file naming conventions
• State management — Context API, Redux, Zustand, Jotai
• Routing — React Router, Next.js App Router
• Build tools — Vite, Webpack, Turbopack
• CSS strategy — Tailwind CSS, CSS Modules, Styled Components

Official Documentation

• MDN Web Docs — Comprehensive web technology reference
• React Documentation — React library
• Next.js Documentation — Next.js framework
• Vue.js Documentation — Vue.js framework
• web.dev — Google's modern web development guide

---

When to Use

Required

• Starting a new web project (framework selection)
• Designing project architecture
• Deciding on a state management strategy
• Choosing a CSS strategy

Periodic

• Updating dependencies
• Performance optimization
• Adding major new features

---

Framework Selection

Framework	Use Case	Pros	Cons
Next.js	Full-stack web apps	SSR/SSG built-in, SEO optimized, App Router	Higher learning curve
React (Vite)	SPA, admin dashboards	Simple, flexible	SEO requires extra work
Remix	Full-stack	Nested routing, great UX	Smaller ecosystem
Vue (Nuxt)	Full-stack	Easier to learn	Smaller ecosystem than React
Astro	Content sites	Extremely fast, partial hydration	Not suited for complex apps

Decision Flowchart

Is SEO critical?
├─ Yes → Need server-side rendering
│   ├─ Prefer React → Next.js
│   └─ Prefer Vue  → Nuxt.js
└─ No → SPA is fine
    ├─ Admin panel / internal tool → React + Vite
    └─ Content-focused site → Astro

---

Project Structure

Next.js App Router (recommended)

project/
├── app/
│   ├── (marketing)/
│   │   ├── layout.tsx
│   │   ├── page.tsx          # /
│   │   └── about/page.tsx    # /about
│   ├── dashboard/
│   │   ├── layout.tsx
│   │   └── page.tsx          # /dashboard
│   ├── api/
│   │   └── users/route.ts    # /api/users
│   ├── layout.tsx
│   └── globals.css
├── components/
│   ├── ui/                   # shadcn/ui etc.
│   └── features/
├── lib/
│   ├── utils.ts
│   ├── api.ts
│   └── db.ts
├── hooks/
├── types/
└── public/

React + Vite (SPA)

project/
├── src/
│   ├── pages/
│   ├── components/
│   │   ├── Header.tsx
│   │   └── ui/
│   ├── hooks/
│   ├── lib/
│   ├── store/
│   ├── types/
│   ├── App.tsx
│   └── main.tsx
└── public/

---

Development Environment

Recommended Toolset

{
  "devDependencies": {
    "eslint": "^8.0.0",
    "prettier": "^3.0.0",
    "typescript": "^5.0.0"
  }
}

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Git Hooks (Husky)

pnpm add -D husky lint-staged

{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

---

Practical Examples

Example 1: Next.js App Router project

pnpm create next-app@latest my-app --typescript --tailwind --app
cd my-app
pnpm add zustand zod react-hook-form
pnpm dlx shadcn-ui@latest init

Example 2: React + Vite (SPA)

pnpm create vite@latest my-app --template react-ts
cd my-app
pnpm install
pnpm add react-router-dom zustand
pnpm add -D tailwindcss postcss autoprefixer

Example 3: State management with Zustand

// store/userStore.ts
import { create } from 'zustand'

interface UserStore {
  user: User | null
  setUser: (user: User) => void
  logout: () => void
}

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
}))

import { useUserStore } from '@/store/userStore'

export function UserProfile() {
  const { user, logout } = useUserStore()
  if (!user) return <div>Not logged in</div>
  return (
    <div>
      <p>{user.name}</p>
      <button onClick={logout}>Logout</button>
    </div>
  )
}

---

Anti-patterns

Over-splitting Components

// ❌ Unnecessary micro-components
function UserName({ name }: { name: string }) { return <span>{name}</span> }
function UserEmail({ email }: { email: string }) { return <span>{email}</span> }

// ✅ Keep it simple
function UserProfile({ user }: { user: User }) {
  return <div><span>{user.name}</span><span>{user.email}</span></div>
}

Prop Drilling

// ❌ Passing props through many layers
function App() {
  const [user, setUser] = useState<User | null>(null)
  return <Dashboard user={user} setUser={setUser} />
}

// ✅ Use Zustand instead
const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}))

Misusing useEffect for Data Fetching

// ❌ Client-side fetch with useEffect
function UserList() {
  const [users, setUsers] = useState<User[]>([])
  useEffect(() => {
    fetch('/api/users').then(res => res.json()).then(setUsers)
  }, [])
}

// ✅ Server Component (Next.js App Router)
async function UserList() {
  const users = await fetch('/api/users').then(res => res.json())
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
}

---

Related Skills

• nextjs-development — Next.js deep dive
• react-development — React deep dive
• frontend-performance — Performance optimization
• web-accessibility — Accessibility

---

Last updated: 2026-05-24