Hey Bard, write a responsive Javascript Search Engine app for me..

6 min readNov 20, 2023

I suck at Javascript. 😒 It’s time to admit it. 😅 Let’s see how Bard helped me overcome this limitation… and create this app!

I tried for years to cope and survive in a world which seems to be unable to exist without Javascript, and last weekend I succumbed. Time to ask your favorite JS developer Chris to point you at some good documentation and start reading about this weird language.

Promises, promises… unless? Wait, what if an LLM could code the app for me? Maybe I’m not good to start the project myself, but what if Bard can do it for me, I should be able to tweak the code myself.

TL;DR If you don’t want to read my Italian drama, jump to the code (or see the result on Cloud Run).

Two days ago, I was babysitting my kids; playing with my mobile phone while they were playing with Lego…

Little Seby in the Lego room in Google Zurich

.. and I started asking Bard a question. But wait, “how do I make sure the question remains available when I go back home to my big computer?” I was quite surprised by the answer.

The Coding concept

What’s my idea? Say you have a gazillion articles / assets and want to be fast at searching on them. But you can’t accept a 1–2 seconds latency from a typical server-side website search.

Flash is searching through all my docs ina static, local *JSON*! Barry likes to win easy :)

I want a search bar where I can start typing stuff and the choice starts to diminish. Then I want to have a number of cards with the results (from a static JSON — I’ll make it dynamic in a next episode!). I also want to have some rudimental clicking to narrow down the choice, say with a Boolean “is this a technical article).

Write a good prompt

My kids are delving into plenty of Legos, so I have plenty of time to try a verbose and well planned prompt. After all, I want it to write an app for me! Let’s not save time and details.

Prompt 1: “I would like to build a small and responsive search engine. The DB Is small and static so I don’t need anything complicated. I just want to have a frontend JavaScript where you start typing a word and it searches for all the elements matching this word in title or description. The only important thing to me is responsiveness so every time you type a letter it starts selecting just things matching it, so you want to write say “pistachio”, the selection should start kicking in already with ‘p’, ‘pi’, ‘pis’, and so on. Can you help me write the code?”

I’m so ignorant on JS that I’m not even sure this is something you can do fully on client-side ( index.html+ script.js) or if you need some server-side effort (add node.jsto the mix) to provide the JSON (although on the server-side I have 20-year expertise — this part I can do without help).

Bard reply might surprise you..

Now, Bard started with a confident “Sure, here’s the JavaScript code for a small and responsive search engine that works with a static database:” but I don’t trust what I see. Plus, I don’t have a computer with me, so I can’t try the code. I asked him to do two things that Google is really good at doing:

export in email (cheap / persistent)
export to GDoc (richer / can edit)

Look:

**Bard** exports to **GDocs** and **GMail** in case you want to elaborate on your brainstorming idea.

When I was home I had plenty to choose from: my 📬 GMail inbox, my 📃 Google Docs link. what I didn’t know is that the conversation is saved conveniently in a top left tab, and you can pin it — until you’re done with your project.

I paste the JS / HTML code and… it works FROM SCRATCH! Teh first tentative works! Wow I’m impressed. I start putting the code into github for posterity and for making potentially breaking changes.

Let’s add complexity. Add a Boolean and multi-parameter search!

Prompt2. “Wow! Say I want to do something a bit more complex for example selecting a Boolean (isTechnical=true/false) which is in the frontend as checkbox and in the JSON, and I want to sort the result by some kind of rating? Can you help me add those two functionalities both to html and to JavaScript?”

Result:

Note that Bard gives me the index.html code, the script.jscode , and also a pre-baked JSON which responds to my requirements (a isTechnical boolean and a float rating).

Add little nits: CSS and Cards

Prompt 3. Wow this is amazing! Final thing, can you share a little css snippet to make this look nice and professional? I’m bad at CSS.

This made the final visualization a bit better (not much).

Prompt 4. Fantastic! Last thing. I would like to visualize the search result as nicely formatted cards, think of three rectangles per row, with title description and maybe a small image turned into a square with rounded corners. Can you help me with html and CSS?

And this is the first time Bard makes a mistake. He gives me a HTML code which seems like Angular (ngFor ):

This is a mistake: `ngFor` only exists in Angular framework (I presume?)

Result

The app is currently served by cloud run here: https://js-simple-search-bsl7ylv4hq-ew.a.run.app/

This is the final result in GIF format:

The functionalities it demonstrates are:

responsive sub-JSON search function (every letter triggers a search on Title or Description)
boolean selection (isTechnical or not)
Sort by rating (number) or by Title (string)

Conclusions

As a person who can’t even code a strlen() in Javascript, I was able to create a simple / dumb — yet customized — website within an hour on a Saturday afternoon (when my wife was babysitting).

bard.google.com gave me good code from the beginning, and responded correctly to the next 2 questions. The first error was at the 4th prompt (!). Also, on the negatives, the CSS for cards was pretty ugly so I had to fix it myself (luckily I speak some rudimental Boostrap).

I found Bard can be a pretty good companion if you have time to kill away from keyboard, and you want to go with the flow in some brainstorming phase, ready to copy the content when you’re back to your workstation.