Claude Code for JavaScript Development

// Create a searchable user list component

import React, { useState, useEffect, useMemo } from 'react';

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

export const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers().then(setUsers).finally(() => setLoading(false));
  }, []);

  const filteredUsers = useMemo(() =>
    users.filter(user =>
      user.name.toLowerCase().includes(search.toLowerCase())
    ), [users, search]);

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

  return (
    <div>
      <input
        type="search"
        placeholder="Search users..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
};

// Create a CRUD API for products

import express from 'express';
import { z } from 'zod';

const router = express.Router();

const ProductSchema = z.object({
  name: z.string().min(1),
  price: z.number().positive(),
  category: z.string()
});

router.get('/products', async (req, res) => {
  const products = await db.products.findMany();
  res.json(products);
});

router.post('/products', async (req, res) => {
  const result = ProductSchema.safeParse(req.body);
  if (!result.success) {
    return res.status(400).json({ errors: result.error.issues });
  }
  const product = await db.products.create({ data: result.data });
  res.status(201).json(product);
});

export default router;