Skip to content
A modern web client for RIT CSH's networked vending machines
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Tonic (WebDrink Re-Reloaded)

GitHub GitHub package.json dependency version (prod) GitHub top language

A modern, fast, React-Redux-y web frontend for Computer Science House's networked vending machines that ties into Mizu, and replaces WebDrink.


Tonic is a single page web app allowing members of CSH to use our Drink machines. Users can view current stock and drop drinks using their credits. Drink Admins can perform several operations like editing item names and prices, updating member credit balances, and updating machine stocks.

Built on Node.js and using React, Redux, and React Router, Tonic interfaces asynchronously with the Drink Server through the JavaScript Fetch API.

Related Projects

  • Mizu - A set of RESTful, public APIs used to interface with underlying databases and the Drink Machines.
  • Potion Seller - An application to control the Drink machine hardware, built to run on a Raspberry Pi.


Tonic, like most CSH sites, is behind member authentication, but below are screenshots that show most of the current functionality.


Users can view the items stocked in each vending machine along with their respective price, and can drop the items, given they have enough credits. Admins can edit slots in machines, changing what item is stocked in each slot, as shown below.

The homepage of Tonic

Editing a slot

When editing a slot on the stock list, Admins can select an item from a dropdown, and manually toggle the active state of a slot. Slots are automatically disabled when the machine deems them empty.

Editing a slot in Tonic

Item list

Admins can view a list of all items in the database, with an optional search query. They can edit the details of or delete the items, as well as add new items given a name and price.

The Items List in Tonic

Editing an item

Admins are presented a modal when editing items, similar to the one for editing slots, which allows them to update the name and price of the item in the underlying database.

Editing an item in Tonic

User list

Admins can search through CSH users given a search query, and set, increment, or decrement their drink balances given a number and selected operation.

The User List in Tonic

Developing locally



  • nvm install
  • nvm use
  • yarn install
  • yarn start runs Tonic at localhost:3000
  • Before committing code, run yarn lint
You can’t perform that action at this time.