React

mizu new ./my-react-app --template frontend/react
cd my-react-app
make dev

my-react-app/
├── cmd/
│   └── server/
│       └── main.go              # Go entry point
├── app/
│   └── server/
│       ├── app.go               # Mizu app configuration
│       ├── config.go            # Server configuration
│       └── routes.go            # API routes (Go)
├── frontend/                      # React application
│   ├── src/
│   │   ├── main.tsx            # React entry point
│   │   ├── App.tsx             # Root component
│   │   ├── components/
│   │   │   ├── Layout.tsx      # Layout component
│   │   │   ├── Header.tsx
│   │   │   └── Footer.tsx
│   │   ├── pages/
│   │   │   ├── Home.tsx        # Home page
│   │   │   ├── About.tsx       # About page
│   │   │   └── Users.tsx       # Users page
│   │   ├── hooks/              # Custom hooks
│   │   │   ├── useUsers.ts
│   │   │   └── useAuth.ts
│   │   ├── contexts/           # React contexts
│   │   │   └── AuthContext.tsx
│   │   ├── types/              # TypeScript types
│   │   │   └── user.ts
│   │   └── styles/
│   │       └── index.css       # Global styles
│   ├── public/
│   │   └── vite.svg           # Public assets
│   ├── index.html             # HTML template
│   ├── package.json           # npm dependencies
│   ├── vite.config.ts         # Vite configuration
│   ├── tsconfig.json          # TypeScript config
│   └── tsconfig.node.json     # TypeScript for Vite
├── dist/                       # Built files (after build)
├── go.mod
└── Makefile

Development Mode
    ↓
┌─────────────────────────────┐
│ Vite Dev Server (5173)      │
│ - Hot Module Replacement    │
│ - TypeScript compilation    │
│ - Fast bundling             │
└─────────────┬───────────────┘
              │
              ↓
┌─────────────────────────────┐
│ Mizu Server (3000)          │
│ - Proxies to Vite           │
│ - Handles /api requests     │
│ - Serves WebSocket for HMR  │
└─────────────────────────────┘

Production Mode
    ↓
┌─────────────────────────────┐
│ npm run build               │
│ - Optimizes & minifies      │
│ - Code splitting            │
│ - Tree shaking              │
└─────────────┬───────────────┘
              ↓
┌─────────────────────────────┐
│ Embedded in Go Binary       │
│ - All files in single bin   │
│ - Served by Mizu            │
│ - No Node.js needed         │
└─────────────────────────────┘

package server

import (
    "embed"
    "io/fs"

    "github.com/go-mizu/mizu"
    "github.com/go-mizu/mizu/frontend"
)

//go:embed all:../../dist
var distFS embed.FS

func New(cfg *Config) *mizu.App {
    app := mizu.New()

    // API routes come first
    setupRoutes(app)

    // Frontend middleware (handles all non-API routes)
    dist, _ := fs.Sub(distFS, "dist")
    app.Use(frontend.WithOptions(frontend.Options{
        Mode:        frontend.ModeAuto,       // Auto-detect dev/prod
        FS:          dist,                     // Embedded files
        Root:        "./dist",                 // Fallback to filesystem in dev
        DevServer:   "http://localhost:" + cfg.DevPort,  // Vite dev server
        IgnorePaths: []string{"/api"},        // Don't proxy /api to Vite
    }))

    return app
}

package server

import "github.com/go-mizu/mizu"

func setupRoutes(app *mizu.App) {
    // User endpoints
    app.Get("/api/users", handleUsers)
    app.Post("/api/users", createUser)
    app.Get("/api/users/{id}", getUser)
    app.Put("/api/users/{id}", updateUser)
    app.Delete("/api/users/{id}", deleteUser)

    // Auth endpoints
    app.Post("/api/auth/login", handleLogin)
    app.Post("/api/auth/logout", handleLogout)
    app.Get("/api/auth/me", handleMe)
}

