Developing Frontends with ChatGPT

Method

I will develop components for my website with ChatGPT and you can be my guest. This blog post explains the Pro’s and Con’s of doing frontend development with ChatGPT.

The Task

First of all let’s give the context and start without ChatGPT. I want to create a Grid for a web application (or some areas of it). This grid should allow to place elements by dragging and dropping them on it with the mouse. We are not covering tablets or mobile devices this time. The first feature can be described as follows and it will be worked on by me.

User Story - Grid Container (Leon)

Description

As a web site developer I want to have a grid component with helping lines to arrange subelement elements in a flexible but predictable way so that I do not have to write the CSS from skratch all the time.

Acceptance Criteria

• Written in Svelte
• Has a prop to toggle on and off helper lines and background
• Has a prop to set number of cols and rows, defaults to 5
• Can be easily embedded into a web page or a blog post as a Svelte component
• Has a prop to set width, by default it is taking 100% of the parent element
• The grid is responsive by default and adjusts to the screen size
• Has a prop to set height of grid cells, defaults to 50px
• Optional snapping functionality for grid sub-elements for easier alignment

Implementation

The implementation was straight forward. It took me around 10 minutes. The main challenge was to make the grid display some helpers dynamically which required me to write a JavaScript loop inside of the component. I needed to look up how to do this on StackOverflow.

<GridContainer helpers>
</GridContainer>

The next user story is formulated by ChatGPT. I copied and pasted the first user story and asked him to go on with the Grid Element Component.

User Story - Grid Element Placement (ChatGPT)

Description:

As a web developer, I want to be able to place elements on the grid and have them snap to the nearest grid line, so I can arrange sub-elements precisely without manually aligning them.

Acceptance Criteria:

• The grid element can be dragged and dropped within the grid.
• The element snaps to the nearest grid lines when moved.
• Snapping sensitivity can be controlled via a prop (e.g., grid snapping can be enabled or disabled, or the snapping range can be adjusted).
• Has a prop to specify the element’s starting position (e.g., column and row index).
• The element resizes to fit within grid cells if necessary (with an optional prop to control resizing behavior).
• Supports keyboard navigation for moving and snapping elements (optional for accessibility).
• Works responsively across screen sizes and various parent containers.
• Written in Svelte and integrates with the grid container component.

My feedback - WOW!

The user story is really good and fits very much my style.

Implementation - First Version with Issues

I will just show how in general the component is placed. If you want to see the code, I must disappoint you. I won’t publish it here as it would be too much content.

<GridContainerv1 cols={5} rows={5} cellheight={50} helpers>
    <GridElement_v1 colStart={2} rowStart={1} colSpan={2} rowSpan={2} snap={true}>
        <div>Draggable Element</div>
    </GridElement_v1>
</GridContainerv1>

When you drag and drop the Blue “Draggable Element” you will first notice that the first shot of ChatGPTs implementation is at least working. To my surprise the implementation of the snapping functionality was done really good. What I am wondering: It seems like the snapping function does not need to be activated with the snap prop. The prop just got ignored in the code.

The whole user story and code generation was based on the previously implemented Grid Container. I gave ChatGPT access to my GridContainer Code via copy and paste.

Some glitches: You will notice that you are able to drag the element to an area outside of the Grid. We now need to find out what is causing this.

Let’s explore more setups - changing size brings more trouble

<GridContainerv1 cols={10} rows={5} cellheight={50} helpers>
    <GridElement_v1 colStart={2} rowStart={1} colSpan={1} rowSpan={1} snap={true}>
        <div>Draggable Element</div>
    </GridElement_v1>
</GridContainerv1>

I have not changed any code, just the parameters. Now it seems like the solution is not usable at all anymore. You can try to move the blue cell and propably see that it does not behave in a expected way anymore.

So obviously size matters.

If you drag and drop the mouse very carefully you might notice some differences. Try to grab in the left corner and drag left. Now try to grab in the right corner and drag left aswell. The one movement works, the other doesn’t.

Let’s explain ChatGPT what is the problem

Dear GPT, the code you have provided runs and in your demo case…

<GridContainerv1 cols={5} rows={5} cellheight={50} helpers>
    <GridElement_v1 colStart={2} rowStart={1} colSpan={2} rowSpan={2} snap={true}>
        <div>Draggable Element</div>
    </GridElement_v1>
</GridContainerv1>

…the user is able to drag the element intuitively. However there are some issues.

First, in your example case the element can be dragged so far out of the grid container that it seems to snap in a area that is offsite. That means if we have a grid of 5 x 5 areas it seems to be possible to drag the element into a row 6 or column 6. The grid in some cases even changes its dimensions.

Second, when adjusting your code to

<GridContainerv1 cols={10} rows={5} cellheight={50} helpers>
    <GridElement_v1 colStart={2} rowStart={1} colSpan={1} rowSpan={1} snap={true}>
        <div>Draggable Element</div>
    </GridElement_v1>
</GridContainerv1>

the element is not easy to be dragged anymore.

Please analyze the issues. Please explain what causes them and what you suggest to solve…

Some minutes (I’m in the train when writing this) later I have gotten some new code snippets from ChatGPT and tada…

we got something that fixed the first issue with elements leaving the grid. But moving smaller elements still does not work consistently.

What helps is to be much more precise in describing the issues:

“Lets say I have an element that is 50px x 50px and this is also the grid size. Assuming I am grabbing it when having my mouse in the coordinate 10px, 10px and dragging to the left. Would you agree that with the code we talked about the element will not be able to move to the left?”

I am also checking here if ChatGPT is able to follow by asking a closed question that I want him to answer more or less with yes.

Iteration N

After a lot of trying different prompts with a lot of checking what now actually was proposed by ChatGPT I went into “thinking mode” and tweaked the code here and there myself. Very tricky was to cover edge cases. E.g. when working with a flexible cellwidth you would not use pixels (px) as unit. You would use fractions (1fr) in adjusting the size of grid cells. Quite often code generated by ChatGPT is expecting pixels everywhere.

So in the end I had to really understand the logic of css, and also needed to fix some issues from ChatGPT. What’s more: In a lot of cases code generated by ChatGPT is framework agnostic. That is good if you are a developer who does not know Svelte so much, but a lot of tweaks that Svelte brings with it were just not considered by ChatGPT.

Finally to get to this, I still spent some time refactoring and understanding someone elses code logic.

Anyway I am very happy with the workflow.

Recommendations

• Use Github Copilot (in VSCode or vim) or similar tools like Cursor to refactor your code with the help of AI.
• Using ChatGPT brings a lot of copy and paste. Big issue: Some code fragments that ChatGPT wrote are sometimes getting forgotten in later changes. So better be careful when replacing a whole file with a revised version of ChatGPT. What looks like ChatGPT added a feature might have removed something else.

Extra - The latest version