Creating a Progress Bar Component with ChatGPT

Leveraging AI in web development to generate base code for a progress bar component

The rapid development of artificial intelligence (AI) has brought about various innovations, and web development is no exception. One of the most prominent AI tools in this field is ChatGPT, which can be utilized to create base code for components. In this blog post, we will explore how ChatGPT can generate a progress bar component for web development.

Experimenting with ChatGPT

To create a progress bar component, I provided ChatGPT with a detailed prompt, including:

• ASCII representation of the component using ASCIIFlow
• CSS code generated by Figma
• Tailwind Config file
• Component template
• Other details

The Figma layout

The prompt

Create a React component with tailwind for me.
It is a progress bar to track the user's progress level.

The text and the vertical line must be at the end of the current progress bar.

The background is transparent.
The component has this ASCII representation:

                            │
                            │
┌───────────────────────────┼──────────────────────────────────────────┐
│########%%%%%|||||||||     │                                          │
└───────────────────────────┼──────────────────────────────────────────┘
                            │
                            │
         Progress Level - 26%

These are some of the CSS rules that a Figma file would generate for this component.
You can use it to understand how the component is made. You don't need to use the exact same CSS.

/* pending */
position: absolute;
width: 1780px;
height: 8px;
left: 0px;
top: 167px;
/* Group 1674 */
position: absolute;
width: 1780px;
height: 8px;
left: 0px;
top: 167px;
// Lots of CSS here, removed for brievity.

You must always try to use the existing Tailwind rules that are extended on the tailwind.config.js

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      // More colors here
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

Use the following template for the code:

import { twMerge } from 'tailwind-merge'
export function ComponentName({ className = '' }) {
  return (
    <div className={twMerge('', className)}>
      // ...
    </div>
  )
}

Note: the twMerge must only be used in the most outer element.
Use as much tailwind as possible, avoiding the use of style props as much as possible.

Send me the code block only, don't explain the code.

Name it ProgressBar.

It will receive progress and classname props.

The Result

After a few tries, ChatGPT generated a component as follows:

import React from 'react'
import { twMerge } from 'tailwind-merge'

export function ProgressBar({ progress = 0, className = '' }) {
  const progressBarWidth = `${progress}%`

  return (
    <div className={twMerge('relative h-8 bg-gray my-[1000px]', className)}>
      {' '}
      <div
        className="absolute h-8 bg-gradient-to-r from-red via-green to-transparent"
        style={{ width: progressBarWidth }}
      />{' '}
      <div
        className={twMerge(
          'absolute w-px h-8 bg-white transform -translate-y-4',
          progress === 100 ? 'right-0' : ''
        )}
        style={{ left: progressBarWidth }}
      />{' '}
      <div
        className="absolute flex items-center justify-center text-white text-base font-primary top-8"
        style={{ left: progressBarWidth }}
      >
        {' '}
        Progress Level - {progress}%
      </div>{' '}
    </div>
  )
}

Which resulted in this component:

The Outcome and Next Steps

Although the generated code was not perfect, it served as an excellent starting point for building the desired component. I had to make additional adjustments to ensure the layout and behavior met the requirements, but ChatGPT's contribution made the process much smoother and more efficient.

In conclusion, AI tools like ChatGPT can be invaluable in web development, providing a foundation for developers to build. While it's not a complete solution, it demonstrates the potential of AI to enhance our productivity and creativity in the world of web development.