func handleUsers(c *mizu.Ctx) error {
    users := []map[string]any{
        {"id": 1, "name": "Alice", "email": "[email protected]", "role": "admin"},
        {"id": 2, "name": "Bob", "email": "[email protected]", "role": "user"},
        {"id": 3, "name": "Charlie", "email": "[email protected]", "role": "user"},
    }
    return c.JSON(200, users)
}

func createUser(c *mizu.Ctx) error {
    var user map[string]any
    if err := c.BodyJSON(&user); err != nil {
        return c.JSON(400, map[string]string{"error": "Invalid JSON"})
    }

    // Validate
    if user["name"] == nil || user["email"] == nil {
        return c.JSON(400, map[string]string{"error": "Name and email required"})
    }

    // In real app, save to database
    user["id"] = 4
    user["role"] = "user"

    return c.JSON(201, user)
}

func getUser(c *mizu.Ctx) error {
    id := c.Param("id")
    user := map[string]any{
        "id":    id,
        "name":  "User " + id,
        "email": "user" + id + "@example.com",
        "role":  "user",
    }
    return c.JSON(200, user)
}

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './styles/index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from './components/Layout'
import Home from './pages/Home'
import About from './pages/About'
import Users from './pages/Users'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="users" element={<Users />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

import { Link, Outlet } from 'react-router-dom'

export default function Layout() {
  return (
    <div className="app">
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/users">Users</Link>
        </nav>
      </header>

      <main>
        <Outlet />
      </main>

      <footer>
        <p>Built with Mizu and React</p>
      </footer>
    </div>
  )
}

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('')

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(prev => prev + 1)}>Better Increment</button>

      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
    </div>
  )
}

// ❌ Don't do this with previous state
setCount(count + 1)

// ✅ Use functional update
setCount(prev => prev + 1)

import { useState, useEffect } from 'react'

function Users() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)

  // Run once on mount
  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
  }, [])  // Empty deps = run once

  // Run when users changes
  useEffect(() => {
    console.log('Users updated:', users.length)
  }, [users])

  // Cleanup
  useEffect(() => {
    const interval = setInterval(() => {
      console.log('Tick')
    }, 1000)

    return () => clearInterval(interval)
  }, [])

  return <div>{/* render users */}</div>
}

// Fetch on param change
useEffect(() => {
  fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(setUser)
}, [id])

// Subscribe to events
useEffect(() => {
  function handleResize() {
    setWidth(window.innerWidth)
  }

  window.addEventListener('resize', handleResize)
  return () => window.removeEventListener('resize', handleResize)
}, [])

// Debounced effect
useEffect(() => {
  const timer = setTimeout(() => {
    // Do something with searchTerm
  }, 500)

  return () => clearTimeout(timer)
}, [searchTerm])

import { createContext, useContext, ReactNode } from 'react'

interface Theme {
  primary: string
  secondary: string
}

const ThemeContext = createContext<Theme>({
  primary: '#007bff',
  secondary: '#6c757d'
})

export function ThemeProvider({ children }: { children: ReactNode }) {
  const theme = {
    primary: '#007bff',
    secondary: '#6c757d'
  }

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  )
}

export function useTheme() {
  return useContext(ThemeContext)
}

// Usage
function Button() {
  const theme = useTheme()
  return <button style={{ background: theme.primary }}>Click</button>
}

import { useReducer } from 'react'

interface State {
  count: number
  text: string
}

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'setText'; payload: string }
  | { type: 'reset' }

const initialState: State = {
  count: 0,
  text: ''
}

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 }
    case 'decrement':
      return { ...state, count: state.count - 1 }
    case 'setText':
      return { ...state, text: action.payload }
    case 'reset':
      return initialState
    default:
      return state
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>

      <input
        value={state.text}
        onChange={e => dispatch({ type: 'setText', payload: e.target.value })}
      />
    </div>
  )
}

import { useMemo, useState } from 'react'

