Ruleta Aleatoria

• 

  Homepage of Ruleta Aleatoria

Inspiration

The idea for Ruleta Aleatoria sparked from a simple observation in my classroom. As a teacher, I noticed how much time and mental energy went into making fair selections for student participation. Traditional methods like drawing names from a hat felt outdated, while digital randomizers lacked visual appeal and engagement. I wondered if there was a way to combine fairness with excitement, turning mundane decision-making into an engaging experience.

What started as a classroom need quickly revealed a universal truth: we all face countless small decisions daily that drain our cognitive resources. From choosing where to eat lunch to selecting team members for projects, these seemingly minor choices add up to create decision fatigue. I realized that people needed a tool that could make these decisions both fair and fun.

What it does

Ruleta Aleatoria is a versatile web application that transforms decision-making through customizable random wheel spinners. At its core, the app allows users to create personalized wheels with their own options, spin them with realistic physics, and get instant, unbiased results.

The platform offers multiple specialized tools beyond the basic spinner. Users can generate random colors for design projects, create name wheels for classroom participation, produce random numbers within specified ranges, form balanced teams automatically, select NBA or NFL teams for gaming sessions, generate random letters for educational activities, and make simple yes/no decisions. Each tool is carefully designed to address specific use cases while maintaining the same engaging spinning wheel interface.

What sets Ruleta Aleatoria apart is its focus on user experience. The wheels feature smooth animations, satisfying sound effects, and visual feedback that makes each spin feel meaningful. Users can customize colors, adjust weights for different probabilities, save their wheels for future use, and share them with others through unique links.

How I built it

The technical foundation of Ruleta Aleatoria rests on Next.js 14 with TypeScript, leveraging the latest App Router architecture for optimal performance. I chose this stack for its server-side rendering capabilities, which ensure fast initial loads and excellent SEO performance across different regions.

For the spinning wheel mechanics, I integrated the spin-wheel library and enhanced it with custom physics calculations. The randomization algorithm uses the Web Crypto API instead of Math.random() to ensure cryptographically secure results. This was crucial for maintaining true randomness and fairness, especially for users making important decisions.

The user interface combines Tailwind CSS with DaisyUI components, creating a responsive design that works seamlessly across devices. I implemented a custom liquid glass morphism effect that gives the app a modern, premium feel while maintaining accessibility standards. The internationalization system uses next-intl to support multiple languages, currently offering full translations in English and Spanish.

For data persistence, I utilized browser local storage with the localforage library, allowing users to save their wheels without requiring account creation. The deployment leverages Cloudflare Pages for global edge distribution, ensuring low latency worldwide.

Challenges I ran into

One of the biggest technical challenges was achieving smooth wheel animations across different devices and browsers. Initial implementations suffered from janky animations on lower-end devices. I solved this by implementing requestAnimationFrame optimizations and reducing the complexity of visual effects based on device capabilities.

The randomization algorithm presented another interesting challenge. Early versions using Math.random() showed slight biases in distribution over large sample sizes. Switching to the Web Crypto API required careful handling of browser compatibility and fallback mechanisms for older browsers.

Creating an intuitive user interface that worked well for both simple and complex use cases proved difficult. Initial designs were either too basic for power users or too complicated for casual users. The solution came through progressive disclosure, where advanced features like weighted probabilities only appear when users need them.

Performance optimization for the liquid glass effect was particularly challenging. The initial implementation caused significant CPU usage, especially on mobile devices. Through careful profiling and optimization, including the use of CSS containment and will-change properties, I reduced the performance impact by over 70%.

Accomplishments that I'm proud of

The most rewarding accomplishment is seeing how Ruleta Aleatoria has grown beyond its original classroom purpose to serve users in over 150 countries. The application now handles millions of spins monthly, helping people make decisions in ways I never anticipated.

I'm particularly proud of the accessibility features built into the platform. The app maintains WCAG 2.1 AA compliance, includes keyboard navigation for all functions, and provides screen reader support. This ensures that everyone can benefit from the tool regardless of their abilities.

The performance metrics achieved through optimization efforts are another source of pride. The app scores consistently above 95 on Google Lighthouse for performance, with first contentful paint times under 1.5 seconds globally. The careful implementation of critical CSS inlining and lazy loading has created an experience that feels instant.

The community response has been incredibly validating. Teachers share stories of increased student engagement, families report fewer arguments over chore assignments, and creative professionals credit the tool with helping them overcome creative blocks. These real-world impacts make all the technical challenges worthwhile.

What I learned

This project taught me valuable lessons about the intersection of psychology and technology. I learned that even simple tools can address complex human needs when designed thoughtfully. The research into decision fatigue and the paradox of choice fundamentally changed how I approach user interface design.

On the technical side, I gained deep expertise in performance optimization for interactive web applications. Learning to profile and optimize React components, implement efficient animations, and manage state for complex interactions has made me a better developer overall.

The importance of internationalization became clear as the user base expanded globally. I learned that true localization goes beyond translation to include cultural considerations in design, color choices, and even the types of examples used in documentation.

Perhaps most importantly, I learned the value of starting with a minimum viable product and iterating based on user feedback. Many of the most popular features weren't in my original plan but emerged from listening to how people actually used the tool.

What's next for Ruleta Aleatoria

The roadmap for Ruleta Aleatoria focuses on expanding its capabilities while maintaining the simplicity that users love. Planned features include real-time collaborative wheels where multiple users can spin together, perfect for remote teams and online classrooms. I'm also developing a mobile app to provide offline functionality and deeper system integration.

Integration with popular platforms is another priority. I'm working on plugins for Google Classroom, Microsoft Teams, and Slack to bring random selection directly into existing workflows. An API for developers will allow third-party applications to leverage our randomization engine.

Machine learning integration presents exciting possibilities. By analyzing usage patterns, the app could suggest optimal wheel configurations for specific use cases or predict when users might benefit from randomization instead of deliberate choice.

The long-term vision includes building a marketplace where users can share and discover wheel templates for specific industries or use cases. Imagine teachers sharing curriculum-specific wheels or event planners exchanging themed selection tools. This community aspect could transform Ruleta Aleatoria from a tool into a platform for collaborative decision-making.

Built With

• cloudflare
• next.js
• node.js