JavaScript Challenger - AI Studio DEV Edu Track

#deved #learngoogleaistudio #ai #gemini

Education Track: Build Apps with Google AI Studio

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

Simple single page application to train your JavaScript powers with help of Gemini as challenge creator and solution validator & tutor.

Managed to lose original starting prompt... was something like this:

Please create JavaScript Challenger, an app where user can code JS challenges and validate them. Two panels with sliding handler:

Left panel with tabs:

Generate - Form to select category and difficulty level. Button to call Gemini to provide new challenge with chosen parameters.

Challenge - Display challenge task - title, description, examples, constraints.

Test Runs - Challenge goes with test data collection: input and expected output, solution can be tested against them. Here to display test run outcomes.

Validate - Display response from Gemini after submitted solution - grade, summary, strengths and weaknesses, and areas for improvement.

Right panel with Monaco editor and buttons to trigger test runs and submit solution.

Demo

JavaScript Challenger @ AI Studio

My Experience

As I usually don't work with React, good moment to step away from code and focus on delivered. The first prompt went pretty fine - got working app, generate and validate all in place working for the first moment.

Out of initially skipped or misfunctional:

Tests were without output, so only possible to get all fails with such setup.
As Monaco editor was initially requested (that is fancy one integrated at VS Code, for example), not delivered but some simpler was there instead - still working, only unfancy. ... Monaco added with some later step, now all good!

Troubles with test runs

After initial fail with test run, got better result with interventions via chat.

But... that was not the end - it worked - sometimes. Tries counted to 'what is going on, like - forever?'. That real funny moment when agent is full of confidence and after each iteration you get same or another issue...

What was the problem? Cannot parse function name from starter code provided with challenge, as provider response can be creative... that name is sometimes declared as function, sometimes as variable or constant, with shape or classic or arrow function, also can have JSDocs or not. So:

- Why don't you ask provider to tell you function name instead or your try to parse it from starter code?
- Aaaa...

I feel like agents still try to do brute force when something does not work from the scratch. Else, I would not have to think - so maybe not bad :-)