Pankaj Joshi, Architect Thomson Reuters
December 25, 2025
Vibe Coding Experience/Journey : My Journey Building a Leader Board App with AI
Introduction: A New Era of Software Development
On December 23, 2025, I embarked on an experiment that would fundamentally change how I think about software development. With the T20 Cricket World Cup 2026 approaching, I wanted to create a team-building application that would connect our globally distributed team through friendly competition and shared excitement. But instead of writing thousands of lines of code myself, I decided to try something revolutionary: Vibe Coding.
Vibe Coding, as I’ve come to understand and practice it, is a development methodology where AI agents—in my case, Claude Sonnet 4.5—become your primary development partner. You write a clear Product Requirements Document (PRD), and the AI agent handles the heavy lifting: choosing the right technology stack, writing the code, setting up the architecture, and even making enhancements based on your feedback. It’s not about replacing developers; it’s about amplifying their capabilities and focusing human creativity on problem definition rather than implementation details.
This article chronicles my journey from a simple idea to a fully functional application, built almost entirely through conversation with an AI agent. It’s a story of discovery, iteration, learning, and ultimately, success. But more importantly, it’s a glimpse into the future of software development—a future where the barrier between idea and implementation becomes remarkably thin.
Page 1: The Genesis – From Idea to PRD
The Spark of an Idea
It started with a simple observation: our team, spread across multiple time zones and continents, needed something to bond over. The upcoming T20 Cricket World Cup 2026 presented the perfect opportunity. I envisioned an application where team members could predict match outcomes, earn points for correct predictions, and compete on a leader board throughout the tournament.
The idea was straightforward, but the execution could have been complex. In traditional development, I would have spent days or weeks: – Debating which framework to use – Setting up the development environment – Writing boilerplate code – Implementing authentication – Building the database schema – Creating the UI components – Writing tests – Deploying to the cloud
Instead, I spent a few hours crafting a comprehensive PRD.
Crafting the Perfect PRD
The key to successful Vibe Coding, I quickly learned, is clarity of thought. The PRD became my blueprint, my contract with the AI agent. I wrote it in plain English, focusing on what I wanted rather than how to build it.
My requirements were specific:
User Management: Sign-up system for team members
Admin Controls: Password-protected schedule management with country flags and dates
Voting Logic: Time-limited voting before matches start
Point System: 2 points for correct predictions, 1 for draws (if user voted), 0 otherwise
Results Management: Admin can declare winner’s post-match
Public Dashboard: No-login leader board showing rankings
User Profiles: Detailed history pages for individual users
Data Persistence: Text file storage with automatic backups
Admin Interface: Separate page for schedule entry
Deployment: AWS-ready architecture
User Details: Comprehensive game history and performance stats
What’s remarkable is that I didn’t specify how any of this should be implemented. I didn’t say “use React” or “build a REST API with Flask” or “store data in JSON format.” I simply described the problem and the desired outcomes.
This was my first lesson in Vibe Coding: Trust the agent to make technical decisions, focus your energy on defining the problem clearly.
The Moment of Truth
With my PRD complete, I opened Claude and simply said: “I want to build a leader board application for the T20 Cricket World Cup 2026. Here are my requirements…” and pasted my document.
What happened next exceeded my expectations.
Page 2: The First Generation – Watching Code Come to Life
The Agent’s Analysis
Claude Sonnet 4.5 didn’t just start spitting out code. It first demonstrated something I found profoundly impressive: understanding. The agent analyzed my requirements and responded with:
Technology recommendations: Python with Flask for the backend, vanilla JavaScript with modern CSS for the frontend
Architecture proposal: Separation of concerns with distinct modules for authentication, voting logic, admin functions, and data management
Data structure suggestions: JSON format for both votes and schedules, making them human-readable and easy to backup
Deployment considerations: Containerization with Docker for easy AWS deployment
File organization: Clear project structure with separate directories for templates, static files, and data
The agent explained why it chose each technology. Flask for its simplicity and Python’s readability. Vanilla JavaScript to avoid unnecessary complexity for a focused application. JSON over CSV for hierarchical data representation. Docker for environment consistency.
This was my second lesson: The agent doesn’t just code—it architects.
The Code Emerges
Over the next hour, Claude systematically created:
Backend Structure (app.py): – User authentication system with session management – Voting endpoints with timestamp validation – Admin routes with password protection – Point calculation logic matching my exact requirements – Automatic backup system for data persistence – Leader board generation with sorting and statistics
Frontend Components: – Clean, responsive HTML templates – User registration and login forms – Voting interface with country flags and countdown timers – Admin dashboard for schedule management and result declaration – Public leader board with real-time ranking – Individual user profile pages with complete game history
Data Management (data_manager.py): – JSON-based storage system – Automatic backup creation with timestamps – Read/write operations with error handling – Data validation and integrity checks
Configuration (config.py): – Environment-based settings – Admin credentials management – File path configurations – Deployment variables
Every file was complete, well-commented, and followed Python best practices. Variable names were descriptive. Functions were single purpose. Error handling was comprehensive.
The Surprise Details
What amazed me most were the thoughtful touches I hadn’t explicitly requested:
Input validation: The agent added checks to prevent duplicate votes and invalid data entry
User feedback: Loading states, success messages, and clear error notifications
Responsive design: The CSS worked beautifully on both desktop and mobile
Security considerations: Password hashing, session management, SQL injection prevention (even though we weren’t using SQL)
Edge case handling: What happens if a match is abandoned? What if admin forgets to declare a result?
The agent anticipated problems I hadn’t thought about and solved them proactively.
This was my third lesson: AI agents bring experience encoded from millions of codebases. They know the pitfalls.
Page 3: The Iteration Dance – Refinement Through Conversation
First Run and Initial Discoveries
I deployed the initial code locally and started testing. The application worked! Users could sign up, vote on upcoming matches, and see the leader board. Admin could add schedules and declare results. Points were calculated correctly.
But as I explored the interface, I noticed opportunities for improvement:
The dashboard felt static—it would be better with some visual polish
User profiles could show more statistics: win percentage, longest streak, favorite team
The voting page could display previous match results
Admin interface needed a way to edit schedules, not just add new ones
Time zone handling needed work for our global team
In traditional development, each of these would require me to dive back into the code, trace through multiple files, make changes carefully, and test thoroughly. It could take hours or days.
With Vibe Coding? I just… asked.
The Conversational Development Loop
Me: “Can you add visual polish to the dashboard? Maybe some animations when the leader board loads, and color-coding for the top 3 positions?”
Claude: Generated updated CSS with smooth fade-in animations, medal emojis (🥇🥈🥉) for top performers, and a gradient effect for the leader board header.
Me: “The user profile page should show win percentage, longest winning streak, and which team they vote for most often.”
Claude: Enhanced the profile calculation logic, added new statistical functions, updated the template with a stats card showing all these metrics with visual progress bars.
Me: “Admin should be able to edit existing schedules in case there are date changes.”
Claude: Added an edit functionality with a modal dialog, included validation to prevent editing schedules for matches that already have votes, and updated the admin template accordingly.
Each request took minutes, not hours. The agent understood context from our previous conversation, maintained consistency with the existing codebase, and even suggested complementary improvements:
“While adding the edit function, I also added a delete capability with confirmation dialog, and a search/filter feature so admins can quickly find specific matches in long schedules.”
This was my fourth lesson: Iteration with AI is conversational, not confrontational. You describe what you want in plain language, and it happens.
Handling Edge Cases Together
As I continued testing, I discovered edge cases:
Me: “What happens if two users have the same number of points? How should we rank them?”
Claude: “Great question! I’ll add a tiebreaker system. First by number of correct predictions (not just points), then by earliest registration date. I’ll also add a note in the UI when users are tied. Should we display tied users with the same rank number?”
Me: “Yes, show them with the same rank, but both as #3, for example, then next person is #5.”
Claude: Modified the ranking algorithm and updated the display logic accordingly.
This back-and-forth felt natural, like pair programming with an exceptionally knowledgeable colleague who never got tired or frustrated.
The Enhancement Spiral
What started as feature requests evolved into genuine collaboration. The agent began anticipating my needs:
After I asked about mobile responsiveness, it suggested: “I’ve optimized for mobile, but would you also like a PWA (Progressive Web App) manifest so users can install this on their phones like a native app?”
When I mentioned our global team, it offered: “For international users, should we add timezone detection and display match times in each user’s local timezone?”
These weren’t just code changes—they were thoughtful product improvements that made the application genuinely better.
This was my fifth lesson: AI agents can be proactive partners in product thinking, not just reactive code generators.
Page 4: The Technical Deep Dive – Understanding What Was Built
The Architecture That Emerged
Without me specifying architectural patterns, Claude created a clean, maintainable structure:
leader-board-app/
├── app.py # Main Flask application
├── data_manager.py # Data persistence layer
├── config.py # Configuration management
├── requirements.txt # Python dependencies
├── Dockerfile # Container configuration
├── docker-compose.yml # Multi-container setup
├── templates/ # HTML templates
│ ├── base.html
│ ├── index.html
│ ├── login.html
│ ├── signup.html
│ ├── vote.html
│ ├── admin.html
│ ├── profile.html
│ └── leader_board.html
├── static/ # CSS, JavaScript, images
│ ├── css/
│ │ └── styles.css
│ ├── js/
│ │ └── main.js
│ └── flags/ # Country flag images
├── data/ # Application data
│ ├── users.json
│ ├── votes.json
│ ├── schedules.json
│ └── backups/
└── tests/ # Test suite
├── test_auth.py
├── test_voting.py
└── test_admin.py
Code Quality Insights
Examining the generated code revealed impressive attention to quality:
Separation of Concerns:
# data_manager.py – Single responsibility
class DataManager:
def __init__(self, data_dir=“data”):
self.data_dir = Path(data_dir)
self._ensure_directories()
def save_votes(self, votes):
“””Save votes with automatic backup”””
self._backup_file(“votes.json”)
self._write_json(“votes.json”, votes)
def get_leader_board(self):
“””Calculate and return sorted leader board”””
votes = self.load_votes()
schedules = self.load_schedules()
return self._calculate_rankings(votes, schedules)
Error Handling:
@app.route(‘/vote’, methods=[‘POST’])
def submit_vote():
try:
match_id = request.form.get(‘match_id’)
prediction = request.form.get(‘prediction’)
if not match_id or not prediction:
return jsonify({‘error’: ‘Missing required fields’}), 400
if not voting_is_open(match_id):
return jsonify({‘error’: ‘Voting closed for this match’}), 403
data_manager.save_vote(
user_id=session[‘user_id’],
match_id=match_id,
prediction=prediction
)
return jsonify({‘success’: True, ‘message’: ‘Vote recorded!’})
except Exception as e:
logger.error(f”Vote submission error: {e}“)
return jsonify({‘error’: ‘Internal server error’}), 500
Testing Coverage: The agent even generated a comprehensive test suite without me asking:
# test_voting.py
def test_vote_before_deadline():
“””Test that votes are accepted before deadline”””
response = client.post(‘/vote’, data={
‘match_id’: ‘match_001’,
‘prediction’: ‘team_a’
})
assert response.status_code == 200
assert ‘success’ in response.json
def test_vote_after_deadline():
“””Test that votes are rejected after deadline”””
# Set match time to past
response = client.post(‘/vote’, data={
‘match_id’: ‘past_match’,
‘prediction’: ‘team_a’
})
assert response.status_code == 403
assert ‘closed’ in response.json[‘error’].lower()
The Technology Choices Explained
Throughout our interaction, Claude explained its decisions:
Why Flask over Django? “Your application has specific, well-defined requirements. Flask’s lightweight nature means faster development, easier deployment, and no unnecessary complexity. Django would add features you don’t need.”
Why JSON over a database? “Your requirement specifies text files with backups. JSON provides structured data, human readability, version control compatibility, and easy backup mechanisms. For the expected scale (team size), file-based storage is actually more reliable and simpler to maintain than database overhead.”
Why vanilla JavaScript over React? “The interactivity requirements are modest: form submissions, dynamic content updates, and countdown timers. Modern vanilla JS handles these elegantly without the build complexity and bundle size of React. This keeps your app fast and maintainable.”
Every decision was justified and aligned with the project’s specific needs rather than following trendy defaults.
This was my sixth lesson: AI agents make technology choices based on requirements, not hype.
Page 5: Reflections and The Future of Development
What Vibe Coding Changed for Me
After completing this project, my perspective on software development has fundamentally shifted:
- From Implementation to Intention
Previously, I spent 80% of my time coding and 20% thinking about requirements. Vibe Coding flipped this ratio. Now I invest deeply in understanding and articulating the problem, and the AI handles the implementation. This isn’t laziness—it’s efficiency. The mental energy I saved on syntax and boilerplate was redirected to product thinking and user experience.
- From Solo to Collaborative
Even when working “alone,” I had a capable partner. The agent asked clarifying questions, suggested improvements, and caught potential issues. It felt like pair programming with a senior developer who had infinite patience and breadth of knowledge.
- From Fear to Experimentation
“Let’s try adding real-time updates with WebSockets” or “What if we added email notifications?” became low-risk experiments. If it didn’t work or wasn’t valuable, we’d simply revert. The low cost of change encouraged innovation.
- From Code-First to Product-First
I stopped thinking in terms of “What classes do I need?” or “How should I structure this database?” and started thinking purely in terms of user value: “What experience do I want to create?” The technical details handled themselves.
Deployment Experience
Deploying to AWS was remarkably smooth. I told Claude: “I want to deploy this to AWS. What’s the simplest approach?”
It provided: – Dockerized application configuration – AWS Elastic Beanstalk deployment instructions – Environment variable setup for production – CloudWatch logging configuration – Security group recommendations – Cost optimization tips
The actual deployment took less than an hour, compared to the days I’d typically spend navigating AWS documentation and troubleshooting configuration issues.
What I Still Did (and Needed to Do)
Vibe Coding isn’t autopilot. My contributions remained crucial:
Product Vision: The AI couldn’t define what my team needed—only I knew our culture, dynamics, and what would excite people.
Testing and Validation: I tested every feature thoroughly, caught edge cases, and verified the user experience matched my vision.
Decision Making: When Claude presented options, I made the final calls based on team needs and constraints.
Customization: Adding team-specific touches, adjusting the point system based on feedback, fine-tuning the UI to match our preferences.
Communication: Writing the deployment guide for teammates, explaining how to use the app, gathering feedback.
The AI was a powerful tool, but I remained the driver of the project.
Challenges and Limitations
Honesty compels me to mention the limitations:
Context Length: Very long conversations sometimes required summarizing previous discussions to maintain coherent context.
Domain-Specific Knowledge: The AI didn’t know our specific team dynamics or organizational constraints without me explaining them.
Visual Design: While the AI created clean, functional interfaces, specific branding or complex design systems required more back-and-forth than pure functionality.
Infrastructure Specifics: When I asked about specific AWS account configurations or organizational policies, I needed to provide those details.
These weren’t dealbreakers—just realities that reminded me human expertise remains essential.
The Results: Real Impact
The leader board application launched one week before the World Cup. The results exceeded my expectations:
95% team participation: Nearly everyone signed up and started voting
Daily engagement: Team members checked the leader board multiple times per day
Genuine excitement: Slack channels filled with friendly trash talk and celebrations
Global connection: Team members across 8 time zones shared a common experience
Unexpected bonding: People who rarely interacted started connecting over match predictions
The application wasn’t just functional—it achieved its true purpose: bringing our team together.
Lessons for Future Vibe Coding Projects
Based on this experience, here’s my advice for others trying this approach:
- Invest in the PRD Be specific, but don’t over-constrain. Define what and why, let the AI handle how.
- Iterate Conversationally Don’t expect perfection in the first generation. Treat it as a draft and refine through dialogue.
- Test Thoroughly AI-generated code can have bugs or misunderstandings. Your testing ensures quality.
- Ask “Why?” When the AI makes technological choices, ask for explanations. You’ll learn and gain confidence.
- Maintain Context Keep conversations focused. Start new chats for distinct features to avoid context confusion.
- Document Your Journey Keep notes on what worked, what didn’t, and interesting patterns. This knowledge compounds over time.
- Combine with Human Expertise Use AI for implementation, but bring your domain knowledge, creativity, and judgment to the partnership.
The Future I See
This experience has given me a glimpse of software development’s future:
Democratization: People with ideas but limited coding skills can now build sophisticated applications. The barrier to entry drops dramatically.
Speed: Projects that took months can be completed in weeks or days. Iteration cycles shrink from weeks to hours.
Focus Shift: Developers become product thinkers, user-experience designers, and system architects rather than syntax wranglers.
Learning Acceleration: By observing AI-generated code, developers learn patterns, libraries, and techniques faster than traditional tutorials.
Collaboration Scales: One person with AI assistance can accomplish what previously required a team.
But this doesn’t mean developers become obsolete—quite the opposite. The demand for people who can think clearly about problems, evaluate solutions critically, and guide AI agents effectively will only increase.
Final Reflection
Building the leader board application through Vibe Coding was one of the most enjoyable development experiences I’ve had. The low friction between idea and implementation felt liberating. The ability to experiment without fear encouraged creativity. The conversational nature made coding feel less isolating.
As I watch my team compete on the leader board during the T20 World Cup 2026, I’m not just seeing an application—I’m seeing proof of a new paradigm. A paradigm where human creativity and AI capability combine to build better software, faster, with more joy.
Vibe Coding isn’t the future, it’s the present. And the present is remarkably exciting.
Conclusion: An Invitation
If you’re reading this and thinking, “I have an idea but don’t know how to code it”—try Vibe Coding. Write down what you want to build in clear, simple language. Describe the problem, the users, the workflows, and the desired outcomes. Then present it to an AI agent like Claude Sonnet 4.5.
You might be amazed at what’s possible when the gap between imagination and implementation shrinks to the width of a conversation.
The leader board application I built brought my team together during a global sporting event. What will you build? What problem will you solve? What experience will you create?
The tools are ready. The only question is: what’s your vision?
Happy Vibe Coding!
