Published on 00/00/0000
Last updated on 00/00/0000
Published on 00/00/0000
Last updated on 00/00/0000
Share
INSIGHTS
9 min read
Published on 12/20/2022
Last updated on 06/18/2024
DrinkIndex II: ChatGPT and the 90's Full-Stack Engineer
Share
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 providedAs 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]
[caption id="attachment_5756" align="aligncenter" width="900"]
It leveraged react-bootstrap to build the table. Had I preselected a UI component library, it would have been able to integrate my choice as well.[/caption]
It leveraged react-bootstrap to build the table. Had I preselected a UI component library, it would have been able to integrate my choice as well.[/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:
[caption id="attachment_4520" align="aligncenter" width="702"]
This also required changing the Ingredients component to get the selectedIngredients and provide an onChange function, which ChatGPT did as instructed.[/caption]
It even ensured I installed react-bootstrap, a dependency specific to my project.[/caption]
[caption id="attachment_2405" align="aligncenter" width="720"]
Complex SQL queries always give me a headache. ChatGPT got it down in 30 seconds.[/caption]
I'm not sure if the explanation is accurate or if this is the optimal code, but it does work 🤷.
Next, I wanted the app to have the feel of a modern web app. So I asked ChatGPT to sprinkle some CSS on top of it:
This also required changing the Ingredients component to get the selectedIngredients and provide an onChange function, which ChatGPT did as instructed.[/caption]
Despite looking good at first glance, this code has some issues: the "setCocktails" function is not defined, and the loading from local storage doesn't work since it happens in a hook and not when the state is initialized. Like with the cocktails API, ChatGPT was more than happy to fix those errors when I pointed them out to it:
At this point, the code was ready. Next, I had to wrap it in a React app and start it locally.
Compiling
I asked ChatGPT to walk me through running this code: [caption id="attachment_2412" align="aligncenter" width="685"] It even ensured I installed react-bootstrap, a dependency specific to my project.[/caption]
As always, I had these annoying CORS issues. Hi ChatGPT, can I copy-paste the error message for you to fix my life?
And finally, I had the app I wished for:
Final Touches
While functional, this app was missing some zest ✨. There were two issues I wanted to tackle. First, I liked the cocktail table to contain the required and available ingredients for each cocktail. I asked ChatGPT to start by modifying the API:
Complex SQL queries always give me a headache. ChatGPT got it down in 30 seconds.[/caption]
Aside from the formatting, this code is well crafted. However, there is a small technical detail that it missed: since missing_count and total_count are attached in the raw form in the with_entities statement, they are only sometimes there. ChatGPT worked its way around that as well:
"Looks good!" I thought to myself. Boy, was I wrong:
This was less "futuristic and colorful" and more "a web developer meets the internet for the first time in the 90s". While it's good enough for me, it's safe to say that designers' jobs are safe. For now.
Conclusion
Thanks to ChatGPT, I can now find the right drink to make with minimal effort, aside from having to look at that hideous color scheme. However, this task was more challenging than the previous one and required more of my guidance. I had to design the code for it and let it build the most basic building blocks. I also had to explicitly point out some of the errors for it to find them — pairing with it may have been less effective had I not been familiar with Flask & React. During these back and forths, I weirdly found myself discussing with ChatGPT in a very human and polite way, which was very approachable.
On our next adventure, I will make a DevOps engineer out of it as I try to deploy DrinkIndex to the cloud — let's see if it's up for the task!
Thanks to Nimrod Shlagman
Subscribe to
the Shift!
Get emerging insights on innovative technology straight to your inbox.
