This is my final post in a series on using ChatGPT, Next.js, React, Typescript, and Tailwind CSS to create a Hacker News clone.

In part 3 I built out the listing component.

In this post I will be prompting ChatGPT for the footer component.

Prompt and Results:

For this prompt, I specified that the code should use the Next.js <Link> tag instead of <a>, which ChatGPT has been using by default. I also specified that the code should be DRY, since ChatGPT did not do so by default for the header component.

Prompt to ChatGPT:

"I am building a Hacker News clone using Next.js, Tailwind CSS, React, and TypeScript. Only the UI. I need to create the footer component. The footer should include:

Styling Details:
horizontal separator - orange
pipe separators - light gray
search bar label - light gray
link text - black

Note: use <Link> instead of <a>, make code DRY"

Result:

It breaks.

Code generated by ChatGPT:

const links = [
 { href: '#', label: 'Guidelines' },
 { href: '#', label: 'FAQ' },
 { href: '#', label: 'Lists' },
 { href: '#', label: 'API' },
 { href: '#', label: 'Security' },
 { href: '#', label: 'Legal' },
 { href: '#', label: 'Apply to YC' },
 { href: '#', label: 'Contact' },
];


const Footer: React.FC = () => {
 return (
   <footer className="mt-8 text-center">
     <hr className="border-t-2 border-orange-500 mb-4" />
     <div className="mb-4">
       {links.map((link, index) => (
         <span key={link.label}>
           <Link href={link.href}>
             <a className="text-black hover:underline">{link.label}</a>
           </Link>
           {index < links.length - 1 && <span className="text-gray-500 mx-1">|</span>}
         </span>
       ))}
     </div>
     <div className="flex justify-center items-center">
       <label htmlFor="search" className="mr-2 text-gray-500">Search:</label>
       <input
         id="search"
         type="text"
         className="focus:outline-none focus:ring-2 focus:ring-orange-500 border rounded px-2 py-1"
       />
     </div>
   </footer>
 );
};

Comments:

ChatGPT mostly used tags, as I requested, instead of tags, but still added an tag embedded in a tag which caused an error.

Here's the source of the error, inside the map statement:

<Link href={link.href}>
  <a className="text-black hover:underline">{link.label}</a>
</Link>

It wrapped a link within a link using two different types of link tags. The wrapper contains the href and the wrapped link contains the styling and label.

I updated the code to a link wrapped in a fragment:

<>
  <Link className="text-black hover:underline" href={link.href}>{link.label}</Link>
</>

That solved the error. Here's the result:

Very close to the original Hacker News design. It needs a little more padding on the bottom and the search bar needs a border. The links also underline on hover and the focus is orange. Aside from that it looks great.

Edits and Improvements:

const Footer: React.FC = () => {
 return (
   <footer className="mt-8 text-center pb-4">
     <hr className="border-t-2 border-orange-500 mb-4" />
     <div className="mb-4">
       {footerLinks.map((link, index) => (
         <span key={link.label}>
           <>
             <Link className="text-black" href={link.href}>{link.label}</Link>
           </>
           {index < footerLinks.length - 1 && <span className="text-stardust mx-1">|</span>}
         </span>
       ))}
     </div>
     <div className="flex justify-center items-center">
       <label htmlFor="search" className="mr-2 text-stardust">Search:</label>
       <input
         id="search"
         type="text"
         className="focus:outline-none focus:ring-2 focus:ring-blue-500 border rounded px-2 py-1 border-stardust"
       />
     </div>
   </footer>
 );
};

Result:

Here is the finished clone:

Reflection:

Despite some quirky code that caused an error, ChatGPT generated a footer component that closely matched my prompt and looks very similar to the website. Beyond that, a few tweaks were all it took to match the site.

Prior to this Hacker News clone experiment, I had limited exposure to Tailwind CSS. By editing the generated code, I now feel much more confident using it. Collaborating with ChatGPT, while making updates and referencing docs along the way, helped me better understand a relatively unfamiliar technology. Additionally, I understand how to formulate a prompt to effectively communicate with ChatGPT while making it readable for future use and updates.

While ChatGPT's code is not perfect and sometimes causes errors, it can provide a solid foundation to build upon. Overall, I think that this experiment has proven its potential as a coding assistant to expedite the development process.

How ChatGPT Helped Me Build a Hacker News Clone - pt. 4

Prompt and Results:

Edits and Improvements:

Reflection: