Consumer Web Application Publicly Available
Random Prize Wheel
A full-stack random-selection application built on a custom 3D prize-drum engine, with one-click preset wheels, weighted selection, image panels and multi-wheel workspaces for classrooms, events, giveaways and games.
- Role
- Founder, product owner and sole developer
- Product type
- Public consumer web application
- Platform
- Vanilla JavaScript front end, ASP.NET Core 8 API, SQL Server
- Status
- Live · Active development
Overview
Random Prize Wheel is a public web application for picking at random, whether that's a student, a raffle winner, a door prize, a dice roll or tonight's dinner. Anyone can spin straight away without an account, starting from a blank wheel or a one-click Quick Wheel. Registered users can save their wheels, layouts and preferences and come back to them later.
Most spinning-wheel sites draw a flat disc. Random Prize Wheel renders a three-dimensional prize drum with its own animation engine. It supports text and image panels, weighting, several independent wheels on one screen with Spin All, and the presentation touches that make a drawing feel like an event, such as sound, confetti and winner pop-ups. Built-in guides and a rotating tips bar show visitors what the product can do.
The problem
Teachers, event hosts, streamers and businesses all need a quick way to pick at random that is fair, visible to an audience and fun to watch. Simple wheel tools cover the basic case but fall short when the options aren't equal, a single screen needs several drawings, or users want to reuse a setup next week without rebuilding it.
The product had to work instantly for a first-time visitor on a phone, while also giving repeat users enough depth (weighting, images, layouts, persistence) to make an account worth creating.
My role
I own the product end to end: strategy, UX, the rendering engine, the API and data model, security, deployment, and the SEO, content, analytics and monetization work that comes with a public consumer product. I used ChatGPT and Claude Code for implementation, debugging, refactoring and UX iteration.
- Product strategy
- UX and interaction design
- 3D rendering and animation engine
- REST-style API development
- Entity Framework Core data model
- Authentication and API security
- Deployment and release automation
- SEO and content strategy
- Analytics
- Monetization experimentation
- AI-assisted development (ChatGPT, Claude Code)
Key capabilities
Wheels and panels
- Customizable wheels with up to 100 panels
- Text and image panels
- Per-panel colors and gradients
- Panel weighting with variable panel sizing
- Import panels from CSV or TXT
- One-click Quick Wheels: Options 1–12, Money Wheel, Heads / Tails, Numbers, Letters A–Z, Pair of Dice, Yahtzee, Price Is Right, Dinner Picker
Spinning and selection
- Weighted random selection
- Adaptive spin behavior and configurable spin parameters
- Swipe-to-spin on touch devices
- Spin All across multiple wheels
- Winner removal and shuffle
- Sounds, confetti and winner pop-ups
Workspaces and persistence
- Multiple independent wheels on one workspace
- Reusable named multi-wheel layouts
- Custom backgrounds and wallpapers
- Persistent user preferences
- Spin history
Experience and platform
- Built-in how-to guides and a rotating tips bar
- Collapsible side panels, remembered per browser
- Wheel sizes itself to fit any window
- Fullscreen presentation mode
- Responsive desktop and mobile layouts
- User registration, login and saved wheels per account
- Usage analytics and site-visit tracking
Technical architecture
-
Rendering engine
A custom prize-drum engine builds each wheel from DOM panels positioned with CSS 3D transforms and animates rotation with requestAnimationFrame. Panel angles are computed from cumulative weights, so heavier options take up more of the drum. Wheel size is measured against the available space rather than set by a fixed formula, so the drum and its SPIN button always fit.
-
Front end
A framework-free, modular JavaScript application split by responsibility into geometry, build, spin, weights, layout, styles, storage, settings, popups, confetti and sound modules. Desktop and mobile get their own interaction layers.
-
API
ASP.NET Core 8 controllers provide REST-style endpoints for accounts, wheels, wheel layouts, user settings, spin tracking and analytics. Layout endpoints require sign-in, take the user's identity from the auth cookie, and only return or change layouts the user owns.
-
Data
An Entity Framework Core model on SQL Server covers users, wheels, panels, layouts and layout items, user settings, spins and site visits.
-
Authentication
Cookie-based sign-in with BCrypt-hashed passwords. Older password hashes are upgraded to BCrypt automatically the next time each user signs in. Anonymous visitors get the full spinning experience, and an account adds persistence.
-
Hosting and delivery
Hosted on Windows/IIS and deployed with Web Deploy. A publish step stamps the release version into the page, and an import map points every JavaScript module and stylesheet at that version, so each release reaches every browser with no stale cached scripts.
Interesting engineering challenges
A 3D drum built from the DOM
Each panel is a real DOM element rotated into place around the drum's axis with CSS 3D transforms. Panels stay crisp at any scale, can hold styled text or images, and remain accessible to the rest of the UI without a canvas redraw. The engine handles text scaling so long labels still fit, and rebuilds the drum efficiently when panels are added, removed or reweighted.
Weighted selection that looks right
Weighting changes both the probability and the geometry. Panel sizes are derived from cumulative weights, and the spin animation lands on the selected panel's actual arc, so what the audience sees matches the configured odds. The Money Wheel preset shows it: its seven bills are weighted 40/25/15/10/5/3/2, so a $1 bill lands far more often than a $100. A 100,000-spin simulation using the wheel's own chooser reproduced those percentages.
Persistent multi-wheel layouts
A workspace can hold several independent wheels, each with its own panels and spin state, from a pair of dice to the five dice of Yahtzee. Layouts save to the user's account as a named set of wheels and restore exactly, including Spin All across every wheel at once.
Two interaction models
On desktop, the product is a full editor with collapsible side panels for Quick Wheels, customization, spin history and guides. On a phone, it is a swipe-to-spin experience with customization one tap away. Separate desktop and mobile modules share the same engine and state, so neither interaction model compromises the other.
Hardening a live product
As the product matured, I tightened its security without disrupting existing users. The wheel-layout API now requires sign-in, ignores any user ID sent by the browser, and enforces ownership on every read and write. Errors are logged on the server instead of being returned to the client. Passwords moved to BCrypt, with existing accounts upgraded automatically at their next sign-in, so no user had to reset anything.
Releases that reach every browser
A browser that had cached an old script could keep running it after a release, so a new preset might appear in the menu and do nothing. The fix versions every JavaScript module and stylesheet in one place, through an import map, using a version stamped at publish time. Every release now gets fresh URLs automatically, each module still loads exactly once, and there are no manual version bumps.
Screenshots
Select any screenshot to view it full size.
-
Yahtzee: five independent wheels in one workspace, spun together with Spin All. -
Desktop workspace: Quick Wheels, panel customization, the 3D prize drum, spin history and guides. -
Money Wheel: image panels with weighted odds, from $1 to $100 bills. -
Pair of Dice: two wheels with Spin All, edited one at a time. -
Heads / Tails: text and image panels together. -
Price Is Right: a 20-panel wheel.
-
Swipe-to-spin on a phone. -
Money Wheel on a phone. -
Heads / Tails. -
Dice. -
Price Is Right. -
Dinner Picker.
Technologies
- Back end
- Data
- Front end
- Security
- Delivery
- AI-assisted development
Outcome and current status
Publicly Available Live · Active development
Publicly available at randomprizewheel.com, with no sign-up required to spin and optional accounts for saved wheels and layouts.
The latest release added one-click Quick Wheels, built-in guides and tips, a self-sizing wheel, API and password hardening, and automatic release versioning. Development continues.