Greenline: jobs, invoices and payments for a lawn care business

Customer booking, a crew job queue, comment threads that update live, invoices by email, and card payments.

All right, this is an amazing demo of an application built with Elements and Claude Code, uh, with the Opus 5.5 model. This is a lawn care app that demos a queuing system where you would queue jobs up and be able to, uh, mark jobs as completed, send a customer an invoice, let them pay the invoice, and chat back and forth with their customers. I've got two windows open here to demonstrate this. On the left hand side is going to be the company account.

Um, so actually on the left hand side I'll do the user. So we'll log in as maria@example.com and you can see these accounts down here at the bottom. That's where the demo information is and the password will be greenline1 and I'll log in. Authentication works out of the box as part of Elements, the Elements framework, and so it's built into the database that you have running on your machine.

You don't need to use an external service for it. Over on the right, I'm going to log in as crew@greenline.test and same password. I typed a text instead of test, but you can see that we get good error handling on the login page. And now when I log in on the right hand side in the in the company section, I'm seeing the queue.

So here's the bookings that I have upcoming, here's awaiting payment, and here's collected, and down below I've got the first queued job here scheduled for Friday, September 25th for Maria. So I'll go ahead and click that and I can see that the uh job is still open, it's scheduled, it hasn't occurred yet, and this is keeping track of the progress. Down below, I've got the customer details and a comment section. On the left is Maria's account, so I'll come over to Uh, the mowing one, I'll make sure it's the right one.

Yup. And then scroll down and leave a comment. I'll say something like the gate code is 1234 and post that. Note that the comments post immediately and they're available to all the connected browsers at once.

This is using the LiveTable feature of Elements. And over on the right, I can say, I got it, thanks. And the customer will see that right away. So this is a comment section.

This was built as part of the one shot initial application that Claude Code built. It didn't take very long at all to build this. Next up, let's go up to the top and pretend that we've already done this job now, and I want to mark it as complete. So I'll click this button, mark complete, and as soon as I do that.

I can, uh, oh, I've got one more button to click, uh, complete and invoice, so I'll do that. Note that the customer's UI changes immediately and it says the amount due is $65. So I can pay that by the card. And we'll simulate filling out a form now.

Adding in Stripe payments is very straightforward. You can ask Claude to do that as a next step, and it will do it in just a minute or two. It's not hard at all. So we just left it as a simulation so that we could get going pretty quickly.

Uh, without having to actually create a Stripe account, but you can do that. And if you need help with doing it, just leave a comment in the sections and uh I'll explain it or we can do another video. OK, now the status is showing paid, and that walks through the entire progress of, or the entire workflow for this. And if I go over to the customer or the uh the company's page again and I Queue, I now have 0 items in the queue and I've got 4 items that have been 4 jobs that have been completed.

So this is really a fully blown working application that was built in just a couple of minutes using Claude and Elements. Now let me show you one thing that you should do with applications like this. You want to make sure that after it's built, you can use Command Option I if you're on a Mac and Chrome and go down to Lighthouse and click the Analyze Page load. And that'll take a second or two, and it will give you a score of how well your, uh, your page is, is going to do on SEO on accessibility, best practices, and so on.

When you're running a system for a real business, one of the things that's really helpful for you or for your IT person is to be able to log into the database and make changes to the data or run queries on the data. So I've used elements db to log into the local database, which you can also do on deployed machines because it's your database, you control it. And I'm going to paste in a query that sets this job's state or progress to invoice sent from paid, and when I press enter, the database is updated and note that the user interface update updates instantly, and that's because the data is published out to the user interface and the user interface reactively updates using the Elements HTML language. Once you're done with this video, scroll down and you can check out the specs that will show the agent, time to build and cost to build this particular demo, and you can click the run it yourself button.

We've got two modes here. You can start with the finished app. This will install Elements and create the application from this scaffold, so you can start with this finished app and extend it however you would like, or you can start from scratch and build it using the prompt that that we use. To build this app ourselves.

If you scroll down a little bit, you want to try this prompt out on another service, uh, for example, to see how well your agent does it without Elements, or if you want to try it on a different platform, copy the prompt itself, and you can paste that anywhere you'd like. If you'd like to see the code for this, uh, down at the final area here is the code on GitHub, and if you click that, it'll take you over to git_hub and you can explore the code that the agent generated. All right, thanks a lot, and I hope you guys have a lot of fun building.