Building React Todo App using chat GPT

Hey explorer! This AI tool doesn't need an intro. Since last year, chat GPT has been trending on the internet. If you need to know what it is?, How to use it? How it can help you. Then it is the right place for you. After this tutorial, you will be a master of it. This tutorial will teach you everything about it by building React Todo App using chat GPT.

Let's start.

Almost everyone is familiar with it. But if you need to know what is this? I am telling you about it.

What is chatGPT and GPT-3?

Chat GPT, GPT-3 means Generative Pre-trained transformer - 3. It is an AI-generated model from its parent company OpenAI. It can handle every input and gives a variety of results to the user. It is trained in a massive database of texts, videos, websites, and articles. And capable of generating human-like results. It can be given responses in multiple languages, depending on the input. You can generate almost every answer from it.

Features of chat GPT

The main feature of chat GPT is to generate responses like humans. This chatbot is like a virtual assistant that can:-

Handle a wide range of inputs.
Write code.
Debug.
Write stories, poems, songs, etc
write articles
Solve your problems.

Such features make it a powerful tool, but it has some limitations.

Limitaions of chat GPT

Although it is a powerful artificial intelligent chatbot. But it also comes with several limitations.

It can not provide real-time data.
It does not give references to URLs, websites, and pages.
It is unable to give results based on location.

What problems did I face?

Here are the problems I faced when I used it.

Does not provides a complete result:- Chat GPT is limited to particular numbers of words. It stops generating a response if its limits exceed, even if you have an incomplete outcome. I had to tell him to complete the remaining part.

That's enough about this artificial model.

How to use chat GPT?

To use chat GPT, you have to create an account on it. If you don't have an account, create one.

Sign up or log in to chat GPT.
After signing up, you will be redirected to its console.

You only need to write text in the input box and receive the information.

To make it easier, let's create a Todo app.

Building a Todo app using chat GPT

Generating code using chat GPT

To create this app, I write the following text in chat GPT.

create a Todo app in react and tailwindcss

Give it some time to write code. After some time, it generates code for you. Copy the code provided by chat GPT and keep it for later.

Set the environment for the application

Now, create react app with the help of vite. We use tailwind instead of regular CSS in react app. So, install tailwind in your react application. You can also read our article on How to create a react app using Vite js and tailwind CSS.

Code generated by chat GPT

After creating react app, paste the code provided by chat GPT into the App.jsx file. In my case, the code looks like this.

import React, { useState } from 'react';

function TodoApp() {
  const [newTask, setNewTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const handleAddTask = (event) => {
    event.preventDefault();
    setTasks([...tasks, newTask]);
    setNewTask('');
  }

  const handleRemoveTask = (index) => {
    setTasks(tasks.filter((task, i) => i !== index));
  }

  return (
    <div className="container mx-auto p-4">
      <form onSubmit={handleAddTask} className="bg-gray-100 rounded-lg p-2">
        <input 
          type="text" 
          placeholder="New task..." 
          className="rounded-lg p-2" 
          value={newTask} 
          onChange={(event) => setNewTask(event.target.value)}
        />
        <button type="submit" className="bg-blue-500 rounded-lg p-2 text-white">Add</button>
      </form>
      <ul className="bg-white rounded-lg overflow-y-scroll h-64">
        {tasks.map((task, index) => (
          <li key={index} className="p-2">
            {task} <button onClick={() => handleRemoveTask(index)} className="bg-red-500 rounded-lg p-1 text-white">X</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

After running this code, it looks like this 👇🏼👇🏼👇🏼.

todo app using chat gpt, todo app, codearmor

You can see there is no style in this app. Now you can imagine how well it can design.

Rewrite the code for the application

This Todo app doesn't contain a well UI. So, I am going to change its design by rewriting the code. Here is the code I rewrite👇🏼👇🏼👇🏼.

import React, { useState } from "react";

function TodoApp() {
  const [newTask, setNewTask] = useState("");
  const [tasks, setTasks] = useState([]);

  const handleAddTask = (event) => {
    event.preventDefault();
    if (newTask) {
      setTasks([...tasks, newTask]);
      setNewTask("");
    } else {
      alert("Enter something in input box");
    }
  };

  const handleRemoveTask = (index) => {
    setTasks(tasks.filter((task, i) => i !== index));
  };

  return (
    <div className="h-100 w-full flex items-center justify-center text-slate-600 font-medium">
      <div className="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
        <div className="mb-4">
          <h1 className=" font-medium text-lg">Todo List</h1>
          <form onSubmit={handleAddTask} className="flex mt-4">
            <input
              value={newTask}
              onChange={(event) => setNewTask(event.target.value)}
              className="shadow outline-none border-2 rounded w-full py-2 px-3 mr-4 font-normal focus:border-emerald-300"
              placeholder="Add Task..."
            />
            <button
              type="submit"
              className="flex-no-shrink p-2 rounded text-white bg-emerald-400 hover:bg-emerald-500"
            >
              Add
            </button>
          </form>
        </div>
        <div>
          {tasks.map((task, index) => (
            <div key={index} className="flex mb-4 items-center">
              <p className="w-full font-normal">{task}</p>

              <button
                onClick={() => handleRemoveTask(index)}
                className="flex-no-shrink p-2 ml-2 rounded bg-red-400 text-white hover:bg-red-500"
              >
                Remove
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default TodoApp;

Finally, I got the well-designed and working Todo app. Now, It is ready to use. You can also see the final result of this application.

todo app final result, todo app by chat GPT, codearmor

With this example, you learn how you can use chat GPT. Use it and create awesome projects.

Conclusion

Although chat GPT is a powerful artificial intelligent chatbot. But occasionally, it does not give you accurate results. You can use it in your business, education, project, etc. It is a tool that helps you to increase your potential. At this time, it is not a complete solution. Possibly, it will be better in the future. Use it as an assistant but don't depend on it.

Thank you!

Code Armor