← Projects

Building CodeEmpty.com with AI — From Prompt to Production

Posted May 8, 2026

CodeEmpty.com is an open-source AI-built CMS and project publishing platform created through real-world vibe coding workflows.

This project documents the complete process of building and deploying CodeEmpty.com using AI — from initial prompting, implementation, debugging, testing, iterations, deployment, troubleshooting, and publishing to production.

The goal is not to create hype around AI tools, but to transparently show the practical realities of building software with AI:

- prompting
- debugging
- fixing AI mistakes
- deployment
- iterations
- production issues
- real workflows

The platform itself is also part of the vision.

CodeEmpty.com records projects step-by-step with screenshots, prompts, iterations, deployment processes, and implementation details. Projects can later be exported or published to OpenVibeHub.com — an open community for sharing vibe coding projects, collaboration, reviews, discussions, and iterative software development.

This project currently includes:

- AI-assisted CMS

- project & step management

- rich content elements

- static page generation & caching

- Cloudflare Pages deployment

- D1 database integration

- Workers KV caching

- R2 media storage

- GitHub CI/CD workflow

- AI-ready API architecture

The entire project was built through iterative development cycles:

Prompt → Build → Test → Fix → Deploy → Repeat

This project is open-source and intended to encourage practical, collaborative, transparent AI-assisted software development.

▶ Watch on YouTube

📑 Contents — 42 steps

1. 1. Install Claude Code 2. 2. Setup GitHub Repository 3. 3. Setup Local Repository 4. 4. Learn & Run Claude Code 5. 5. Claude Setup 6. 6. Subscription Required 7. 7. Check Usage 8. 8. Planning (Master Prompt)9. 9. Iteration 1 — Start Build 10. 10. Iteration 1 — Install & Run 11. 11. Iteration 1 — Testing 12. 12. Iteration 2 13. 13. Iteration 2 — Building 14. 14. Iteration 2 — Testing 15. 15. Iteration 3 16. 16. Iteration 3 — Building 17. 17. Iteration 3 — Testing 18. 18. Update Github 19. 19. Iteration 4 20. 20. Iteration 4 — Building 21. 21. Iteration 4 — Testing 22. 22. Iteration 5 23. 23. Iteration 5 — Building 24. 24. Iteration 5 — Testing 25. 25. Iteration 6 26. 26. Iteration 6 — Building 27. 27. Iteration 6 — Testing 28. 28. Iteration 7 29. 29. Iteration 7 — Building 30. 30. Iteration 7 — Testing 31. 31. Iteration 8 32. 32. Iteration 8 — Building 33. 33. Iteration 8 — Testing 34. 34. Deplpyment 35. 34a. Create a Cloudflare Account 36. 34b. Register or connect a domain 37. 34c. Create Database (D1)38. 34d. Create Key-value (KV) store 39. 34e. Create R2 Storage 40. 34f. Create Cloudflare Pages 41. 34g. Add Domain 42. 34h. Troubleshooting

1. 1. Install Claude Code ▶ 1:11 3 items · 3 🖼

Search: “How to use Claude Code” → Links may change, so always start with search

▶ 1:22

Select your platform Copy the install command

▶ 1:35

Open Terminal Paste and run

▶ 1:59

2. 2. Setup GitHub Repository ▶ 2:03 3 items · 3 🖼

Go to GitHub Register or login

▶ 2:11

Create a new repository

▶ 2:24

Copy the repository URL

▶ 2:39

3. 3. Setup Local Repository ▶ 2:41 2 items · 2 🖼

Navigate to your working folder

▶ 2:49

Clone the repository

▶ 2:56

4. 4. Learn & Run Claude Code ▶ 2:58 2 items · 2 🖼

Run "claude -- help"

▶ 3:05

Run "claude"

▶ 3:25

5. 5. Claude Setup ▶ 3:28 2 items · 2 🖼

/init - Initialize project

▶ 3:37

/login - Login to account

▶ 3:40

6. 6. Subscription Required ▶ 3:49 3 items · 3 🖼

Claude requires a paid plan

▶ 3:56

Subscribe → Pro plan

▶ 4:03

Authorized ✅

▶ 4:37

7. 7. Check Usage ▶ 4:43 1 item · 1 🖼

/usage

▶ 4:46

