https://github.com/kilee1230/wheel-of-names
A fun, interactive spinner wheel built with React and TypeScript — ideal for random name picking, raffles, giveaways, classroom activities, and more!
https://github.com/kilee1230/wheel-of-names
spin-a-wheel spin-the-wheel spin-wheel wheel-of-fortune wheel-of-names
Last synced: 2 months ago
JSON representation
A fun, interactive spinner wheel built with React and TypeScript — ideal for random name picking, raffles, giveaways, classroom activities, and more!
- Host: GitHub
- URL: https://github.com/kilee1230/wheel-of-names
- Owner: kilee1230
- Created: 2025-05-23T01:57:54.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-08-01T08:29:22.000Z (3 months ago)
- Last Synced: 2025-08-01T10:46:27.199Z (3 months ago)
- Topics: spin-a-wheel, spin-the-wheel, spin-wheel, wheel-of-fortune, wheel-of-names
- Language: TypeScript
- Homepage: https://kilee1230.github.io/wheel-of-names/
- Size: 5.59 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wheel of Names
[](https://deepwiki.com/kilee1230/wheel-of-names)
## Overview
The Wheel of Names is a fun and interactive web application that allows users to input names and spin a wheel to randomly select a winner. It is built using React and Chakra UI for a modern and responsive design.
## Features
- **Add Names**: Users can input names to be added to the wheel.
- **Shuffle Names**: Randomize the order of names on the wheel.
- **Sort Names**: Sort names alphabetically.
- **Clear Names**: Remove all names from the wheel.
- **Spin the Wheel**: Spin the wheel to randomly select a winner.
- **Winner Announcement**: Display the winner in a dialog with options to remove the winner from the wheel.
## Technologies Used
- **React**: For building the user interface.
- **Chakra UI**: For styling and responsive design.
- **Vite**: For fast development and build setup.
## Installation
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd wheel-of-names
```
3. Install dependencies:
```bash
pnpm install
```
4. Start the development server:
```bash
pnpm dev
```
## Usage
1. Open the application in your browser.
2. Add names to the wheel using the input field.
3. Use the buttons to shuffle, sort, or clear names.
4. Spin the wheel to select a random winner.
5. View the winner announcement and optionally remove the winner from the wheel.
### Ideal for Daily Standups
The Wheel of Names can be used to randomly select a host for daily standup meetings, ensuring fairness and adding a fun element to the process.
## Folder Structure
```
wheel-of-names/
├── public/
│ ├── sounds/
│ │ ├── spin.wav
│ │ ├── win.wav
├── src/
│ ├── App.tsx
│ ├── NameEntries.tsx
│ ├── Wheel.tsx
│ ├── fireworks.css
├── index.html
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
├── vite.config.ts
```
## License
This project is licensed under the MIT License.
## Acknowledgments
- Chakra UI for the design components.
- Vite for the development setup.
- React for the framework.
## Contributing
Feel free to submit issues or pull requests to improve the project!