Home
/
Blog
/
Developer Insights
/
How I used VibeCode Arena platform to build code using AI and learnt how to improve it

How I used VibeCode Arena platform to build code using AI and learnt how to improve it

Author
Vineet Khandelwal
Calendar Icon
October 3, 2025
Timer Icon
3 min read
Share

Explore this post with:

A developer used VibeCodeArena to build a simple image carousel and discovered that working code isn’t always good code. The platform’s evaluation revealed hidden security, performance, and maintainability issues, while also teaching best practices. By iterating with its “generate → analyze → challenge → improve → measure” loop, this developer learned how to bridge the gap between functional code and production-ready code. This experience highlighted that AI can generate code, but true learning comes from structured feedback, measurement, and continuous improvement.

I Used AI to Build a "Simple Image Carousel" at VibeCodeArena. It Found 15+ Issues and Taught Me How to Fix Them.

My Learning Journey

I wanted to understand what separates working code from good code. So I used VibeCodeArena.ai to pick a problem statement where different LLMs produce code for the same prompt. Upon landing on the main page of VibeCodeArena, I could see different challenges. Since I was interested in an Image carousal application, I picked the challenge with the prompt "Make a simple image carousel that lets users click 'next' and 'previous' buttons to cycle through images."

Within seconds, I had code from multiple LLMs, including DeepSeek, Mistral, GPT, and Llama. Each code sample also had an objective evaluation score. I was pleasantly surprised to see so many solutions for the same problem. I picked gpt-oss-20b model from OpenAI. For this experiment, I wanted to focus on learning how to code better so either one of the LLMs could have worked. But VibeCodeArena can also be used to evaluate different LLMs to help make a decision about which model to use for what problem statement.

The model had produced a clean HTML, CSS, and JavaScript. The code looked professional. I could see the preview of the code by clicking on the render icon. It worked perfectly in my browser. The carousel was smooth, and the images loaded beautifully.

But was it actually good code?

I had no idea. That's when I decided to look at the evaluation metrics

What I Thought Was "Good Code"

A working image carousel with:

  • Clean, semantic HTML
  • Smooth CSS transitions
  • Keyboard navigation support
  • ARIA labels for accessibility
  • Error handling for failed images

It looked like something a senior developer would write. But I had questions:

Was it secure? Was it optimized? Would it scale? Were there better ways to structure it?

Without objective evaluation, I had no answers. So, I proceeded to look at the detailed evaluation metrics for this code

What VibeCodeArena's Evaluation Showed

The platform's objective evaluation revealed issues I never would have spotted:

Security Vulnerabilities (The Scary Ones)

No Content Security Policy (CSP): My carousel was wide open to XSS attacks. Anyone could inject malicious scripts through the image URLs or manipulate the DOM. VibeCodeArena flagged this immediately and recommended implementing CSP headers.

Missing Input Validation: The platform pointed out that while the code handles image errors, it doesn't validate or sanitize the image sources. A malicious actor could potentially exploit this.

Hardcoded Configuration: Image URLs and settings were hardcoded directly in the code. The platform recommended using environment variables instead - a best practice I completely overlooked.

SQL Injection Vulnerability Patterns: Even though this carousel doesn't use a database, the platform flagged coding patterns that could lead to SQL injection in similar contexts. This kind of forward-thinking analysis helps prevent copy-paste security disasters.

Performance Problems (The Silent Killers)

DOM Structure Depth (15 levels): VibeCodeArena measured my DOM at 15 levels deep. I had no idea. This creates unnecessary rendering overhead that would get worse as the carousel scales.

Expensive DOM Queries: The JavaScript was repeatedly querying the DOM without caching results. Under load, this would create performance bottlenecks I'd never notice in local testing.

Missing Performance Optimizations: The platform provided a checklist of optimizations I didn't even know existed:

  • No DNS-prefetch hints for external image domains
  • Missing width/height attributes causing layout shift
  • No preload directives for critical resources
  • Missing CSS containment properties
  • No will-change property for animated elements

Each of these seems minor, but together they compound into a poor user experience.

Code Quality Issues (The Technical Debt)

High Nesting Depth (4 levels): My JavaScript had logic nested 4 levels deep. VibeCodeArena flagged this as a maintainability concern and suggested flattening the logic.

Overly Specific CSS Selectors (depth: 9): My CSS had selectors 9 levels deep, making it brittle and hard to refactor. I thought I was being thorough; I was actually creating maintenance nightmares.

Code Duplication (7.9%): The platform detected nearly 8% code duplication across files. That's technical debt accumulating from day one.

Moderate Maintainability Index (67.5): While not terrible, the platform showed there's significant room for improvement in code maintainability.

Missing Best Practices (The Professional Touches)

The platform also flagged missing elements that separate hobby projects from professional code:

  • No 'use strict' directive in JavaScript
  • Missing package.json for dependency management
  • No test files
  • Missing README documentation
  • No .gitignore or version control setup
  • Could use functional array methods for cleaner code
  • Missing CSS animations for enhanced UX

The "Aha" Moment

Here's what hit me: I had no framework for evaluating code quality beyond "does it work?"

The carousel functioned. It was accessible. It had error handling. But I couldn't tell you if it was secure, optimized, or maintainable.

VibeCodeArena gave me that framework. It didn't just point out problems, it taught me what production-ready code looks like.

My New Workflow: The Learning Loop

This is when I discovered the real power of the platform. Here's my process now:

Step 1: Generate Code Using VibeCodeArena

I start with a prompt and let the AI generate the initial solution. This gives me a working baseline.

Step 2: Analyze Across Several Metrics

I can get comprehensive analysis across:

  • Security vulnerabilities
  • Performance/Efficiency issues
  • Performance optimization opportunities
  • Code Quality improvements

This is where I learn. Each issue includes explanation of why it matters and how to fix it.

Step 3: Click "Challenge" and Improve

Here's the game-changer: I click the "Challenge" button and start fixing the issues based on the suggestions. This turns passive reading into active learning.

Do I implement CSP headers correctly? Does flattening the nested logic actually improve readability? What happens when I add dns-prefetch hints?

I can even use AI to help improve my code. For this action, I can use from a list of several available models that don't need to be the same one that generated the code. This helps me to explore which models are good at what kind of tasks.

For my experiment, I decided to work on two suggestions provided by VibeCodeArena by preloading critical CSS/JS resources with <link rel="preload"> for faster rendering in index.html and by adding explicit width and height attributes to images to prevent layout shift in index.html. The code editor gave me change summary before I submitted by code for evaluation.

Step 4: Submit for Evaluation

After making improvements, I submit my code for evaluation. Now I see:

  • What actually improved (and by how much)
  • What new issues I might have introduced
  • Where I still have room to grow

Step 5: Hey, I Can Beat AI

My changes helped improve the performance metric of this simple code from 82% to 83% - Yay! But this was just one small change. I now believe that by acting upon multiple suggestions, I can easily improve the quality of the code that I write versus just relying on prompts.

Each improvement can move me up the leaderboard. I'm not just learning in isolation—I'm seeing how my solutions compare to other developers and AI models.

So, this is the loop: Generate → Analyze → Challenge → Improve → Measure → Repeat.

Every iteration makes me better at both evaluating AI code and writing better prompts.

What This Means for Learning to Code with AI

This experience taught me three critical lessons:

1. Working ≠ Good Code

AI models are incredible at generating code that functions. But "it works" tells you nothing about security, performance, or maintainability.

The gap between "functional" and "production-ready" is where real learning happens. VibeCodeArena makes that gap visible and teachable.

2. Improvement Requires Measurement

I used to iterate on code blindly: "This seems better... I think?"

Now I know exactly what improved. When I flatten nested logic, I see the maintainability index go up. When I add CSP headers, I see security scores improve. When I optimize selectors, I see performance gains.

Measurement transforms vague improvement into concrete progress.

3. Competition Accelerates Learning

The leaderboard changed everything for me. I'm not just trying to write "good enough" code—I'm trying to climb past other developers and even beat the AI models.

This competitive element keeps me pushing to learn one more optimization, fix one more issue, implement one more best practice.

How the Platform Helps Me Become A Better Programmer

VibeCodeArena isn't just an evaluation tool—it's a structured learning environment. Here's what makes it effective:

Immediate Feedback: I see issues the moment I submit code, not weeks later in code review.

Contextual Education: Each issue comes with explanation and guidance. I learn why something matters, not just that it's wrong.

Iterative Improvement: The "Challenge" button transforms evaluation into action. I learn by doing, not just reading.

Measurable Progress: I can track my improvement over time—both in code quality scores and leaderboard position.

Comparative Learning: Seeing how my solutions stack up against others shows me what's possible and motivates me to reach higher.

What I've Learned So Far

Through this iterative process, I've gained practical knowledge I never would have developed just reading documentation:

  • How to implement Content Security Policy correctly
  • Why DOM depth matters for rendering performance
  • What CSS containment does and when to use it
  • How to structure code for better maintainability
  • Which performance optimizations actually make a difference

Each "Challenge" cycle teaches me something new. And because I'm measuring the impact, I know what actually works.

The Bottom Line

AI coding tools are incredible for generating starting points. But they don't produce high quality code and can't teach you what good code looks like or how to improve it.

VibeCodeArena bridges that gap by providing:

✓ Objective analysis that shows you what's actually wrong
✓ Educational feedback that explains why it matters
✓ A "Challenge" system that turns learning into action
✓ Measurable improvement tracking so you know what works
✓ Competitive motivation through leaderboards

My "simple image carousel" taught me an important lesson: The real skill isn't generating code with AI. It's knowing how to evaluate it, improve it, and learn from the process.

The future of AI-assisted development isn't just about prompting better. It's about developing the judgment to make AI-generated code production-ready. That requires structured learning, objective feedback, and iterative improvement. And that's exactly what VibeCodeArena delivers.

Here is a link to the code for the image carousal I used for my learning journey

#AIcoding #WebDevelopment #CodeQuality #VibeCoding #SoftwareEngineering #LearningToCode

Subscribe to The HackerEarth Blog

Get expert tips, hacks, and how-tos from the world of tech recruiting to stay on top of your hiring!

Author
Vineet Khandelwal
Calendar Icon
October 3, 2025
Timer Icon
3 min read
Share

Hire top tech talent with our recruitment platform

Access Free Demo
Related reads

Discover more articles

Gain insights to optimize your developer recruitment process.

What Gen Z Expects From HR Leaders in 2026

What Gen Z Expects From HR Leaders in 2026

Introduction

Gen Z is entering the workforce with a very different perspective on work, leadership, and career growth.

Unlike previous generations, they are not just evaluating salary packages or job titles. They are paying closer attention to workplace culture, flexibility, transparency, learning opportunities, and overall employee experience.

For HR and Talent Acquisition leaders, this shift is changing how organizations attract, engage, and retain talent.

Having entered the workforce during a period of rapid workplace transformation, Gen Z values authenticity over polished corporate messaging and meaningful experiences over traditional corporate structures.

Employer Branding Is Now About Experience

Employer branding today is no longer defined only by career pages or company values.

Gen Z pays attention to how recruiters communicate, how transparent the hiring process feels, and how employees speak about the company publicly.

For Talent Acquisition teams, recruitment is no longer just a hiring function. It has become a reflection of workplace culture itself.

Candidates today value clear communication, transparency, honest conversations around growth, and personalized experiences throughout the hiring journey.

This is also why skill-based hiring and fair evaluation processes are becoming more important for modern organizations.

Gen Z Values Authenticity

One of the biggest shifts HR leaders are noticing is that Gen Z values honesty far more than polished corporate narratives.

They want realistic conversations around career growth, workplace expectations, compensation, and learning opportunities.

Interestingly, they do not expect organizations to be perfect. What they expect is transparency and authenticity.

Younger employees quickly recognize when workplace messaging feels disconnected from reality. Organizations that communicate openly tend to build stronger trust and credibility with Gen Z talent.

Career Growth Looks Different Today

Traditional career growth models were designed around long timelines and annual reviews.

But Gen Z expects growth to feel continuous.

Instead of waiting for yearly discussions, employees want faster feedback, ongoing learning, mentorship opportunities, and clear visibility into growth from the beginning of their journey.

This means career development is no longer just part of appraisal cycles. It is becoming an everyday part of the employee experience.

Organizations investing in learning, internal mobility, and skill development are more likely to keep younger employees engaged.

Flexibility Is About Trust

For Gen Z, flexibility is no longer viewed as a workplace perk.

It is an expectation.

But flexibility goes beyond remote or hybrid work. It also includes autonomy in how employees manage work and productivity.

At its core, flexibility has become a question of trust.

Gen Z values workplaces where managers focus on outcomes instead of constant visibility or monitoring. For HR leaders, this means flexibility cannot exist only in policies. It must also exist in leadership behavior and workplace culture.

Well-Being Is Part of the Work Experience

For Gen Z employees, mental well-being is not a separate HR initiative.

It is part of the everyday employee experience.

They are quick to notice the gap between organizations talking about wellness and employees actually feeling supported.

This means HR teams need to think beyond wellness campaigns and focus more on how work itself is designed and managed.

Because employees do not experience policies. They experience culture every single day.

Final Thoughts

Gen Z is not simply changing workplace expectations. They are challenging organizations to rethink how modern work should actually function.

For HR and Talent Acquisition leaders, this creates an opportunity to build more transparent, flexible, and people-focused workplaces.

The organizations that will attract and retain Gen Z talent successfully are not necessarily the ones with the loudest employer branding or trendiest benefits.

They are the ones building cultures based on trust, authenticity, flexibility, growth, and meaningful employee experiences.

Remote, Hybrid, or Office? What Actually Works and Why

Remote vs Hybrid vs Office: What Actually Works in 2026?

Introduction

Somewhere between “you’re on mute” and badge-swiping back into office buildings, work didn’t just change, it split into choices.

Remote work. Hybrid work. Office-first culture.

Policies were rewritten again and again, but one question still dominates HR and Talent Acquisition conversations:

Are organizations building work models that genuinely improve productivity, employee experience, and retention, or simply reacting to pressure from leadership, candidates, and competitors?

The truth is, there’s no universal answer.

The Myth of the Perfect Work Model

Over the last few years, companies have learned that no single workplace model works for everyone.

Organizations that embraced fully remote work gained access to wider talent pools and improved flexibility. But many also struggled with collaboration gaps, communication fatigue, and weaker cultural connection.

Meanwhile, strict return-to-office policies brought structure and in-person collaboration back, but often at the cost of employee satisfaction and retention.

Hybrid work quickly became the middle ground. Yet in practice, hybrid is often the hardest model to execute well because it demands balance, consistency, and intentional leadership.

The real question isn’t whether remote, hybrid, or office is better.

It’s: What outcome is the organization trying to optimize for?

What HR Leaders Are Seeing

HR teams across industries are noticing a shift in how people work and what employees value.

Remote hiring has dramatically expanded access to talent beyond geographical boundaries. Talent Acquisition teams can now hire specialized talent faster and from more diverse locations.

At the same time, office environments still play an important role in onboarding, mentorship, and early-career learning. Informal conversations, quick collaboration, and day-to-day exposure are still difficult to replicate virtually.

Hybrid models try to combine both advantages, but they also introduce challenges like proximity bias, where employees who spend more time in the office often receive greater visibility and growth opportunities.

This raises an important question for HR leaders:

Are workplace policies rewarding performance or simply physical presence?

What Candidates Actually Want

Candidates today are not just choosing jobs anymore. They’re choosing lifestyles.

For many professionals, remote work represents flexibility, autonomy, and better work-life balance. For others, especially younger professionals, office environments provide structure, mentorship, and stronger human connection.

What’s interesting is that candidate preferences are becoming more nuanced.

Someone may prefer remote work but still choose a hybrid role if it offers stronger career growth. Another candidate may prioritize flexibility over compensation altogether.

For Talent Acquisition teams, this changes everything.

Work models are no longer just operational policies. They’ve become part of the employer value proposition.

Culture Is More Than a Workplace

There’s a common belief that culture only exists inside offices.

But culture isn’t tied to a physical location. It’s shaped through communication, trust, leadership, and shared experiences.

Organizations that succeed with remote work usually focus on clear communication, strong documentation, and outcome-based performance management rather than constant visibility.

Meanwhile, companies succeeding with office-first models are redefining what offices are actually meant for: collaboration, creativity, and connection instead of simply showing up at a desk.

Because if employees are commuting only to spend the day on virtual meetings, the office experience loses its purpose.

What Actually Works?

The organizations getting workplace strategy right are not obsessing over whether remote, hybrid, or office is superior.

Instead, they are focusing on intentionality.

They listen closely to employee behavior and outcomes, not just survey responses. They treat work models as evolving systems instead of fixed policies. Most importantly, they align workplace strategy with business goals and employee needs simultaneously.

That’s where the real difference lies.

Final Thoughts

The future of work isn’t remote, hybrid, or office-first.

It’s intentional, adaptable, and human-centered.

The companies that understand this won’t just attract better talent, they’ll build stronger cultures, healthier teams, and more sustainable workplaces for the future.

5 Habits That Make You Stand Out at Work

5 Habits That Make You Stand Out at Work

Standing out at work is not always about doing more. In many cases, professional success comes down to how you think, communicate, and respond under pressure.

Employees who consistently stand out in the workplace are often the ones who remain calm in difficult situations, communicate with clarity, and bring thoughtful input into conversations. These workplace habits build trust, improve leadership presence, and create long-term career growth opportunities.

The good news is that these are not natural talents reserved for a few professionals. They are habits that can be practiced, improved, and strengthened over time.

For professionals looking to improve workplace communication skills, leadership qualities, and career development, the following habits can make a significant difference.

1. Pause Before You React

One of the most important professional habits is learning how to respond calmly instead of reacting instantly.

When something goes wrong at work, the natural instinct is often to answer immediately. However, fast reactions do not always lead to effective communication or strong decision-making.

Taking a moment to:

  • Understand the situation
  • Gather context
  • Process information carefully
  • Think through your response

can help professionals communicate more clearly and avoid unnecessary confusion.

In high-pressure workplace environments, calm responses often leave a stronger impression than rushed reactions.

Professionals who stay composed during stressful moments are frequently seen as more reliable, emotionally intelligent, and leadership-ready.

2. Give Yourself Time to Think

Not every workplace question requires an instant answer.

Saying:

“Let me think about that.”

can actually make you sound more confident and thoughtful.

This simple communication habit shows that you value clarity and accuracy instead of speaking just to fill silence.

In:

  • Team meetings
  • Leadership discussions
  • Job interviews
  • Client conversations
  • Stakeholder presentations

taking time to think can improve both the quality of your response and the way people perceive your judgment.

Strong professionals are often recognized not for how quickly they respond, but for how thoughtfully they process information and communicate ideas.

This is a critical workplace communication skill that improves professional credibility over time.

3. Get Comfortable With Silence

Silence makes many people uncomfortable.

As a result, professionals often rush to fill every pause during meetings, interviews, or conversations.

But silence can actually improve communication effectiveness.

A short pause gives you time to:

  • Organize your thoughts
  • Deliver stronger responses
  • Improve clarity
  • Communicate with more intention
  • Reduce unnecessary overexplaining

Professionals who are comfortable with silence often appear:

  • More composed
  • More self-assured
  • More confident under pressure
  • Better at executive communication

especially in high-stakes professional situations.

Learning how to stay calm during silence is an underrated but valuable professional development skill.

4. Ask One Thoughtful Question

You do not need to speak the most to stand out at work.

Sometimes, one thoughtful question creates more impact than a long explanation.

Thoughtful questions can:

  • Reveal blind spots
  • Improve team discussions
  • Encourage strategic thinking
  • Demonstrate leadership potential
  • Show strong critical thinking skills

Employees who ask meaningful questions are often viewed as more engaged, analytical, and solution-oriented.

This is one of the fastest ways to leave a memorable impression in workplace conversations and professional meetings.

Strong leaders are not only recognized for giving answers.

They are also recognized for asking the right questions.

5. Keep Your Communication Clear and Concise

One of the most valuable workplace skills is clear and concise communication.

Overexplaining can weaken even strong ideas.

Professionals who stand out in the workplace are often the ones who communicate with structure, simplicity, and clarity.

They focus on:

  • What matters
  • Why it matters
  • What action is needed

without adding unnecessary complexity.

Clear communication improves:

  • Workplace collaboration
  • Leadership presence
  • Team alignment
  • Professional confidence
  • Decision-making conversations

In modern workplaces, communication skills are often just as important as technical expertise.

The ability to explain ideas clearly is a major differentiator for career growth and leadership development.

Why These Workplace Habits Matter

These habits sound simple, but they become difficult to apply when the pressure is real.

In:

  • Job interviews
  • High-pressure meetings
  • Leadership conversations
  • Workplace conflict situations
  • Client presentations

people often rush, overtalk, or respond before fully thinking through the situation.

That is why practice matters.

Professional communication skills improve through repetition, structured feedback, and realistic practice environments.

Employees who consistently practice these habits often become more confident communicators and stronger workplace contributors over time.

Practice Before the Pressure Is Real

If you want to improve how you think and communicate under pressure, you need opportunities to practice those moments before they actually matter.

HackerEarth OnScreen (AI Interviewer) helps professionals build workplace communication skills, interview confidence, and structured thinking through realistic AI-led interview experiences.

The platform helps professionals:

  • Practice answering questions clearly
  • Improve communication under pressure
  • Structure thoughts effectively
  • Build interview confidence
  • Develop executive communication skills
  • Get comfortable with pauses and silence
  • Improve professional speaking habits

It is not only designed for interview preparation.

It also helps professionals strengthen the workplace habits that improve career growth, leadership readiness, and communication confidence.

👉 Try HackerEarth OnScreen and practice the habits that help you stand out when it matters most.

Final Thought

Standing out at work is not about being the loudest person in the room.

It is about being:

  • Thoughtful
  • Clear
  • Calm under pressure
  • Confident in communication
  • Intentional in your responses

Professionals who consistently develop these habits often build stronger workplace relationships, better leadership presence, and long-term career success.

And the more you practice these habits, the more naturally they appear in the moments that shape your professional growth and career opportunities.

Top Products

Explore HackerEarth’s top products for Hiring & Innovation

Discover powerful tools designed to streamline hiring, assess talent efficiently, and run seamless hackathons. Explore HackerEarth’s top products that help businesses innovate and grow.
Frame
Hackathons
Engage global developers through innovation
Arrow
Frame 2
Assessments
AI-driven advanced coding assessments
Arrow
Frame 3
FaceCode
Real-time code editor for effective coding interviews
Arrow
Frame 4
L & D
Tailored learning paths for continuous assessments
Arrow
Get A Free Demo