8. 8. Planning (Master Prompt) ▶ 4:57 3 items · 3 🖼

Prepared a full master prompt (see description)

▶ 5:03

Even without asking, it starts planning

▶ 5:09

It asks for permission before running commands

▶ 5:18

9. 9. Iteration 1 — Start Build ▶ 5:37 2 items · 2 🖼

Type "start implementation"

▶ 5:43

Claude begins generating the full CMS.

▶ 6:07

10. 10. Iteration 1 — Install & Run ▶ 7:50 1 item · 1 🖼

Type "run and allow me to test"

▶ 7:53

11. 11. Iteration 1 — Testing ▶ 8:04 4 items · 4 🖼

Click the link to open browser

▶ 8:07

Homepage with a test project

▶ 8:20

…admin page is empty

▶ 8:33

Right click the page and select Inspect

▶ 8:47

12. 12. Iteration 2 ▶ 8:49 2 items · 2 🖼

Copy error messages

▶ 8:57

Paste into prompt

▶ 9:00

13. 13. Iteration 2 — Building ▶ 9:01 1 item · 1 🖼

Start building

▶ 9:12

14. 14. Iteration 2 — Testing ▶ 9:07 2 items · 2 🖼

Refresh. Test again

▶ 9:09

New errors… repeat

▶ 9:14

15. 15. Iteration 3 ▶ 9:23 1 item · 1 🖼

Copy the error… paste into the prompt… and iterate.

▶ 9:31

16. 16. Iteration 3 — Building ▶ 9:32 1 item · 1 🖼

▶ 9:42

17. 17. Iteration 3 — Testing ▶ 9:44 9 items · 9 🖼

Refresh. Test again

▶ 9:44

Now it works

▶ 9:45

Let's test the Projects menu...

▶ 10:53

It said "auto-generated". So leave it empty to try.

▶ 10:55

Need HTML editor for description

▶ 11:04

Homepage should show the new project

▶ 11:23

Not working…

▶ 11:34

Try add a new step...

▶ 12:05

no response?

▶ 12:09

18. 18. Update Github ▶ 12:23 3 items · 3 🖼

git commit = save version git push = upload to GitHub

▶ 12:27

Authentication issue detected

▶ 12:46

We will proceed with Option B to authenticate

▶ 12:52

19. 19. Iteration 4 ▶ 13:37 1 item · 1 🖼

Continue fixing issues Full steps available in README

▶ 13:52

20. 20. Iteration 4 — Building ▶ 13:52 1 item · 1 🖼

▶ 14:08

21. 21. Iteration 4 — Testing ▶ 14:12 12 items · 12 🖼

Refresh the page and test "Add Step"

▶ 14:17

Each step supports:

▶ 14:40

Description (HTML editor?)

Image (upload?)

Youtube embed

URL links

Code / prompt blocks

Multiple steps

Check project page

Not updating…?

Suspect slug issue

Details are correct Slug generation is not

▶ 17:21

22. 22. Iteration 5 ▶ 17:41 1 item · 1 🖼

Adding structure… content types… and editing capabilities.

▶ 18:17

23. 23. Iteration 5 — Building ▶ 18:18 1 item · 1 🖼

▶ 18:25

24. 24. Iteration 5 — Testing ▶ 18:35 7 items · 7 🖼

HTML editor works

▶ 18:43

Drag & drop enabled

▶ 18:59

HTML editor in Description works

▶ 19:04

Steps also have drag-and-drop support

▶ 19:29

Test slug auto-generation

▶ 20:05

Slug still not working

▶ 20:14

from the URL, we can see it's not working...

▶ 20:33

25. 25. Iteration 6 ▶ 20:44 1 item · 1 🖼

▶ 20:53

26. 26. Iteration 6 — Building ▶ 20:54 3 items · 3 🖼

▶ 20:56

Check usage...

▶ 21:02

we are using haiku-4.5 and sonnet-4-6...

▶ 21:04

27. 27. Iteration 6 — Testing ▶ 21:14 4 items · 4 🖼

Slug works now

Slug works?

Test Blog

Slug issue again…

28. 28. Iteration 7 ▶ 23:18 1 item · 1 🖼

▶ 23:28

29. 29. Iteration 7 — Building ▶ 23:30 1 item · 1 🖼

▶ 23:37

30. 30. Iteration 7 — Testing ▶ 23:57 3 items · 3 🖼

Fix applied

▶ 24:09

Continue testing

▶ 24:27

App registration → error

▶ 24:28

31. 31. Iteration 8 ▶ 24:34 1 item · 1 🖼

▶ 24:52

32. 32. Iteration 8 — Building ▶ 24:53 1 item · 1 🖼

▶ 24:56

33. 33. Iteration 8 — Testing ▶ 24:58 3 items · 3 🖼

Data persists

▶ 25:06

Create new record → works

▶ 25:16

Confirmed that git committed and pushed

▶ 25:44

34. 34. Deplpyment ▶ 25:49 2 items · 2 🖼

Follow README

▶ 26:00

Now we deploy using Cloudflare.

▶ 26:15

35. 34a. Create a Cloudflare Account ▶ 26:05 1 item · 1 🖼

▶ 26:20

36. 34b. Register or connect a domain ▶ 26:31 1 item · 1 🖼

▶ 26:41

37. 34c. Create Database (D1) ▶ 27:09 6 items · 6 🖼

Storage & databases D1 SQL Database

▶ 27:22

Name must be "codeempty-db"

▶ 27:30

Go back to the D1 Database list

▶ 27:52

Click on the UUID value to copy it

▶ 28:03

Open wrangler.tom file in text editor (or notepad)

▶ 28:20

Paste the UUID as the value of databaseid

▶ 28:29

38. 34d. Create Key-value (KV) store ▶ 28:39 5 items · 5 🖼

Storage & databases Workers KV

▶ 29:05

Name must be "codeempty-pages-kv"

▶ 29:13

Look up the KV id from the KV list

▶ 29:25

Click on the ID to copy it

▶ 29:27

Place the ID to both id and previewid in wrangler.toml

▶ 29:39

39. 34e. Create R2 Storage ▶ 29:48 3 items · 3 🖼

Storage & databases R2 Object Storage

▶ 29:53

Requires a subscription but with free quota

▶ 30:01

Name must be "codeempty-media"

▶ 30:50

40. 34f. Create Cloudflare Pages ▶ 31:08 10 items · 10 🖼

Connect the repository… and trigger the build.

▶ 31:18

Connect GitHub

▶ 31:27

After connecting, I go back or re-enter the Create Application page

▶ 31:33

Click the "Get started" link

▶ 31:35

Import an existing Git repository

▶ 31:39

Select the github account where we store the code

▶ 31:45

Select repository

▶ 31:50

Put "npm run build" as Build command

▶ 32:24

Put "dist" as Build output directory

▶ 32:30

Deployed!

▶ 32:40

41. 34g. Add Domain ▶ 32:46 4 items · 4 🖼

▶ 32:47

It will take a while for verification. But we don't have to wait.

▶ 33:20

Just try it...

▶ 33:28

It fails.

▶ 33:32

42. 34h. Troubleshooting ▶ 33:32 37 items · 37 🖼

Check bindings (README Step 7)

Test default domain

Ask AI

The fix is clear...

Missing Step 8 in Readme.md

▶ 35:10

Ask AI...

▶ 35:24

It asks me to run this command here...

▶ 35:31

Error…

▶ 35:42

Retry outside terminal

▶ 35:58

it doesn't understand "!"...

▶ 36:01

remove "!" and try again...

Read the error.

Ask AI

Try again.

Another error.

Update wrangler (the error suggests)

▶ 36:55

Keep going.

▶ 37:16

press "up" to retry commands

▶ 37:26

it works but...

▶ 37:43

it said "add a --remote flag"!

▶ 37:56

Referring to Step 8, let's login first!

▶ 38:09

Making progress...!

▶ 38:35

Continue setup

▶ 38:48

It works but local again. Add --remote?

▶ 38:55

still local... doesn't recognize the --remote flag?

▶ 39:02

still local... still doesn't recognize the --remote flag?

▶ 39:31

wait...!

▶ 39:37

It's actually running this command. The --remote flag should be applying here?

▶ 39:50

looks like it just doesn't recognize the --remote flag

And this time…

Finally… it works

It works...!!!

It works!

Try to access admin dashboard

Create new project

Upload image

Everything works