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

Greenline needed customer booking, a crew queue that stays current, comment threads on each job, invoices by email when work is done, and card payments that mark a job paid. Each of those is a part of Elements, so the agent spent its 14 minutes on the lawn care business itself. **What Elements gave the app** - **Live jobs.** Jobs are a LiveTable that the crew's queue, each customer's list and each job page all watch. Bookings, completions and payments reach every open page as they happen, so a new booking lands in the crew's queue and a payment shows on the customer's page live. - **Live comment threads.** Comments are a LiveTable opened per job. A comment appears for the crew and the customer at once, carries its author from the session, and schedules an email to the other side. - **Booking and crew actions as function calls.** The booking form and the crew's complete and invoice buttons call `@rpc` functions, with types checked from the page to the database. - **Invoices from background jobs.** Completing a job schedules its invoice in the same transaction, so every finished job has its invoice on the way. The job prices it from the service and emails the customer a payment link. - **Card payments.** Checkout charges exactly what the invoice says. The return page and the webhook both mark the job paid, and the payment is recorded once, whichever arrives first. - **Data from SQL files.** Two migrations define the business and seed a crew account, two customers, three services, and jobs in every status from scheduled to paid, with comment threads. **What the project server gave the agent** The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building. **What shipped** The app type-checks with zero errors and all 24 tests pass. Every page works on desktop and phone, and live updates arrive across tabs, such as a new booking in the crew's queue and a comment on a job.

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.