How I Use ChatGPT to Bootstrap Components for Front-End Apps: A Tale of Caffeine, Code, and AI Companionship

Note: this article assumes that you have access to GPT-4, which at the time of publishing requires a ChatGPT subscription.

It's the year 2023. Self-driving cars are... well, still not quite there yet. But one thing's for sure: AI has arrived, and it's making itself comfortable. Some say it's here to take our jobs, others say it's the end of the world as we know it. But I say, it's high time we put it to work! So take a seat, grab your energy drink of choice, and let's dive into how OpenAI 's ChatGPT is about to make your coding life a whole lot easier.

The Caffeine Chronicles: A Tale of Forgotten Code

/imagine: you're five hours into a marathon coding session. You've had so many energy drinks that you swear you can see the flapping of a fly's wings... from yesterday. You're in the zone and life is good.

All of a sudden, you panic. Yes, it could be the insane amounts of caffeine and sugar you've been ingesting, but that doesn't negate the fact that you completely forgot about the counter component you were supposed to make. Sh*t.

Before you spiral into a dark hole of anxiety and palpitations, shaky keyboard warrior, you can hopefully find some comfort in the fact that we can make ChatGPT do some of the initial work for us.

The Art of the Prompt: Or How I Learned to Stop Worrying and Love the Bot

Before we get into how to make the prompt, let's talk about how to make a prompt. When we make a prompt, it's important to understand that the more information you give ChatGPT, the better the response we'll get back.

Sure, we could give ChatGPT the following prompt:

Make me a counter component.        

...if you like living loose and fast. The problem here is that you have no idea what you'll be getting back. Sure, you know that you'll get a React component back - because, you know, React - but you're leaving ChatGPT all sorts of wiggle room to interpret your (??) instructions.

import React, { useState } from 'react'

function Counter() {
? const [count, setCount] = useState(0);

? return (
? ? <div>
? ? ? <p>You clicked {count} times</p>
? ? ? <button onClick={() => setCount(count + 1)}>
? ? ? ? Click me
? ? ? </button>
? ? </div>
? );
}

export default Counter;        

The problem: this won't work for you. You see, your React parents haven't seen you ever since you've been hanging out with Evan You and those Vue hooligans down the road. They don't understand why would have ever left and they just want you to come home... ??

Now that I've tricked you into thinking that you're a confused teenager who's going through some things, man, let's retool this prompt to make the prompt work for us. First, let's take a look at our imaginary requirements:

1. We need it to be a Vue 3 component
2. We need it to use Typescript for typing
3. We need it to use TailwindCSS for styling
4. We would like it to be well documented

With these in mind, let's take a look at the following prompt:

You are a software engineer with ten years of experience.

Let's create a counter component that increments and decrements a 
number. Make sure we are using Vue 3, Tailwind, 
and the script setup lang=ts format.

Document the code so a mid-level Vue developer will understand
what's going on.        

Sounds great, but what are we actually doing here?

1. We're creating a persona - personas are useful to provide ChatGPT with awareness of who it's supposed to be acting as. It seems pretty silly to include this all of the time, and to be honest it's not essential, but I've found that you can narrow down your expected results by specifying your persona.
2. We're defining our technical requirements - this is similar to what you'd find in a user journey. In fact, I've gotten great results by copying Jira story requirements into ChatGPT.
3. We're defining the documentation requirements - I do this because ChatGPT will either document the ever-living heck out of your components so that your great aunt Clarice can understand what's going on, or it'll document absolutely nothing and assume that you're Alan Turing.

Okay, now that we've crafted our prompt, let's see what we get...

Drumroll, please...

Good news, everyone! We've got a counter component! ??

(music notes should be @ - it seems to be a bug with LinkedIn snippets)

<template
? <div class="flex items-center justify-center h-screen">
? ? <div class="bg-white p-6 rounded-lg shadow-lg">
? ? ? <h2 class="text-2xl mb-4">Counter: {{ count }}</h2>
? ? ? <div class="flex space-x-4">
? ? ? ? <button @click="increment" class="px-4 py-2 bg-blue-500 text-white rounded">Increment</button>
? ? ? ? <button @click="decrement" class="px-4 py-2 bg-red-500 text-white rounded">Decrement</button>
? ? ? </div>
? ? </div>
? </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// We use 'ref' to create a reactive reference to a value.
// This will allow Vue to track changes to 'count' and update the DOM automatically when it changes.
let count = ref(0);

// The 'increment' function increases the value of 'count' by 1.
const increment = () => {
? count.value++;
};

// The 'decrement' function decreases the value of 'count' by 1.
const decrement = () => {
? // We add a condition to ensure that 'count' does not go below 0.
? if (count.value > 0) {
? ? count.value--;
? }
};
</script>

<style scoped>
/* Scoped CSS. This will only apply to elements in this component. */
</style>        

Let's take a look at the code. It's a simple component that displays a counter on the screen. The counter starts at zero and can be incremented or decremented by clicking the respective buttons. The 'increment' and 'decrement' functions are defined in the script section, and they update the value of 'count' when the buttons are clicked.

There are a few things here that we can start to nitpick, though. One, the documentation that they've added is laughably in the weeds. I think it's pretty safe to assume that any Vue developer probably understands that using `ref` will make a reactive reference. We also have an empty `style` block that may or may not be necessary. Finally, even though we're set up to use Typescript we aren't actually using any of its features, we are in a good place to use it moving forward.

Having said all that, I'm pretty happy with the result! We've got a working Vue 3 counter component that works, is styled using TailwindCSS, and is (admittedly a little too) well documented.

ChatGPT: The Coding Companion You Didn't Know You Were Missing, Now With Zero Caffeine!

In conclusion, while AI is indeed revolutionizing many fields, including programming, it's not about replacement. It's about augmentation. Tools like ChatGPT can help us become more efficient, allowing us to focus on the more complex and creative aspects of our work. Let's embrace this change, crack open a new energy drink or two, and let's use AI to automate the stuff we don't want to do!

A note from the author:

This was my first article - I hope you enjoyed it! Feel free to provide any feedback that you might have in the comments below, and don't hesitate to reach out to me and connect!