Building Frontend Interfaces

JavaScript
// Dashboard with responsive layout and state management
import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, ResponsiveContainer } from 'recharts';

const AnalyticsDashboard = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  
  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <MetricCard title="Users" value="12,543" change="+12%" />
        <MetricCard title="Revenue" value="$45,231" change="+8%" />
        <MetricCard title="Conversion" value="3.2%" change="-2%" />
      </div>
      <div className="mt-8 bg-white rounded-lg p-6">
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={data}>
            <Line type="monotone" dataKey="value" stroke="#2563eb" />
            <XAxis dataKey="date" />
            <YAxis />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

Component Development Process:

• Define component props and TypeScript interfaces
• Build mobile-first responsive layout
• Implement state management (local vs global)
• Add accessibility attributes (ARIA labels, keyboard nav)
• Optimize performance (memo, lazy loading)
• Test across browsers and devices

State Management Decision Tree:

1. Local state: useState, useReducer for component-specific data
2. Shared state: Context API for theme, user auth
3. Complex state: Redux Toolkit, Zustand for global app state
4. Server state: React Query, SWR for API data

Performance Optimization Checklist:

• Code splitting with React.lazy() and dynamic imports
• Virtualization for lists >100 items
• Image optimization with lazy loading and WebP
• Bundle analysis with webpack-bundle-analyzer
• Core Web Vitals monitoring

Example 1: Responsive Navigation Input: "Fix mobile navigation that breaks on small screens"

JavaScript
// Before: Fixed navigation breaking on mobile
<nav className="flex justify-between items-center">
  <Logo />
  <div className="flex space-x-4">
    <NavLink>Home</NavLink>
    <NavLink>About</NavLink>
    <NavLink>Contact</NavLink>
  </div>
</nav>

// After: Mobile-responsive with hamburger menu
const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <nav className="flex justify-between items-center">
      <Logo />
      <button 
        className="md:hidden"
        onClick={() => setIsOpen(!isOpen)}
        aria-label="Toggle menu"
      >
        <HamburgerIcon />
      </button>
      <div className={`
        ${isOpen ? 'block' : 'hidden'} 
        md:flex md:space-x-4 
        absolute md:relative top-16 md:top-0 
        left-0 w-full md:w-auto 
        bg-white md:bg-transparent 
        shadow-lg md:shadow-none
      `}>
        <NavLink>Home</NavLink>
        <NavLink>About</NavLink>
        <NavLink>Contact</NavLink>
      </div>
    </nav>
  );
};

Example 2: Performance Optimization Input: "App is slow when rendering 1000+ user rows"

JavaScript
// Before: Rendering all rows at once
const UserList = ({ users }) => (
  <div>
    {users.map(user => <UserRow key={user.id} user={user} />)}
  </div>
);

// After: Virtual scrolling for large lists
import { FixedSizeList as List } from 'react-window';

const VirtualUserList = ({ users }) => (
  <List
    height={400}
    itemCount={users.length}
    itemSize={60}
    itemData={users}
  >
    {({ index, style, data }) => (
      <div style={style}>
        <UserRow user={data[index]} />
      </div>
    )}
  </List>
);