23 Feb 2025

Using AI to Build AIRTIFACT.COM (Part I)

This is the 1st blog post in a series where I will try to use AI tools to build AIRTIFACT.COM from scratch. My main goal is to learn and document how to effectively use LLMs through structured prompting. For brevity, I only included selected snippets of my prompts and AI responses. AIRTIFACT.COM’s source code is available on Github.

In this post, I will describe how I used Claude to get started with a React web application that curates trending AI artifacts. In the following post, I will focus on adding new features, debugging, and fixing issues.

Initial Project Definition

Project Overview

Prompt #1:
I have a domain name called AIRTIFACT.COM. I want to make a web app that displays
AI Artifacts focusing mostly on AI generated content, specifically curating best 
images, music, videos, memes, hallucinations generated by LLMs and other AI tools.
The website should also have sections containing trending blogs, articles, and topics in AI. 

I want to develop the code on github, can you give me a step by step plans, 
and ask me questions to clarify as we develop the ideas together.
----------------------------------
----------------------------------
Response #1:
I'll help you plan the development of AIRTIFACT.COM. Let me start by asking 
some key questions to better understand your vision:

1. User Experience & Features:
  - Do you want users to be able to submit their own AI-generated content, or will it be curator-only?
  - Should users be able to create accounts and interact with the content (like, comment, share)?
  - Do you want to implement any sorting/filtering features (by AI tool, by category, by popularity)?
2. Technical Preferences:
  - Do you have any preferred tech stack or framework in mind?
  - Do you have experience with specific programming languages?
  - Are you planning to handle this alone or with a team?
3. Content Organization:
  - What are the main categories you want to include? (e.g., Images, Music, Videos, Text)
  - How do you want to handle content moderation?
  - Do you want to implement tagging/categorization by AI tool (like DALL-E, Midjourney, GPT, etc.)?
4. Monetization & Scale:
  - Are you planning to monetize the platform? If yes, how?
  - What's your expected traffic volume initially?
  - Do you need any specific analytics or tracking features?

Once you provide these details, I can help create a more detailed development plan 
and GitHub repository structure. Let's start with these questions and build from there!

Requirements Gathering

Clarifying Requirements

The AI assistant asked key questions about:

User Experience & Features
Technical Preferences
Content Organization
Monetization & Scale

My response

Prompt #2:
1. User Experience & Features: To start, I only want curation. No users accounts. 
   and to begin, always sort popularity. custom sorting can be added later.
2. Technical Preferences: I prefer node or javascript applications. I have 
   experience with python and streamlit.io. I will handle this alone.
3. Content Organization: main categories are images and text. for content 
   moderation, no nsfw content. tagging and categorization can be added later.
4. Monetization & Scale: no monetization, keep it open source. traffic will be 
   very low. no analytics needed.

Technical Setup

Technical Structure

The AI suggested a technical stack and repository structure, followed by specific questions about:

Metadata requirements
Layout preferences
Search functionality
Content management approach

My Response

Prompt #3:
1. Metadata: date created and brief description
2. Layout: masonry layout for images
3. Search: no search initially
4. Content Management: manage content directly through GitHub

Implementation Process

Component Development

I requested implementation of specific components:

Prompt #4:
Let's start with The basic layout component, and tell me how I can launch 
the app and test in local

Content Addition After Initial Setup

Prompt #5:
Let's add more text content. similar with images, implement the 'View All 
Text Content' functionality

Prompt #6:
On the front page, also display text content in grid format. same width 
and height as images

Key Learnings from the Process

Incremental Development
- Started with basic features
- Added complexity gradually
- Focused on one component at a time
Clear Communication
- Specific requirements
- Direct feedback
- Iterative improvements
Feature Prioritization
- Core functionality first
- Aesthetic improvements second
- Advanced features deferred

Effective Prompting Patterns

Start Broad, Then Narrow
- Begin with overall vision
- Break down into specific requirements
- Focus on individual components
Be Specific About Needs
- Clear technical preferences
- Explicit layout requirements
- Specific functionality requests
Iterative Refinement
- Test implementations
- Request modifications
- Build upon working components

Results

At the end I had a working React/Next.js web application that can displays images and texts.

After launching the application using the npm run dev command, and opening http://localhost:3000/, I see:

homepage of airtifact.com after initial setup

Notes

I used Claude to generate an early draft of this post by using the following prompts:

Prompt #7a:
Summarize what we have done so far in how-to blog post with minimal code examples. format the blog post in markdown format.

Prompt #7b:
Try again, and this time focus on the prompts I am using to get your help in building this website.

Prompt #7c:
Can you convert the above output in markdown source code

Patrick Niyongabo