SpinDecide Project Report
1. The Concept
SpinDecide is a lightweight decision-making web app that turns any list of options into a colorful spinning wheel. Instead of debating what to choose, users can add choices, spin the wheel, and let the app select a random winner in a fun and satisfying way.
The goal was to make the experience feel fast, polished, and enjoyable across desktop, tablet, and mobile. The app focuses on a simple flow: import or edit options, spin, celebrate the result, and keep track of history.
2. The Stack
The Stack: HTML, CSS, and Vanilla JavaScript in a single index.html file.
The AI Assist: AI helped translate the product documents, design mockups, and UX requirements into a complete working prototype. It supported layout matching, responsive design, Canvas wheel logic, modal interactions, dark mode polish, import/export behavior, and final UI refinement.
3. The 1 Day Sprint:
Morning (Hours 1–3): The first stage focused on understanding the project documents, feature requirements, design direction, and user flow. The core layout was built with the header, options panel, wheel area, remove-winner card, and responsive structure.
Afternoon (Hours 4–6): The main features were implemented and refined. This included the editable options list, file import, shuffle, clear actions, Canvas-based wheel drawing, spin animation, winner detection, history tracking, LocalStorage persistence, theme toggle, sound toggle, hamburger menu, and custom modal system.
The Finish Line (Hour 7-8): The final stretch focused on polish. The UI was adjusted to match the latest desktop and mobile mockups, the wheel proportions were improved, the winner popup was redesigned, dark mode was audited, toolbar workflows were cleaned up, and the pointer was updated to dynamically match the active wheel segment.
4. The Roadblocks
Roadblocks: The biggest challenge was keeping the app polished while staying inside a strict single-file Vanilla JavaScript structure. Several UI details required careful iteration, especially the desktop left panel spacing, mobile card layout, toolbar alignment, modal consistency, dark mode contrast, and wheel pointer behavior. Another challenge was preserving existing functionality while repeatedly updating the visual design to match newer mockups.
5. Key Takeaways
SpinDecide shows that a small web app can still feel premium when the details are treated seriously. Smooth animation, clear hierarchy, responsive layout, custom modals, sound, confetti, and strong visual feedback all make the app feel more complete.
The project also proved the importance of design consistency. Once the shared modal style, spacing system, theme variables, and button patterns were cleaned up, the whole app felt more unified.
My final thought: SpinDecide is simple by design, but the experience feels memorable because the interaction is playful, fast, and satisfying. It turns a basic random choice into a small moment of excitement.