WheelWise

Inspiration

Decision-making can be overwhelming, especially for everyday choices. I wanted to create a fun, interactive way to turn mundane decisions into engaging experiences using the classic spinning wheel concept.

What it does

WheelWise is a decision-making app that transforms choices into colorful spinning wheels. Users can create custom wheels with their options, spin to make decisions, and build a library of reusable wheels for different scenarios like "What's for dinner?" or "Weekend activities."

How we built it

Built with React, TypeScript, and Redux Toolkit for state management. Used Tailwind CSS for styling, Framer Motion for smooth animations, and Canvas API for the interactive wheel graphics. Integrated Howler.js for sound effects and Canvas Confetti for celebration animations.

Challenges we ran into

Creating smooth wheel animations that felt natural and fair was tricky. Balancing the physics of the spin with user expectations for randomness required multiple iterations. Managing state across different wheel configurations also needed careful planning.

Accomplishments that we're proud of

The wheel spinning animation feels satisfying and authentic. The app has a clean, intuitive interface that makes creating and managing wheels effortless. Successfully implemented a complete user experience from wheel creation to result celebration.

What we learned

Gained deeper understanding of canvas animations and physics simulations in web apps. Learned how small details like sound effects and visual feedback significantly impact user engagement. Improved skills in TypeScript and modern React patterns.

What's next for WheelWise

Planning to add wheel sharing capabilities, preset templates for common decisions, and possibly a mobile app version. Considering gamification elements like achievements and statistics tracking to make decision-making even more engaging.

Built With

• autoprefixer
• canvas-confetti
• eslint
• framer-motion
• howler.js
• lucide-react
• postcss
• radix-ui
• react
• react-dom
• react-redux
• react-router-dom
• redux-toolkit
• tailwind-css
• typescript
• vite