function ExpensiveComponent({ items }: { items: number[] }) {
  const [filter, setFilter] = useState(0)

  // Only recalculates when items or filter changes
  const filteredItems = useMemo(() => {
    console.log('Filtering...')
    return items.filter(item => item > filter)
  }, [items, filter])

  const total = useMemo(() => {
    console.log('Calculating total...')
    return filteredItems.reduce((sum, item) => sum + item, 0)
  }, [filteredItems])

  return (
    <div>
      <input
        type="number"
        value={filter}
        onChange={e => setFilter(Number(e.target.value))}
      />
      <p>Filtered: {filteredItems.length}</p>
      <p>Total: {total}</p>
    </div>
  )
}

import { useCallback, useState, memo } from 'react'

interface ItemProps {
  id: number
  onDelete: (id: number) => void
}

// Memoized child component
const Item = memo(({ id, onDelete }: ItemProps) => {
  console.log('Rendering item', id)
  return <button onClick={() => onDelete(id)}>Delete {id}</button>
})

function List() {
  const [items, setItems] = useState([1, 2, 3])

  // Without useCallback, this creates a new function on every render
  // causing all Item components to re-render
  const handleDelete = useCallback((id: number) => {
    setItems(prev => prev.filter(item => item !== id))
  }, [])

  return (
    <div>
      {items.map(id => (
        <Item key={id} id={id} onDelete={handleDelete} />
      ))}
    </div>
  )
}

import { useRef, useEffect } from 'react'

function FocusInput() {
  const inputRef = useRef<HTMLInputElement>(null)
  const renderCount = useRef(0)

  useEffect(() => {
    // Focus input on mount
    inputRef.current?.focus()

    // Track renders (doesn't cause re-render)
    renderCount.current++
    console.log('Rendered', renderCount.current, 'times')
  })

  return <input ref={inputRef} />
}

