DrinkIndex II: ChatGPT and the 90's Full-Stack Engineer

This time, ChatGPT created a web app to help me drink faster. [caption id="attachment_5229" align="aligncenter" width="720"] A robot from the 90's that is a full stack developer working on the computer while having a drink in a colorful style, DALLE.[/caption]

This is part two of how ChatGPT gets me drunk. Read the first part here! Here is a git repository if you find it easier to read code over words.

Previously on DrinkIndex, ChatGPT acted as my trusted data engineer: it scraped the web for cocktail recipes, set up async message streams, analyzed the data to extract cocktail ingredients, and stored it in the database. While it accelerated my drinking, it wasn't enough — Making an SQL query every time I wanted a drink did not spark joy. So I asked ChatGPT to build a web app that will do that for me.

I already had the data indexed, so the store part was sorted. Next, I had to ask ChatGPT to create an API to expose the ingredients list, search cocktails based on ingredients, and create a UI that uses this API. Let's get codin

Building an API

After reminding it of the database structure, I asked ChatGTP to create an API. Generating the two endpoints in one go was too much for it, so I started with a single one:

And ChatGPT obliged:

This was impressive, but still a pretty straightforward API. Next, I asked it to create an API to search cocktails based on selected ingredients and to return the cocktails ordered by the number of ingredients missing:

This one is more challenging as it requires joining tables and handling edge cases. This was its initial output:

While impressive looking, it did have some problems — "request" is not defined, it forgot some syntax sugar of SQLAlchemy, and it didn't account for edge cases where a cocktail didn't appear in "counts". Most importantly, there was a logical error — it counted the available ingredients for each cocktail instead of the missing ones. However, it quickly fixed these once I brought them to its attention. Here is the result after a few iterations of asking it for corrections:

[caption id="attachment_5233" align="aligncenter" width="720"] It even adjusted the documentation.[/caption]

Our API was ready. Can ChatGPT generate a modern React UI for it as well?

Creating the Web App

The app I wanted to create consisted of two screens: First, the user can choose available ingredients from the ingredients list. Once done, the app will render a list of cocktails sorted by how many ingredients are missing. The first thing I asked ChatGPT to do is to show a list of ingredients based on the ingredients API above:

[caption id="attachment_2421" align="aligncenter" width="720"] This may be the most simple prompt I used throughout this exercise. The context skills of ChatGPT truly shine here.[/caption]

[caption id="attachment_2420" align="aligncenter" width="720"] ChatGPT even knew to use port 5000, the default port for a Flask local app.[/caption]

Next, I asked it to add a checkbox next to each ingredient, so the user can mark that it's available:

Next, I tried to use the following prompt to create the rest of the app:

can you add a button at the bottom of the screen that say "search".
When the user clicks the button the user searches cocktails with the cocktails
apis using the ingredients the user selected, and the display changes.
instead of displaying the ingredients list, the screen shows the cocktail
results ordered correctly by the order the api provided

As developers often do, ChatGPT found these instructions too vague and complex. It kept timing out or spitting wrong results. I realized I had to break them into smaller, more manageable tasks for it to handle them. I started by having it create another component, the cocktails table:

[caption id="attachment_2417" align="aligncenter" width="720"] Skipping the explanations gives you more computing power to generate code before the request is out.[/caption]

Next, I asked ChatGPT to create a component called DrinkIndex to wrap the logic of rendering the ingredients list and the cocktails table once the user searched. I forgot to take a screenshot of the prompt, but here is the initial result after asking it to store the ingredients in the local storage so they won't disappear on refresh: