https://github.com/yassercoder/wheel-of-luck
Wheel of luck is a web app where users can enter text or image-based entries and spin the wheel to randomly select a winner. Build with React + Typescript
https://github.com/yassercoder/wheel-of-luck
compound-components context-api css-modules hooks integration-testing react react-testing-library typescript unit-testing usereducer vite vitest
Last synced: 4 months ago
JSON representation
Wheel of luck is a web app where users can enter text or image-based entries and spin the wheel to randomly select a winner. Build with React + Typescript
- Host: GitHub
- URL: https://github.com/yassercoder/wheel-of-luck
- Owner: YasserCoder
- Created: 2025-05-04T19:57:20.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-03T10:59:47.000Z (7 months ago)
- Last Synced: 2025-07-03T11:52:15.833Z (7 months ago)
- Topics: compound-components, context-api, css-modules, hooks, integration-testing, react, react-testing-library, typescript, unit-testing, usereducer, vite, vitest
- Language: TypeScript
- Homepage: https://wheel-of-luck-beta.vercel.app
- Size: 434 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎡 Wheel of Luck
A modern and customizable **Wheel of Luck** app inspired by [wheelofnames.com](https://wheelofnames.com/), built with **Vite**, **React**, and **TypeScript**. Users can enter text or image-based entries and spin the wheel to randomly select a winner!
## 📸 Live Demo
A live version of the app is available here: **👉 [Live Demo](https://wheel-of-luck-beta.vercel.app)**
## ✨ Features
- 🎰 **Random Winner Selection** – Enter names or images and spin to pick a winner.
- 🎨 **Customizable Wheel Colors** – Choose a theme color or set individual slice colors.
- 🌑 **Dark / Light Mode** – Seamless theme switching.
- 💾 **Save & Load Entries** – Store your list and retrieve it later.
- 🧩 **Drag & Drop Sorting** – Reorder entries easily with drag-and-drop (via `SortableJS`).
- 💬 **Sweet Alerts** – Smooth interactions with `SweetAlert2`.
- 🔄 **Flexible Entry Types** – Support for both **text** and **image** entries.
- ⚙️ **Modern React Patterns** – Includes:
- Custom Hooks
- Compound Components
- Context API + useReducer
## 🛠 Tech Stack
- **Frontend**: [Vite](https://vitejs.dev/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/)
- **Testing**: [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- **Styling & Interaction**:
- [react-icons](https://react-icons.github.io/react-icons/)
- [sweetalert2](https://sweetalert2.github.io/)
- [sortablejs](https://github.com/SortableJS/Sortable)
## 🧪 Testing
This project includes **unit and integration tests** using:
- `React Testing Library` for component behavior
- `Vitest` for test runner and assertions
Run tests:
```bash
npm run test
```
## 🚀 Getting Started
### 1. Clone the repository
```bash
git clone https://github.com/your-username/wheel-of-luck.git
cd wheel-of-luck
```
### 2. Install dependencies
```bash
npm install
```
### 3. Run the development server
```bash
npm run dev
```
## Contact
For any questions or feedback, please reach out to:
- **Yasser Laissaoui**
- **Email**: yasser.laiss01@gmail.com
- **GitHub**: [YasserCoder](https://github.com/YasserCoder)
- **LinkedIn**: [Yasser Laissaoui](https://linkedin.com/in/yasser-laissaoui)