// Storing previous value
function Counter() {
  const [count, setCount] = useState(0)
  const prevCount = useRef(0)

  useEffect(() => {
    prevCount.current = count
  }, [count])

  return (
    <div>
      <p>Current: {count}</p>
      <p>Previous: {prevCount.current}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

// hooks/useUsers.ts
import { useState, useEffect } from 'react'

interface User {
  id: number
  name: string
  email: string
}

export function useUsers() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    fetch('/api/users')
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch')
        return res.json()
      })
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
      .catch(err => {
        setError(err)
        setLoading(false)
      })
  }, [])

  const addUser = async (user: Omit<User, 'id'>) => {
    const res = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user)
    })
    const newUser = await res.json()
    setUsers([...users, newUser])
    return newUser
  }

  const deleteUser = async (id: number) => {
    await fetch(`/api/users/${id}`, { method: 'DELETE' })
    setUsers(users.filter(u => u.id !== id))
  }

  const updateUser = async (id: number, updates: Partial<User>) => {
    const res = await fetch(`/api/users/${id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updates)
    })
    const updated = await res.json()
    setUsers(users.map(u => u.id === id ? updated : u))
    return updated
  }

  return { users, loading, error, addUser, deleteUser, updateUser }
}

import { useUsers } from './hooks/useUsers'

function UserList() {
  const { users, loading, error, deleteUser } = useUsers()

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          <button onClick={() => deleteUser(user.id)}>Delete</button>
        </li>
      ))}
    </ul>
  )
}

// hooks/useDebounce.ts
import { useState, useEffect } from 'react'

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => clearTimeout(timer)
  }, [value, delay])

  return debouncedValue
}

// Usage
function Search() {
  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  useEffect(() => {
    if (debouncedSearch) {
      // Perform search
      fetch(`/api/search?q=${debouncedSearch}`)
    }
  }, [debouncedSearch])

  return <input value={search} onChange={e => setSearch(e.target.value)} />
}

// hooks/useLocalStorage.ts
import { useState, useEffect } from 'react'

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch {
      return initialValue
    }
  })

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value))
    } catch {
      // Handle error
    }
  }, [key, value])

  return [value, setValue] as const
}

// Usage
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light')

  return (
    <select value={theme} onChange={e => setTheme(e.target.value)}>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  )
}

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/123">User 123</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />

          <Route path="users" element={<UsersLayout />}>
            <Route index element={<UsersList />} />
            <Route path=":id" element={<UserDetail />} />
            <Route path=":id/edit" element={<UserEdit />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

function UsersLayout() {
  return (
    <div>
      <h1>Users</h1>
      <Outlet />  {/* Child routes render here */}
    </div>
  )
}

import { useParams, useSearchParams } from 'react-router-dom'

function UserDetail() {
  const { id } = useParams<{ id: string }>()
  const [searchParams, setSearchParams] = useSearchParams()

  const tab = searchParams.get('tab') || 'profile'

  return (
    <div>
      <h1>User {id}</h1>
      <button onClick={() => setSearchParams({ tab: 'posts' })}>
        View Posts
      </button>
      {tab === 'profile' && <Profile />}
      {tab === 'posts' && <Posts />}
    </div>
  )
}

import { useNavigate } from 'react-router-dom'

function CreateUser() {
  const navigate = useNavigate()

  const handleSubmit = async (data) => {
    const user = await createUser(data)
    navigate(`/users/${user.id}`)  // Navigate to new user
  }

  return <form onSubmit={handleSubmit}>...</form>
}

// Go back
function BackButton() {
  const navigate = useNavigate()
  return <button onClick={() => navigate(-1)}>Back</button>
}

import { Navigate, Outlet } from 'react-router-dom'
import { useAuth } from './hooks/useAuth'

function ProtectedRoute() {
  const { user } = useAuth()

  if (!user) {
    return <Navigate to="/login" replace />
  }

  return <Outlet />
}

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />

      <Route element={<ProtectedRoute />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
      </Route>
    </Routes>
  )
}

// contexts/AuthContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react'

interface User {
  id: number
  name: string
  email: string
}

interface AuthContextType {
  user: User | null
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  isAuthenticated: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)

  const login = async (email: string, password: string) => {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    })

    if (res.ok) {
      const data = await res.json()
      setUser(data.user)
    } else {
      throw new Error('Login failed')
    }
  }

  const logout = () => {
    fetch('/api/auth/logout', { method: 'POST' })
    setUser(null)
  }

  return (
    <AuthContext.Provider value={{
      user,
      login,
      logout,
      isAuthenticated: !!user
    }}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider')
  }
  return context
}

npm install zustand

// stores/userStore.ts
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

interface User {
  id: number
  name: string
  email: string
}

interface UserState {
  users: User[]
  loading: boolean
  error: string | null

  fetchUsers: () => Promise<void>
  addUser: (user: Omit<User, 'id'>) => Promise<void>
  deleteUser: (id: number) => Promise<void>
  updateUser: (id: number, updates: Partial<User>) => Promise<void>
}

export const useUserStore = create<UserState>()(
  devtools(
    persist(
      (set, get) => ({
        users: [],
        loading: false,
        error: null,

        fetchUsers: async () => {
          set({ loading: true, error: null })
          try {
            const res = await fetch('/api/users')
            const users = await res.json()
            set({ users, loading: false })
          } catch (error) {
            set({ error: (error as Error).message, loading: false })
          }
        },

        addUser: async (user) => {
          const res = await fetch('/api/users', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(user)
          })
          const newUser = await res.json()
          set({ users: [...get().users, newUser] })
        },

        deleteUser: async (id) => {
          await fetch(`/api/users/${id}`, { method: 'DELETE' })
          set({ users: get().users.filter(u => u.id !== id) })
        },

        updateUser: async (id, updates) => {
          const res = await fetch(`/api/users/${id}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(updates)
          })
          const updated = await res.json()
          set({
            users: get().users.map(u => u.id === id ? updated : u)
          })
        }
      }),
      { name: 'user-storage' }
    )
  )
)

import { useUserStore } from './stores/userStore'
import { useEffect } from 'react'

function Users() {
  const { users, loading, fetchUsers, deleteUser } = useUserStore()

  useEffect(() => {
    fetchUsers()
  }, [])

  if (loading) return <div>Loading...</div>

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          <button onClick={() => deleteUser(user.id)}>Delete</button>
        </li>
      ))}
    </ul>
  )
}

npm install @tanstack/react-query

// main.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
      staleTime: 5 * 60 * 1000, // 5 minutes
    },
  },
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
)

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

interface User {
  id: number
  name: string
  email: string
}

function Users() {
  const queryClient = useQueryClient()

  // Fetch users
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      const res = await fetch('/api/users')
      if (!res.ok) throw new Error('Failed to fetch')
      return res.json() as Promise<User[]>
    }
  })

  // Create user mutation
  const createMutation = useMutation({
    mutationFn: async (user: Omit<User, 'id'>) => {
      const res = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(user)
      })
      return res.json()
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] })
    }
  })

  // Delete user mutation
  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      await fetch(`/api/users/${id}`, { method: 'DELETE' })
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] })
    }
  })

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <div>
      <ul>
        {users?.map(user => (
          <li key={user.id}>
            {user.name}
            <button
              onClick={() => deleteMutation.mutate(user.id)}
              disabled={deleteMutation.isPending}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>

      <button
        onClick={() => createMutation.mutate({ name: 'New', email: '[email protected]' })}
        disabled={createMutation.isPending}
      >
        Add User
      </button>
    </div>
  )
}

npm install swr

import useSWR from 'swr'

const fetcher = (url: string) => fetch(url).then(r => r.json())

function Users() {
  const { data, error, isLoading, mutate } = useSWR('/api/users', fetcher)

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error</div>

  return (
    <div>
      {data.map(user => <div key={user.id}>{user.name}</div>)}
      <button onClick={() => mutate()}>Refresh</button>
    </div>
  )
}

npm install react-hook-form

import { useForm } from 'react-hook-form'

interface FormData {
  name: string
  email: string
  age: number
}

function UserForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>()

  const onSubmit = async (data: FormData) => {
    const res = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })

    if (res.ok) {
      console.log('User created!')
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('name', {
          required: 'Name is required',
          minLength: { value: 2, message: 'Minimum 2 characters' }
        })}
        placeholder="Name"
      />
      {errors.name && <span>{errors.name.message}</span>}

      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email'
          }
        })}
        placeholder="Email"
      />
      {errors.email && <span>{errors.email.message}</span>}

      <input
        type="number"
        {...register('age', {
          required: 'Age is required',
          min: { value: 18, message: 'Must be 18+' }
        })}
        placeholder="Age"
      />
      {errors.age && <span>{errors.age.message}</span>}

      <button type="submit">Submit</button>
    </form>
  )
}

npm install @hookform/resolvers yup

import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'

const schema = yup.object({
  name: yup.string().required().min(2),
  email: yup.string().email().required(),
  age: yup.number().positive().integer().min(18).required(),
}).required()

function UserForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  })

  return <form>{/* same as above */}</form>
}

import { Component, ReactNode, ErrorInfo } from 'react'

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error: Error | null
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false, error: null }
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Error caught by boundary:', error, errorInfo)
    // Log to error reporting service
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div>
          <h1>Something went wrong</h1>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try again
          </button>
        </div>
      )
    }

    return this.props.children
  }
}

// Usage
function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  )
}

npm install react-error-boundary

import { ErrorBoundary } from 'react-error-boundary'

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // Reset app state
      }}
    >
      <MyComponent />
    </ErrorBoundary>
  )
}

/* Button.module.css */
.button {
  background: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background: #0056b3;
}

.button.primary {
  background: #28a745;
}

.button.danger {
  background: #dc3545;
}

import styles from './Button.module.css'

interface ButtonProps {
  variant?: 'primary' | 'danger'
  children: ReactNode
  onClick?: () => void
}

function Button({ variant, children, onClick }: ButtonProps) {
  const className = [
    styles.button,
    variant && styles[variant]
  ].filter(Boolean).join(' ')

  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  )
}

cd frontend
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#007bff',
        secondary: '#6c757d',
      }
    },
  },
  plugins: [],
}