Campfire: a private chat app for a small online community

Channels with unread counts, image attachments, emoji reactions, presence and typing indicators, and @mentions that email offline members, all live.

This is Campfire. It's a real-time chat application with multiple rooms. We built it in about 20 minutes using Elements and Claude Code Opus 5.5 on Medium. Here's the exact prompt I used to build the application.

Let's paste that prompt in and watch some of the highlights in high speed. You're watching the build server state up in the upper right. It'll flip occasionally from OK to error, and that's the server telling Claude how to fix its own issues. And over on the lower right, you're seeing the application user interface come together as the Claude agent drives it, tests each of the pages, and make sure that it works.

And here we are at the end clocking in at about 20 minutes with a full blown chat application. Let's take a couple of minutes and I'll walk you through this application and some of its features. I've got two windows open so we can see the real-time chat, and on the left, I'll log in as Maya. Claude gave us this nice feature that lets us click the seeded login so that we can quickly log in.

And you can see there's a create an account link here. If we needed to create new accounts, we could do that. This is all wired up completely. The email and password authentication is baked in such that you're storing those records in your own database, not using an external service that you'd have to pay for.

Let's go back to sign in, log in as Maya, and then over on the right, I'll log in as Jonas, who's just a regular member. As soon as I start typing, notice on the right it says Maya is typing, so that's the presence indicator. The real-time uh status information is coming down to this other browser, this other connected client. And as soon as I type that message and press enter, it appears just like you would expect in any real-time chat application.

The other cool thing I can do here is I can mouse over and do emojis, so. We'll do a couple here. We're really happy to see that Maya is in the chat room here. And then I can also go over to uh different channels, the announcements channel, uh or the off-topic channel.

And if I'm an administrator, notice that I get a manage link, and over on the right, since this person is not an administrator, I do not see those. OK. Let us try a fun thing, which is first to upload an image. And this is demonstrating the ability to upload a file.

So I'll click the Lakeside Campfire file and upload that and say, here's a nice image. And the file is stored in the database as uh as bytes and we're presenting it here in real time onto the chat application and I'll go ahead and add a nice emoji to that. There we go, that looks good. I've opened up a terminal on the left and I'll use the elements db command to drop me into the Postgres instance.

One of the nice things about working with Elements is you can drive the user interface directly from the user from the database. So if I paste in this SQL query, what it does is it inserts into messages something that says hi from the database, and we see that show up immediately in the user interface on the right. It's really nice for being able to drive interfaces like this, both for testing and also some, there's some real use cases where you'll want to do that even in production. To summarize some of the features we've seen here, first we've got users and user roles and authentication.

You can log in using the email and password of the user, and we can see that some of the users are, are one of the user is an administrator, the others are regular members. Once you're logged in, we can see presence indication over on the right. So the Jonas user, myself, is logged in and the other users are currently logged out.

Real-time messaging we've seen a few times as I type into the message box here, it goes over the wire and gets broadcast to all the connected clients instantly. We're able to connect or add a file and that file goes into our database. And file uploading is really useful for all sorts of use cases. In this case we've demonstrated that we can upload a file, store it in our database, and present it back to the user.

So really cool chat application, and I hope you have a lot of fun. Go ahead and download it and you can use the scaffolding that already exists so that you can start off with this application and then you can customize it to your liking. Have fun building.