What Happens When Two React Developer Candidates Have Identical Resumes

TEST YOUR DEMO LIKE A REVIEWER (10 minutes)

1. Open the link in a private window on your phone.
2. Turn on slow 3G throttling in DevTools on laptop.
3. Refresh on an inner route, e.g. /products/12
4. Block the API in DevTools (Network -> Block URL).
   Does the app show a clear error?
5. Tab through the page with the keyboard only.
6. Run Lighthouse in Chrome DevTools and read
   the top suggestions (not just the score).

Fix anything that embarrasses you first.

# Client-side routes return 404 on refresh because
# the host looks for a real file at /products/12.

# Netlify: public/_redirects
/*    /index.html   200

# Vercel: vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

# Nginx
location / {
  try_files $uri /index.html;
}

import { memo, useCallback, useState } from "react";
import RowView from "./RowView";

// Row re-renders only if its props change by reference
const Row = memo(function Row({ item, onToggle }) {
  return <RowView item={item} onToggle={onToggle} />;
});

export default function List({ initial }) {
  const [items, setItems] = useState(initial);
  const [filter, setFilter] = useState("");

  // Without useCallback, a new function on every render
  // would make memo useless: onToggle would always change.
  const onToggle = useCallback((id) => {
    setItems((prev) =>
      prev.map((it) => (it.id === id ? { ...it, done: !it.done } : it))
    );
  }, []);

  const visible = items.filter((it) => it.title.includes(filter));
  return visible.map((it) => (
    <Row key={it.id} item={it} onToggle={onToggle} />
  ));
}

// React Router 6.4+: load a route's code only when visited
import { createBrowserRouter } from "react-router-dom";
import Home from "./routes/Home";

export const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  {
    path: "/reports",
    // routes/reports.jsx exports Component (and loader)
    lazy: () => import("./routes/reports"),
  },
]);

// Why it matters: chart libraries used only on
// /reports no longer slow down the home page.
// Check the effect in DevTools -> Network: a separate
// chunk loads when you first open /reports.

import { useEffect, useState } from "react";

// Keep a cart in sync across browser tabs.
// The 'storage' event fires in OTHER tabs when
// localStorage changes.
export function useSyncedCart(key = "cart") {
  const [cart, setCart] = useState(() => {
    try {
      return JSON.parse(localStorage.getItem(key)) ?? [];
    } catch {
      return [];
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(cart));
  }, [key, cart]);

  useEffect(() => {
    const onStorage = (e) => {
      if (e.key === key && e.newValue) setCart(JSON.parse(e.newValue));
    };
    window.addEventListener("storage", onStorage);
    return () => window.removeEventListener("storage", onStorage);
  }, [key]);

  return [cart, setCart];
}

'My project is a small shop built with React and
Vite. The interesting part was the cart. First it
lived only in state, so a refresh emptied it.
I saved it to localStorage, which fixed refresh.

Then I noticed that with two tabs open, adding an
item in one tab did not show in the other. I used
the storage event, which fires in other tabs when
localStorage changes, to sync them.

Next I want tests for the checkout flow.'

FIRST WEEK: CARE
[ ] Fix the demo: mobile layout, refresh on routes
[ ] Add loading, empty and error states
[ ] README with decisions and known limits
[ ] Run Lighthouse, fix the top two suggestions

SECOND WEEK: DEPTH
[ ] Choose one area: performance, a11y, forms, tests
[ ] Make one measurable change in that area
[ ] Document it in the README with a screenshot
[ ] Add one resume bullet about it

ADD ONE LINE THAT NOBODY ELSE HAS

Generic:
- Built an e-commerce app using React and Redux.

Differentiated (choose what is true for you):
- Split reports route with React Router lazy
  loading so chart code loads only on that page.
- Made cart drawer keyboard accessible with focus
  return and Escape to close.
- Synced cart across browser tabs using the
  storage event, with tests for add and remove.

BEFORE EACH INTERVIEW

[ ] One 'problem after it worked' story per project
[ ] Explain your depth area in 2 minutes
[ ] Open your demo on a phone the morning of
[ ] Know which parts came from tutorials, and say so
[ ] One question to ask about their frontend:
    'How do you track performance in production?'