hdm-react is a React client for Hot Drinks Machine app.

Uses hdm-api to display hot drinks in a web page consisting of React components.

Video demo available here.


  • Reactive modular UI: Consists of modular, customisable, and reusable React components that trigger and react to actions
  • Modular action-driven state: Modular redux state is action-driven and separated from UI to promote reuse and maintainability whilst reducing dependencies via pure functions
  • Card grid: Drinks are displayed as responsive grid of cards include a drink’s image, title, total steps
  • Drink details: Clicking a drink card displays the drink’s details (e.g., steps to make the drink) via react-router
  • Customisable search-enabled header: The header displays a title, navigation links, and search-bar that allows dynamically searching with each keypress