I asked ChatGPT to build a To-Do app — Have we finally met our replacement?

By Cronos Editorial Staff on Dec 17, 2022
Est. Reading: 6 minutes
Contents

ChatGPT - Are we about to be replaced by an AI, again?

We saw the release of GitHub Copilot in October of 2021 and the whole dev community went crazy.

Some were claiming that we would soon be left out of a job, and others, like me, thought that while the tool was interesting, it was really far from a replacement. It could provide better autocomplete, yes, but it was not capable of creating an entire app for you.

So we were safe.

Or so we thought.

A few weeks ago we saw the release of Chat GPT and the entire dev community went crazy again. But are they right this time around?

I tried the AI and I asked it to build the web dev equivalent of a “Hello world”: a To-Do app.

Let’s see how it did.

The request

Here are my prompts for the chatbot and the answers I got:

can you give me the code to create a to-do app that allows me to edit the items and store them in a database? Please use React for the front-end and next js for the back-end

That was my initial prompt, and the key asks are bolded there:

  • A to-do app
  • Ability to edit items
  • Store data in a database
  • Use React and Next

Now, here is what I got:

import React, { useState } from 'react'
import { useRouter } from 'next/router'

function ToDoApp() {
  const [items, setItems] = useState([]) // useState to store the to-do items
  const router = useRouter()

  // handle form submission
  const handleSubmit = (event) => {
    event.preventDefault()
    const form = event.target
    const input = form.querySelector('input')

    // add the new to-do item to the array of items
    setItems([...items, input.value])
    input.value = ''
  }

  // handle item removal
  const handleRemove = (index) => {
    // create a new array without the item at the specified index
    const newItems = items.filter((item, i) => i !== index)
    setItems(newItems)
  }

  return (
    <div>
      <h1>To-Do App</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Add a new item" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button type="button" onClick={() => handleRemove(index)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default ToDoApp

Ok, that wasn’t EXACTLY what I asked for.

Yes, I got a to-do app, using React and Next, BUT, it’s not using a database, in fact, it’s using in-memory storage. And it’s not letting me edit the items. So let’s ask again.

can you modify that code to add support for a cloud database?

OK, now I just referenced “that code”, and added “cloud database” support. I was specifically trying to be vague, because a human would easily understand this, but the AI needs to keep a reference to the current conversation and remember what we’re talking about.

And lo and behold, the code I asked for:

import React, { useState } from 'react'
import { useRouter } from 'next/router'
import firebase from 'firebase/app'
import 'firebase/database'

function ToDoApp() {
  const [items, setItems] = useState([]) // useState to store the to-do items
  const router = useRouter()

  // initialize Firebase
  if (!firebase.apps.length) {
    firebase.initializeApp({
      apiKey: '<YOUR_API_KEY>',
      databaseURL: '<YOUR_DATABASE_URL>'
    })
  }

  // get a reference to the Firebase database
  const database = firebase.database()
  const itemsRef = database.ref('items')

  // handle form submission
  const handleSubmit = (event) => {
    event.preventDefault()
    const form = event.target
    const input = form.querySelector('input')

    // add the new to-do item to the Firebase database
    itemsRef.push({
      text: input.value
    })
    input.value = ''
  }

  // handle item removal
  const handleRemove = (itemId) => {
    // remove the item from the Firebase database
    itemsRef.child(itemId).remove()
  }

  // useEffect to fetch the to-do items from the Firebase database
  useEffect(() => {
    itemsRef.on('value', (snapshot) => {
      const items = snapshot.val()
      const newItems = []
      for (let item in items) {
        newItems.push({
          id: item,
          text: items[item].text
        })
      }
      setItems(newItems)
    })
  }, [])

  return (
    <div>
      <h1>To-Do App</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Add a new item" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.text}
            <button type="button" onClick={() => handleRemove(item.id)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default ToDoApp

It picked Firebase for me, and it even wrote the placeholders for me to enter my credentials.

Or did it?

Does this code work?

So far, I’m pretty impressed with the results, I was not really expecting this level of detail.

But when it came to testing the code, I found a couple of issues that clearly highlight the shortcomings of this bot.

Issue #1: it was missing an import. Silly mistake, I know, we humans make them all the time, but the code was missing the import of the useEffect hook.

Issue #2: it never specified the version of the firebase npm package to use. Maybe that was my fault, but a simple npm install firebase yielded a version that was not compatible with the code. So I asked the bot: what version of the firebase npm package should I use for that example?

And I got an interesting answer:

1 1TGeGPIL5NMHSWbk4zF0eg

I mean, kudos to the bot, it was able to understand the context of my question, and provided a valid (almost) answer. The code was, indeed, compatible with that version of firebase, so I was able to try it.

But the current version of Firebase is 9, not 7, that’s a problem.

With those problems solved, I was able to test the app and get it to work.

1 dLavktQCvV9f80Q8sm8t0w
Oh, yes, I’m still missing the Edit button. Which is something I asked for, because not many tutorials cover that part of the app. They usually stick to adding and removing items.

So what’s wrong here?

The shortcomings of Chat GPT

Don’t get me wrong, Chat GPT is freaking awesome.

Coupled with Dalle-2 and MidJourney, this is the most interesting and advanced piece of AI software I’ve ever tried.

But it’s not about to replace developers.

Why? Because of the two problems I highlighted above. If you haven’t picked up on it yet, the bot is simply spitting out content from articles used to train it.

So instead of creating the code for itself, which should be flawless, it’s simply showing me what other authors have written. Not only that, but it’s also showing me outdated content with errors.

That’s because it’s not capable of validating whether or not it’s indeed giving me what I asked for. Instead, it’s guessing (with a huge success rate) what I’m looking for, and giving me something that looks like it.

In other words, at its current state, Chat GPT will only be useful as long as the content used to train it is verified, and kept updated by someone else.

What are the implications for us developers with Chat GPT around?

We’re simply looking at yet another tool that might come in handy for our daily work.

How?

Right now when you have a problem you input the issue on Google and 8 out of 10 times you land on StackOverflow.

Now, you’ll be able to input the question directly on Chat GPT and most likely, it’ll give you the best-ranked answer from SO or some high-ranking article.

Should you blindly trust the code returned by Chat GPT?

No, you still have to use your brain. Sorry, not sorry.

But it will give you a quick head start.

In other words, the only thing that Chat GPT can do (at least right now) is to perform a faster Google search.

Which, don’t get me wrong, with the number of times we perform Google searches every day, it will most likely come in handy.

That said, it’s also true that Chat GPT will give you a single answer, which according to its algorithm, is the best one for you. But what about the rest? What about your own preferences?

Chat GPT will hide all other options, effectively boosting the few it considers valid for its users.

How good is that for content creators and people looking for options and alternatives? That’s for you to decide.

Everyone’s hating on Copilot, should they also hate on Chat GPT?

Copilot has received some lawsuits because it’s spitting copyrighted code without properly crediting the authors.

Will the same happen with Chat GPT? After all, as you’ve seen already, the bot is returning content from (what I assume to be) other creators without properly crediting them.

Granted, the chat is currently free to use, so I don’t think there are any legal issues, but the moment they start charging for it (which already happened with Dalle-2) they will cause a legal battle, won’t they?

After all, they would be essentially charging you for content that is readily available online for free and without crediting the proper authors.

 

Chat GPT will not replace developers.

It will, at best, simplify your search process and help you find answers to your questions a lot faster.

That is if it’s not shut down due to legal concerns once it goes into a paid plan.

What do you think? Will you integrate Chat GPT into your dev workflow?

Build apps with reusable components like Lego

1 mutURvkHDCCgCzhHe lC5Q 1
Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Suggested Article - WordPress Migration to Google Cloud (Full Guide)