This content originally appeared on DEV Community and was authored by Spencer Tower
This is the second post in a series building out a Hacker News clone using ChatGPT as an assistant, inspired by Building Hacker News with AI, describe a UI and AI builds it for us.
In my previous post I experimented with giving prompts to ChatGPT, varying in detail, to see what yielded the best results for a header component. In this post I will edit ChatGPT's code to more closely match the Hacker News top bar.
Prompt and Results:
After experimenting, I settled on this prompt for the header component:
"I need to create the header component for a Hacker News clone using Next.js, TypeScript, and Tailwind CSS. I will only be creating the UI.
Visual Design:
- small ycombinator "y" logo - white border, with white "Y"
- title "Hacker News", bold black, on left side of header
- links: to right of title - new, past, comments, ask, show, jobs, submit
- orange background
- each link separated by a |
- "login" link, right side of header"
Result:
Here is the code generated by ChatGPT:
const Header: React.FC = () => {
return (
<header className="bg-gray-200 p-2 flex items-center">
<div className="flex items-center">
<img src="/y18.gif" alt="Y Combinator Logo" className="mr-2" />
<span className="font-bold text-black">Hacker News</span>
</div>
<nav className="ml-4 flex space-x-2">
<Link href="/">new</Link>
<span>|</span>
<Link href="/past">past</Link>
<span>|</span>
<Link href="/comments">comments</Link>
<span>|</span>
<Link href="/ask">ask</Link>
<span>|</span>
<Link href="/show">show</Link>
<span>|</span>
<Link href="/jobs">jobs</Link>
<span>|</span>
<Link href="/submit">submit</Link>
</nav>
<Link href="/login">login</Link>
</div>
</header>
);
};
Edits and Improvements:
This was a good starting point but the code needed some edits to be more efficient and for the design to more closely match the website.
Here are the updates I made:
In the Header component:
- Made the code DRY
- Created a new module called links.tsx with an array of header links and mapped them into Header.tsx
- Adjusted padding and height of the header
- Edited spacing between links, title, and image
- Added the y combinator image source
- Hid the links for mobile view
In the Page file:
- Adjusted the overall padding around the layout
Updated Code:
Header.tsx
const Header: React.FC = () => {
return (
<header className="bg-orange-500 flex items-center justify-between p-3.5 px-1 py-3 h-2.5">
<div className="flex items-center space-x-2">
<div>
<Image
src="https://news.ycombinator.com/y18.svg"
className="border border-white-200"
alt="y combinator logo"
width={20}
height={20}
/>
</div>
<h1 className="text-black font-bold">Hacker News</h1>
<nav className="space-x-1.5 hidden md:flex">
{navLinks.map((link, index) => (
<Fragment key={link.href}>
{index > 0 && <span>|</span>}
<Link href={link.href}>{link.label}. </Link>
</Fragment>
))}
</nav>
</div>
<Link href="/login">login</Link>
</header>
);
};
links.tsx
export const navLinks = [
{ href: '/new', label: 'new' },
{ href: '/past', label: 'past' },
{ href: '/comments', label: 'comments' },
{ href: '/ask', label: 'ask' },
{ href: '/show', label: 'show' },
{ href: '/jobs', label: 'jobs' },
{ href: '/submit', label: 'submit' },
];
page.tsx
const Home: React.FC = () => {
return (
<div>
<Head>
<title>Hacker News Clone</title>
<meta
name="description"
content="A Hacker News clone built with Next.js, TypeScript, and Tailwind CSS"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="px-36 py-2 font-sans text-sm">
<Header />
</div>
</div>
);
};
Result:
Original design from the Hacker News website:
Closing Notes:
The biggest overhaul was making the code DRY. Beyond that, I managed to make the header component much closer to the website with only minor edits. This was done with minimal changes to the code, primarily by adding an image source and making a few tweaks to the Tailwind CSS.
This content originally appeared on DEV Community and was authored by Spencer Tower
Spencer Tower | Sciencx (2024-07-19T03:48:42+00:00) Exploring AI-Assisted UI Development: Lessons from Creating a Hacker News Clone – pt. 2. Retrieved from https://www.scien.cx/2024/07/19/exploring-ai-assisted-ui-development-lessons-from-creating-a-hacker-news-clone-pt-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.