The Wheel of Drinks by 0rt

A sleek, modern spinwheel web app for choosing American gas station drinks. Spin the wheel and let fate decide your next beverage!

Features

• 🎡 Interactive spinning wheel with smooth animations
• 🥤 100+ American gas station drinks (bottled, cartoned, fountain, energy drinks, and more)
• 🎨 Beautiful dark mode UI with modern design
• ✨ Cool animations for spinning and result reveal
• 📱 Fully responsive design
• 🚀 Ready for GitHub Pages deployment

Getting Started

Installation

npm install

Development

npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

Deployment to GitHub Pages

The project is configured for deployment to asp/WheelOfDrinks on GitHub Pages.

First-Time Setup (Required)

You must enable GitHub Pages in your repository settings before the workflow can deploy:

1. Go to your repository on GitHub: https://github.com/asp/WheelOfDrinks
2. Click on Settings (in the repository menu)
3. Scroll down to Pages in the left sidebar
4. Under Source, select GitHub Actions (not "Deploy from a branch")
5. Save the settings

Automatic Deployment

Once GitHub Pages is enabled:

1. Push your code to the main branch
2. The GitHub Actions workflow will automatically build and deploy to GitHub Pages
3. Your app will be available at: https://asp.github.io/WheelOfDrinks/

The deployment typically takes 1-2 minutes after pushing to main.

Manual Deployment (Alternative)

If you prefer to deploy manually:

1. Build the project: npm run build
2. Push the dist folder to the gh-pages branch

Technologies

• React 18
• Vite
• CSS3 with custom animations

License

Created by 0rt