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.
- 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.
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.
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.
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.
Admins can search through CSH users given a search query, and set, increment, or decrement their drink balances given a number and selected operation.
yarn installyarn start
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent