Building French Learning Apps with Windsurf - An AI Code Editor

The setup

I need to learn French, but in truth, I only need to improve my speaking and writing—I have good reading and listening scores.

I’ve been trying a few apps and found one that improved my skills: The Great Translation Game.

You are given a text and have to translate it. If you do it right you get some points.

I signed up to play and liked the game but did not like that I had to upload my own texts and had a limit of words per day.

I wanted to upload texts created in ChatGPT so that I didn’t have to translate it manually and I also wanted to have a variable limit of words.

My solution

I wanted to upload texts via JSON as I find that ChatGPT excels at creating them.

I made my first “not a line of code” app yesterday. My take on the Great Translation Game.

The short story is I need to learn how to write in French in 60 days or less. I like the TGTG, except I have to provide the original text and the translation.
Instead of inputting one translation at a time, I wanted to be able to upload a JSON with multiple paragraphs.

I used Codeium’s windsurf because I am used to their VsCode plugin.

In cascade, I wrote what I wanted to do:

I wanted to use Astro because I know how to use it well. This way I could understand all the code generated without having to guess.

As it was my first time using Windsurf I didn’t know how much detail I needed.

The first version of the app was a total miss visually. So I decided to use shadcn UI to make everything look good.

As I said, I wanted to use a JSON file, but Windsurf had other ideas because I did not explain them in detail. So I had to make some adjustments.

Supposedly, Windsurf can run terminal commands but I kept finding this error “I see that npm is not available in the PATH.”

I have node and npm. So not sure what that was about. Anyway I ran install and dev from my terminal.

Once I understood how the app worked, it was easier to make small, incremental changes. For example, I told Windsurf how to style and animate my buttons.

I found other minor changes were easier to make if I went straight to the code instead of reaching the AI chat.

Then, I made a stupid mistake; I don’t know what I thought, but I trashed everything when I was close to completion.

Basically, I reverted everything, but I thought I was reverting a step and instead reverted EVERYTHING

So, I started again using git this time. I don’t know why I thought git was unnecessary and the code editor would know how to revert one or two steps.

At some point today, I plan to deploy.

All in all, mistakes and all, it took me less than 2 hours to build the game. You can visit the game here