The fee tracker in React, deployed to a real URL

The situation

You built the fee tracker in plain JavaScript. Now build it the React way — components, props, state, derived values — add a live users directory that fetches real data and handles every state, deploy it to a public URL, and open it on your phone. The comparison with your plain-JS version is the point of the course, and you will write it down.

What you'll be able to show

• Compose an app from components in their own files
• Render lists from data with map and key, and pass functions down
• Keep state minimal and derive everything else in render
• Fetch with loading, error and success states, and deploy

What you need

• Node LTS, a Vite React app, VS Code
• jsonplaceholder's users endpoint
• A free host (Netlify or Vercel) and your phone

Tasks

1. 1Components in files
   Create Header, StudentCard and Footer in their own files and compose them in App. Render StudentCard three times from an array with map and a key. Pass an onSelect function down; clicking a card logs that student's name from the parent.
   A correct result: Three cards from data; a console log from the parent on click.
2. 2The tracker, in state
   Students array in state; a controlled add-form (name, fee due, fee paid); add via spread into a new array; delete via filter; a live total outstanding derived from the array in render; an all-clear message that renders only when nothing is due.
   A correct result: Adding, deleting and the total all work with no second copy of any number in state.
3. 3The comparison
   Put your plain-JS tracker and the React one side by side. Write five sentences: line count, what got simpler, what got harder, and where React's rules stopped a bug you had before.
   A correct result: Five honest sentences with the two line counts.
4. 4The users directory
   Fetch jsonplaceholder users on mount. Render loading, error and success states. Add a controlled search box that filters by name as a derived value — no second list in state. UserCard is its own component. Kill your wifi mid-load once to see the error state earn its keep.
   A correct result: All three states visible on demand; search filters without a second list.
5. 5Deploy
   npm run build, deploy to Netlify or Vercel, open the live URL on your phone. Put the link somewhere permanent (CV draft, LinkedIn).
   A correct result: A public URL that works on a phone.
6. 6The 30-day plan
   Write four named projects with dates. Start the first today — even if only the empty Vite app and a README stating what it will become.
   A correct result: Four projects with dates and the first repo created.

What to hand in

The repo URL, the live URL, a phone screenshot, the five comparison sentences, and the 30-day plan.

How it is marked