Programming a Hacker News Clone with AI

By Joel Dare - Written September 9, 2024

Ask it to further develop the idea
Manually edit the idea
Ask it to break the project down into steps
Manually loop through the steps

Further Develop the Idea

First, I use a prompt to ask it to further develop the idea.

Develop below paragraph:
I want a hacker news clone. It should use the neat css framework for html/css. It should list highest ranking articles in order of popularity on the home page. Users can vote up (but not down). There should be some type of time based decay. New users should be created with just username and password. Users should be able to add a post or a comment and comments should be threaded. Comments on their own web page. It should use a SQLite database. Backend should be written in go and use a rest api.

Here’s the idea it returned.

Here’s a detailed specification for a Hacker News clone:

Frontend

The frontend will utilize the Neat CSS framework to create a clean and responsive design.

The home page will display the highest ranking articles, ordered by popularity, with the most popular article at the top.

Each article will have a title, author, and score (which reflects its popularity).

Logged in users can vote up on an article, but not down. This will be implemented using a simple upvote link next to each article.

There will be no framework, just html and css and very light pure javascript.

Time-based Decay

To prevent old articles from dominating the front page forever, we’ll implement time-based decay.

The decay factor will be applied to each article’s score over time, with older articles losing some of their score at regular intervals (e.g., every hour).

This will ensure that new articles have a chance to gain popularity and reach the top of the front page.

The score won’t change directly but will be calculated with the decay factor.

User Management

Users will be created with just a username and password.

User authentication will be handled using a simple login system, with no email verification or additional information required.

Users will be able to add posts as urls, text, or both.

Users will be able to add comments.

Users can upvote articles.

Comments

Comments will be threaded, allowing users to respond to each other’s comments.

Each comment will have its own web page, displaying the original text (if there was any) and all subsequent comments in a threaded format.

Comment threading will be implemented using a recursive data structure, with each comment having a parent ID referencing its parent comment.

The comment link will not appear on 3rd level deep comments.

Backend

The backend will be written in Go (Golang) and use a REST API to interact with the frontend.

The backend will handle user authentication, article creation and scoring, comment creation and threading, as well as time-based decay.

SQLite will be used as the database management system, providing a lightweight and easy-to-use storage solution for the application.

API Endpoints

The following REST API endpoints will be implemented:

/articles: Returns a list of articles, ordered by popularity.

/article/{id}: Returns an individual article with its comments.

/comments: Creates a new comment on an article.

/login: Authenticates a user and returns their username.

/register: Creates a new user account.

This specification should provide a solid foundation for building a Hacker News clone using the Neat CSS framework, Go backend, and SQLite database.

Manually Edit the Idea

Next I tweak the idea that it generated in subtle ways that I think are important and to add detail.

Break the Project Down

I ask it to break the project down into steps. I include the modified developed idea from above plus my question. I do this in a new conversation.

{Developed Idea}

Break this project down into individual steps that need to be completed.

It responded with the following steps.

Here’s a breakdown of the project into individual steps:

Step 1: Set up the frontend

Create a new HTML file for the home page

Import the Neat CSS framework and set it up in the HTML file

Design the layout of the home page, including:

A list of articles with title, author, and score

An upvote link next to each article

Implement basic styling using Neat CSS

Step 2: Implement user authentication

Create a new HTML form for user registration

Add input fields for username and password

Implement basic validation for the form fields (e.g., check if username is unique)

Store user credentials in local storage or a simple database (e.g., SQLite)

Step 3: Set up time-based decay

Calculate the initial score for each article based on its popularity

Implement a function to apply time-based decay to each article’s score at regular intervals (e.g., every hour)

Update the article list on the home page with the new scores

Step 4: Create API endpoints for articles

Set up a REST API endpoint to retrieve a list of articles, ordered by popularity

Implement a function to generate the article list based on the updated scores

Return the article list in JSON format from the API endpoint

Step 5: Implement user comments

Add an input field for users to add comments on articles

Store comments in local storage or a simple database (e.g., SQLite)

Display comments below each article on the home page

Step 6: Implement threaded comments

Create a recursive data structure to store comment threading information

Update the comment display to show threaded comments

Add a link to view individual comments and their replies

Step 7: Set up API endpoints for comments

Create a REST API endpoint to create new comments on articles

Implement a function to store comments in the database

Return the updated comment list from the API endpoint

Step 8: Implement user authentication for API endpoints

Add authentication checks for API endpoints (e.g., /login and /register)

Validate user credentials before allowing access to API endpoints

Step 9: Set up API endpoints for article creation and scoring

Create a REST API endpoint to create new articles

Implement a function to store articles in the database

Update the article list on the home page with the new scores

Step 10: Test and iterate

Test each feature individually to ensure it works as expected

Iterate on feedback from users and make necessary improvements

Ask it to Complete a Step

I asked it to do the first step, which it did, but it didn’t follow the spec, or at least, not the way I wanted it to. Instead it just wrote a basic HTML file. No Neat CSS was included. So, I installed Neat CSS with it’s default instructions then copied the neat.html file over top of index.html and removed the body. Finally, I copied and pasted a few minor details from it’s answer on top of that, such as including a js file and the empty article list.

I asked it to further develop the article list with some examples.

Lets add a dozen example article titles and url’s also add an example author name, score, and posted date. All to the articles section.

Ask it to Refine

It made each link too complicated and added a bunch of extra data. Rather than fix it all myself, I asked it to fix the problem.

Information is duplicated in the link such as the authors name. Lets reduce the link to just the title (the part in quotes) and then remove the title= value from each.

It came up with garbage again, here’s what it returned.

<li>
    <a href="#" title="Example Article 1">"The Future of Space Travel"</a>
    <span class="author">John Doe</span>
    <span class="score">Score: 100, Posted: 2023-02-20</span>
</li>

Things I don’t like about this return:

It has quotes on every title
It has an unnecessary title attribute
It has a score span with both a score and a date

I ended up rewriting this manually into this format. Just personal preference, really.

<main>
    <section class="articles">
        <a href="url">The Future of Space Travel</a>
        <div class="info">100 points by <a href="#">johndoe</a> 4 hours ago | <a href="#">upvote</a> | <a href="#">comments</a></div>
    </section>
</main>

I ignored most of what it returned through the rest of this conversation and just did it the way I wanted it. Except I let it write this part for me.

How do I add a margin-top to every articles section except the first?

I asked it a few more questions as I refined the html and css to my liking.

I coudn’t remember the exact css formatting for this, so I just asked it.

How do I add a margin to each article but not the first article?

I couldn’t think of the word “opacity” so I just asked it.

How do I add transparency to a css item?

At this point I finished for the day. I’m not two hours in and I only really have the html page written with dummy info, the database created, and some other minor scaffolding.

I do like having the todo list. Going back to that list, at the end of my session, I notice that I’ve completed the entire first section, not just the first instruction. Next I’ll be on to pulling the data from the database.