Introduction to Frontend Development

# Pet Project

Rewrite task 3 using React and TypeScript. Preserve the existing behavior of your task-3 project, including its backend and API contracts where it has them.

# Requirements

  1. Adjust tsconfig.json ("jsx": "react-jsx") and webpack.config.js (entry .tsx, /\.tsx?$/ rule, resolve.extensions with .tsx) for React—see Tooling and routing.
  2. Rewrite the coffee-shop UI with React. Function components are recommended; the original task only requires TypeScript + React.

# Design checklist

  • Decompose the UI into small components (list, item, form, etc.).
  • Keep each piece of data in one state owner; pass it down as props and callbacks.
  • Use stable key values (real ids, not map indexes) on rendered lists.
  • Use controlled inputs (value/checked + onChange) for forms.
  • Update state immutably with functional setters (setItems((items) => [...items, next])).
  • If you request data from your API, handle loading, error and empty states.
  • Redux is not required here—it is the next lecture's topic.
  • Routing is optional. Clean up any effects that subscribe, start timers, or request data when needed.
  • Keep the build and start npm scripts working.

# Acceptance

  • npm run build produces the bundle; npm run start serves the app.
  • The coffee-shop behavior matches task 3.
  • If you added routing, refreshing a deep link still loads the app in development, and your production hosting serves index.html for document routes.

# Submission

Create a PR into the jstask1 branch of your own js repository (jstask1 is intentional).

See more details here (opens new window)

← ReduxJs →