Outshift Logo

INSIGHTS

9 min read

Blog thumbnail
CN

by Gal Bashan

Published on 12/20/2022
Last updated on 02/05/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"]ChatGPT AI 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:

ChatGTP to create an API

And ChatGPT obliged:

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:

ChatGPT create an API

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

ChatGPT create an API 2

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"]ChatGPT create an API 3 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"]ChatGPT create an API 4 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 create an API_5 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:

ChatGPT create an API_6
ChatGPT create an API_7

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"]ChatGPT create an API_8 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"]ChatGPT create an API_9 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"]ChatGPT create an API_10 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:

ChatGPT create an API_11
ChatGPT create an API_12
ChatGPT create an API_13

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"]ChatGPT running code It even ensured I installed react-bootstrap, a dependency specific to my project.[/caption]
installed react-bootstrap

As always, I had these annoying CORS issues. Hi ChatGPT, can I copy-paste the error message for you to fix my life?

ChatGPT
ChatGPT_copy-paste

And finally, I had the app I wished for:ChatGPT_Create app

ChatGPT_Create app_2

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:

ChatGPT_Create app_3
[caption id="attachment_2405" align="aligncenter" width="720"]ChatGPT_Create app_4 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:

ChatGPT_Create app_5
ChatGPT_Create api_6
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:
ChatGPT_Create api_7
ChatGPT_Create api_8

"Looks good!" I thought to myself. Boy, was I wrong:

ChatGPT_Create api_9
ChatGPT_Create api_10

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!

ChatGPT_Create api_11

Thanks to Nimrod Shlagman

Subscribe card background
Subscribe
Subscribe to
the Shift!

Get emerging insights
on emerging technology straight to your inbox.

Unlocking Multi-Cloud Security: Panoptica's Graph-Based Approach

Discover why security teams rely on Panoptica's graph-based technology to navigate and prioritize risks across multi-cloud landscapes, enhancing accuracy and resilience in safeguarding diverse ecosystems.

thumbnail
I
Subscribe
Subscribe
 to
the Shift
!
Get
emerging insights
on emerging technology straight to your inbox.

The Shift keeps you at the forefront of cloud native modern applications, application security, generative AI, quantum computing, and other groundbreaking innovations that are shaping the future of technology.

Outshift Background