Vibe Coding with AI: Building a Custom Spin Wheel App in Hours

TL;DR: Used AI coding agents to build a fully functional AI Spin Wheel Creator in just 4-6 hours—something that would have taken 2 weeks with traditional coding. No advanced programming knowledge required. The future of coding is here, and it's accessible to everyone with an idea.

The New Era of Creation: No Permission Required

Remember being told that coding is only for a select few? That creating software requires years of specialised training? That barrier is crumbling before our eyes. Much as the printing press transformed access to knowledge from the privileged few to the many, AI-assisted development is democratising the ability to create digital solutions.

I recently built a fully functional, AI-powered spin wheel application in hours, not weeks—with limited coding knowledge and a powerful AI coding assistant at my side. This isn't just about building a simple app; it's about what this new paradigm means for anyone with ideas they want to bring to life.

Here's the story of how my daughter's classroom need led to a modern web application that anyone can use, and why this matters for every aspiring creator out there.

How a 10-Year-Old's Need Sparked a Project

It started with a genuine conversation with my 10-year-old daughter about her day at school.

"Dad, we use spin wheels all the time to pick students for activities, but the ones we have are always the same boring options. I wish we could make our own with whatever choices we want."

When she mentioned wanting to try similar wheels at home for her activities, my wife—knowing my adventures with AI—issued a challenge: "Why don't you build a spin wheel app?"

That simple challenge sparked an idea. What if I could build a customisable spin wheel that not only allowed manual entry of options but could also generate creative options using AI? Isn't that what technology should ultimately do—transform our fleeting ideas into tangible solutions?

Rather than dismissing the idea because "I'm not really a programmer," I decided to explore what's possible with today's AI tools. This is the essence of Vibe Coding—that increasingly popular approach to development that rides the wave of AI capabilities to turn ideas into reality without traditional barriers.

Building the AI Spin Wheel: Step by Step

1. Ideation: Defining What Success Looks Like

The first step was clarifying exactly what I wanted to build:

• An interactive spin wheel with smooth animation
• Option to manually enter choices (for my daughter's class use cases)
• AI-powered option generation (for creative inspiration)
• Ability to save and reload favourite wheels
• Mobile-friendly design so it works on classroom tablets
• Easy to deploy and share with others

I gathered screenshots of similar applications as reference points for both my own ideation and as visual inputs for the AI coding agent. These served as conversation starters rather than blueprints—allowing me to direct the development with specific creative briefs about layout, interaction, and aesthetics. This dialogue between human creative vision and AI implementation represents a new design approach where ideas need not be translated to paper before becoming reality.

2. Planning & Architecture with AI Guidance

This is where the magic of modern development really shines. Rather than spending days researching technologies and proper architecture, I used the Cline AI coding agent plugin within Visual Studio Code.

Choosing the Tech Stack

With Cline's Planning/Architecting option, I explained my project and asked for guidance on the simplest approach to build a reliable web application.

I deliberately chose a lightweight technology stack, optimising for simplicity and ease of development:

• HTML/CSS/JavaScript: I selected this foundational trio precisely because of their simplicity and lightweight nature. No frameworks, no complicated build processes—just the fundamental building blocks of the web. This choice minimised complexity whilst still providing all the tools needed for an interactive experience.
• Netlify for Hosting and Functions: This serverless platform provides free hosting and functions—perfect for small projects. It eliminates the need to maintain a server whilst still supporting dynamic functionality through its serverless functions.
• Groq API: I selected this for its remarkable speed and compatibility with the OpenAI API format. This meant simpler integration code and a responsive AI experience. Crucially, Groq offers free access tiers, making the project economically viable.

The AI confirmed these choices and recommended the Canvas API for the wheel animation and local storage for saving wheel configurations.

The beauty of this approach? No complex frameworks to learn, no database setup, no heavyweight infrastructure—yet still a fully functional modern web app with AI capabilities.

Selecting the Right AI Models for the Job

One of the fascinating aspects of working with Cline as a coding agent is the ability to switch between different AI models based on the task at hand—rather like a craftsperson selecting precisely the right tool from a well-appointed workshop.

• DeepSeek v3: I found this excelled at generating precise, functional code—especially for the complex JavaScript needed for wheel animation and interaction logic. Its code generation was remarkably clean and efficient, though it lacks multimodal capabilities.
• Google Gemini 2.0 Flash Thinking: This proved invaluable for creative problem-solving, suggesting UI improvements, and thinking through architecture decisions. Crucially, Gemini's multimodal capabilities allowed me to simply attach screenshots of example app layouts or problematic UI elements directly to the conversation.

This multimodal interaction transformed our communication efficiency. Rather than laboriously describing visual elements in text—an exercise in verbal gymnastics at the best of times—I could simply share images of similar spin wheels or highlight interface elements that weren't quite right. The AI would instantly grasp my intention from these visual references, validating the age-old wisdom that a picture is indeed worth a thousand words.

The ability to switch between these complementary "minds" based on the task was a quiet revolution in my workflow. When I needed reliable code generation, DeepSeek v3 delivered with precision. When I needed to share visual references or explore creative alternatives, Gemini stepped in with its visual comprehension. Isn't this a perfect reflection of how we humans work—different thinking modes for different challenges, visual processing for some tasks, analytical for others?

Setting Up Version Control and Deployment

Cline helped me:

1. Initialise a Git repository for version control
2. Create a new GitHub repository
3. Set up a new Netlify site linked to this GitHub repository
4. Configure continuous deployment so changes are automatically deployed

This meant that every time I made changes, committed them, and pushed to GitHub, my app would automatically update on Netlify. No manual deployment, no complexity—just a smooth workflow that let me focus on creation rather than process.

3. The Coding Phase: From Idea to Working App

Now came the exciting part—actually building the app. With Cline in "Act" mode, I began an iterative process of describing what I needed and refining the results.

Building the Core: HTML Structure and CSS Styling

First, I needed the basic structure of the application:

Me: "Create the basic HTML structure for a spin wheel app with:
- A header with the app title
- An input section for entering options manually or with AI
- A central area for the wheel
- A section to display results
- A footer for saved wheels"

Cline generated the HTML structure, which I then customised. The same process worked for the CSS styling—I described the visual feel I wanted, and the AI generated the CSS.

What impressed me was the ability to iterate quickly:

Me: "The spin button needs to be more prominent and the wheel sections need better colour contrast."

Instantly, updated CSS arrived that addressed these concerns. No need to search StackOverflow or CSS tutorials—the AI understood what I needed and delivered, like a skilled collaborator who anticipates your intentions.

The Challenge: Interactive Wheel with Canvas

The most complex part was creating the actual spinning wheel using the Canvas API. This is where traditional development would have been a major hurdle for someone without advanced JavaScript skills.

I prompted Cline with:

Me: "Create JavaScript code that draws a wheel on the canvas with dynamic segments based on user input, animates a spin with easing, and randomly selects a winner."

DeepSeek v3 generated the complete wheel implementation, including:

• Drawing segments with different colours
• Handling the spinning animation
• Calculating the winning segment
• Managing wheel state

Instead of spending days learning Canvas API intricacies, I had functional wheel animation in minutes. When I found issues, I simply described them:

Me: "The wheel spins too quickly and the text on wheel segments is hard to read when there are many options."

The AI suggested adjustments to the animation timing and text rendering, which I could implement immediately.

Integrating AI with Netlify Functions

The most innovative feature was the AI option generation. This required:

1. Creating a Netlify serverless function
2. Connecting to the Groq API
3. Processing responses to get usable wheel options

This would typically involve understanding serverless architecture, API authentication, and response parsing—all potential stumbling blocks for a non-professional developer. Yet with AI assistance, I was able to describe what I needed in conversational language, and Cline generated the necessary code to handle all these complex interactions.

I was particularly impressed by how the AI handled API authentication, error cases, and response parsing—all areas where even experienced developers often need to consult documentation.

Ephemeral Storage: A Conscious Simplicity

For data persistence, I chose the browser's localStorage—an elegant simplicity that stores saved wheels directly in the user's browser without requiring database setup. This approach means wheels remain available between sessions on the same device, yet would disappear should one clear their browser cache. For a classroom or home tool, this ephemeral yet practical persistence strikes precisely the right balance.

4. Testing and Deployment: The Power of CI/CD

Testing was straightforward with the Netlify CLI:

netlify dev

This command ran the entire application locally, including the serverless function, allowing me to test everything before committing changes.

When satisfied, I simply:

git add .
git commit -m "Add feature X"
git push

Netlify automatically detected the changes, rebuilt the site, and deployed the updated version. Within minutes, my changes were live at https://ai-spin-wheel-creator.netlify.app.

The Mind-Blowing Numbers: Weeks vs. Hours

Perhaps the most remarkable aspect of this project was the time saved. According to estimates in my project documentation:

Phase	Traditional Coding	With AI Assistance
Project Setup	1-2 hours	Minutes
HTML Structure	4-8 hours	~1 hour
CSS Styling	8-16 hours	~1 hour
JavaScript Logic	2-4 days	~2 hours
API Integration	1-2 days	~1 hour
Testing & Refinement	1-2 days	~1 hour
TOTAL	9-10 days	4-6 hours

That's a 75-85% reduction in development time.

For me, this meant the difference between "I could build this someday when I have two weeks free" and "I can build this tonight after dinner." For many ideas, this is the difference between never happening and becoming reality. Isn't this the ultimate luxury in our time-starved world—to compress weeks of effort into hours?

Learning Through Doing: The Educational Power of AI Coding

One misconception about AI-assisted coding is that it prevents learning. In my experience, the opposite is true—it enables "learning by doing" in a powerful way.

While I didn't write every line of code myself, I grew to understand what each part was doing through my dialogue with the AI. When I didn't understand a particular technique or function, I could simply ask:

Me: "Can you explain how the wheel spinning animation works? I don't understand the easing function."

The AI would then break down the concept in plain language, connecting abstract programming concepts to the tangible result I could see in my browser. This created a tight feedback loop between:

1. Seeing something work
2. Questioning how it works
3. Learning the concept
4. Applying that knowledge to the next feature

This approach allows creators to learn programming concepts in context—when they're needed for a real project—rather than in the abstract. It's learning driven by curiosity and necessity, which is often the most effective kind. Isn't this reminiscent of the apprenticeship model that shaped craftspeople for centuries, now reimagined for the digital age?

Acknowledging Professional Development While Embracing New Paths

Professional software engineers bring irreplaceable value through their deep understanding of programming principles, system architecture, and performance optimisation. The emergence of AI-assisted development doesn't diminish this expertise—rather, it creates a complementary pathway that allows more people to participate in the creation process. Consider it an extension of the coding spectrum, not a replacement for seasoned professionals.

Professional developers will likely find AI tools enhance their productivity as well—handling routine coding tasks while they focus on the complex architectural decisions that benefit from human judgment and experience.

The future isn't about AI replacing developers—it's about creating a spectrum of development approaches suitable for different people with different needs and skill levels.

The Pros and Cons of AI-Assisted Development

While the benefits are clear, it's worth acknowledging both sides of this new development paradigm:

Pros:

• Drastically reduced development time - Build in hours what would take weeks
• Lower knowledge barrier - You don't need years of programming experience
• Rapid iteration - Make changes quickly based on testing and feedback
• Learning opportunity - You can learn coding concepts by discussing them with the AI
• Focus on ideas - Spend more time on what to build, less on how to build it

Cons:

• Less deep understanding - You might not fully understand all the code generated initially
• Dependency on AI tools - Your development process relies on these tools being available
• Potential for suboptimal solutions - AI might not always generate the most efficient code
• Limited to what AI can understand - Very novel or complex requirements might still need traditional coding
• AI hallucinations - Sometimes the AI suggests approaches that don't work in practice

For me, the pros far outweigh the cons, especially for someone who isn't looking to become a professional developer but wants to bring ideas to life.

Why This Matters: The Democratisation of Creation

What excites me most about this experience is what it means for the future of software creation.

For decades, we've lived in a world where ideas for software were divided into two categories:

1. Ideas simple enough for non-developers to implement using no-code tools
2. Ideas complex enough to require professional developers

AI-assisted development opens a vast middle ground—a space where people with ideas but limited coding knowledge can create sophisticated, custom applications.

The implications are profound:

• Teachers can build custom tools for their classrooms
• Small business owners can create specialised software for their needs
• Hobbyists can turn concepts into functioning applications
• Parents (like me) can build something useful for their children

Perhaps we are witnessing the beginnings of a renaissance in digital creation, where the limiting factor becomes our imagination rather than our technical knowledge.

Getting Started with Your Own Project

If you're inspired to try this approach, here's how to get started:

1. Install Visual Studio Code - A free, powerful code editor
2. Add the Cline AI Plugin - Or another AI coding assistant of your choice
3. Start with a simple idea - Something useful to you personally
4. Use the planning mode first - Let the AI help you structure your approach
5. Iterate incrementally - Build one feature at a time, testing as you go

The key is to approach it as a conversation with a knowledgeable assistant, not as traditional programming. Describe what you want to achieve, ask questions when you don't understand, and don't be afraid to try things.

Conclusion: Your Permission Slip to Create

Consider this your official permission slip to build that app you've been thinking about. You don't need a computer science degree. You don't need years of coding experience. You need an idea and the willingness to learn a new way of working with AI tools.

What will you build? What problems will you solve? What ideas will you bring to life?

The tools are here. The barriers are falling. The future of coding isn't just for coders—it's for creators. And that includes you.

What began as a response to my daughter's casual observation has evolved into a functioning tool with untapped potential. The application represents something far more significant than a digital wheel—it embodies the new creative possibility available to us all. The journey from dinner table conversation to deployed application is no longer reserved for those with technical expertise; it's accessible to anyone with an idea worth pursuing.

This is our new superpower: the ability to transform everyday insights into digital solutions with unprecedented speed and accessibility. What will you build with yours?

---

Have you experimented with AI coding assistants? What have you built or want to build? Share your experiences in the comments below!

This AI Spin Wheel Creator is freely available for anyone to use. The code is open source on GitHub.