Your Mood Booster Is Waiting — Pick Your Favorite Beverage!

Vending Machine Simulator

An interactive vending machine simulation built with React, TypeScript, Chakra UI, and Vite. Users can insert coins, select real beverages from the Open Food Facts API, and complete purchases with automatic stock updates, change calculation, and refund functionality.

See live demo - Deployed this project on Vercel.

• ⚡ Vite – Lightning-fast development
• ⚛️ React
• 🧠 React Context API – For global state
• 💅 Chakra UI – Accessible UI components
• 🔠 TypeScript
• 🌐 Open Food Facts API – Real-world drink data

• 💰 Insert coins: 5¢, 10¢, and 25¢ denominations
• 🧃 Real-time product selection from external API
• 🛒 Cart system with item quantity control
• 📦 Stock management and update after purchase
• 💵 Automatic change calculation
• ❌ Cancel purchase with refund and message reset
• 🧊 Modern glass UI with responsive design
• 🎯 Only allows purchase when balance ≥ cart total

To clone and run this application, you'll need Git, NPM, Node.js >= 23.6.1. From your command line:

# Clone the repository
$ git clone https://github.com/gbspecapedra/vending-machine.git

# Go into the repository
$ cd vending-machine

# Install dependencies
$ npm install

# Run the development server
$ npm run dev

# Navigate to http://localhost:3000
# The app will automatically reload if you change any of the source files.

• Display full product info modal
• Implement audio feedback (coin insert, vending sound)
• Persist cart in localStorage
• Unit tests with Vitest

This project is under the MIT license. See the LICENSE for more information.

Made with ♥ by Gisele Pecapedra 👋 Get in touch!