10 Prompts for JavaScript and TypeScript Code Generation: React, Node.js, and Utilities

Create a TypeScript React functional component called UserProfileCard. It should accept props: name (string, required), age (number, optional, default 30), email (string, optional), and avatarUrl (string, optional). The component should display a card with an avatar image (fallback to a placeholder if not provided), the name, age, and email. Include a button that toggles the visibility of the email. Use React useState hook. Export the component as default.

import React, { useState } from 'react';

interface UserProfileCardProps {
  name: string;
  age?: number;
  email?: string;
  avatarUrl?: string;
}

const UserProfileCard: React.FC<UserProfileCardProps> = ({
  name,
  age = 30,
  email,
  avatarUrl
}) => {
  const [showEmail, setShowEmail] = useState(false);

  return (
    <div className="profile-card">
      <img
        src={avatarUrl || 'https://via.placeholder.com/100'}
        alt={name}
        style={{ width: 100, height: 100, borderRadius: '50%' }}
      />
      <h2>{name}</h2>
      <p>Age: {age}</p>
      {showEmail && email && <p>Email: {email}</p>}
      {email && (
        <button onClick={() => setShowEmail(!showEmail)}>
          {showEmail ? 'Hide Email' : 'Show Email'}
        </button>
      )}
    </div>
  );
};

export default UserProfileCard;

Write a TypeScript generic function called getNestedValue<T, R> that takes an object of type T and a string path (like 'user.address.city') and returns the value at that path of type R | undefined. If any intermediate property is undefined, return undefined. Use recursion or reduce. Add proper type inference so that the return type is correctly inferred based on the path. Include JSDoc comments.

type User = {
  user: {
    address: {
      city: string;
      zip?: number;
    };
    name: string;
  };
};

const user: User = { user: { address: { city: 'New York', zip: 10001 }, name: 'Alice' } };
const city = getNestedValue<User, string>(user, 'user.address.city'); // string | undefined
console.log(city); // 'New York'

Generate a TypeScript middleware function for Express.js that verifies a JWT token from the Authorization header (Bearer scheme). If the token is valid, attach the decoded payload to req.user and call next(). If invalid or missing, return a 401 JSON response with an error message. Use the jsonwebtoken library. Import types from express. Export the middleware as default.

import express from 'express';
import authMiddleware from './authMiddleware';

const app = express();

app.get('/protected', authMiddleware, (req, res) => {
  res.json({ user: req.user });
});

Write a TypeScript custom React hook called useFetch<T> that takes a URL string as parameter. It should return an object with: data (T

| null), loading (boolean), error (string | null). Use useEffect to fetch data when the URL changes. Handle both successful and failed responses. If the response is not ok, throw an error. Clean up the fetch with AbortController on unmount.

interface Post {
  id: number;
  title: string;
}

const { data, loading, error } = useFetch<Post[]>('https://jsonplaceholder.typicode.com/posts');

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <ul>{data?.map(post => <li key={post.id}>{post.title}</li>)}</ul>;

Define a TypeScript enum called OrderStatus with values: Pending, Shipped, Delivered, Cancelled. Then write a function isOrderCompleted(status: OrderStatus): boolean that returns true only if status is Delivered or Cancelled. Finally, write a type guard function isShippedOrder(status: unknown): status is OrderStatus.Shipped that checks if the value is exactly OrderStatus.Shipped.

const status: unknown = 'Shipped';
if (isShippedOrder(status)) {
  // TypeScript now knows status is OrderStatus.Shipped
  console.log('Order is shipped');
}

Create a Zod schema called registerSchema for a user registration form with fields: username (string, min 3, max 20, regex only alphanumeric), email (string, email format), password (string, min 8, must contain at least one uppercase, one lowercase, one digit), and confirmPassword (string). Add a refinement that checks confirmPassword matches password. Include custom error messages for each validation rule.

import { z } from 'zod';

const registerSchema = z.object({
  username: z.string()
    .min(3, 'Username must be at least 3 characters')
    .max(20, 'Username must be at most 20 characters')
    .regex(/^[a-zA-Z0-9]+$/, 'Username must be alphanumeric'),
  email: z.string().email('Invalid email format'),
  password: z.string()
    .min(8, 'Password must be at least 8 characters')
    .regex(/[A-Z]/, 'Password must contain an uppercase letter')
    .regex(/[a-z]/, 'Password must contain a lowercase letter')
    .regex(/[0-9]/, 'Password must contain a digit'),
  confirmPassword: z.string()
}).refine(data => data.password === data.confirmPassword, {
  message: 'Passwords do not match',
  path: ['confirmPassword']
});

Write a Redux Toolkit slice called cartSlice with initial state: items (array of {id: number, name: string, quantity: number, price: number}), totalItems (number), totalPrice (number). Create reducers: addItem (add or increment quantity), removeItem (remove by id), clearCart. Use createAsyncThunk for a hypothetical fetchCart action that simulates an API call returning dummy data. Export the slice and its actions.

import { useDispatch, useSelector } from 'react-redux';
import { addItem, removeItem, clearCart } from './cartSlice';

const dispatch = useDispatch();
dispatch(addItem({ id: 1, name: 'Laptop', quantity: 1, price: 999 }));

Define a TypeScript type called ApiResponse<T> that has properties: success (boolean), data (T

| null), error (string | null), and timestamp (number, Unix timestamp in milliseconds). Then create a helper function createSuccessResponse<T>(data: T): ApiResponse<T> and createErrorResponse(error: string): ApiResponse<null>. Both should set the timestamp to Date.now().

const success = createSuccessResponse({ user: 'Alice' });
// success: { success: true, data: { user: 'Alice' }, error: null, timestamp: 1721400000000 }

const error = createErrorResponse('Not found');
// error: { success: false, data: null, error: 'Not found', timestamp: 1721400000000 }

Write a TypeScript Express route for uploading a single image file using multer. Configure multer with: storage to disk in './uploads/' folder, file filter to allow only image/jpeg and image/png, and limit file size to 2MB. The route should accept POST at '/upload' and return the file path on success. If validation fails, return a 400 error with a descriptive message.

// POST /upload with multipart/form-data and field name 'image'
// Returns { path: '/uploads/123.jpg' } or error

Create a React context called ThemeContext that provides a theme string ('light' | 'dark') and a dispatch function. Use useReducer to manage state. The reducer should handle two actions: TOGGLE_THEME (switch between light and dark) and SET_THEME (set a specific theme). Export the context provider and a custom hook useTheme that throws an error if used outside the provider.

function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

function ThemedComponent() {
  const { theme, dispatch } = useTheme();
  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
      <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>Toggle</button>
    </div>
  );
}