Leaseleaf: rent, leases and repairs for a small landlord

Leaseleaf: rent, leases and repairs for a small landlord

00 Markdown

Tenants pay rent by card or autopay and report repairs with photos. The landlord sees a live rent roll and a repair queue.

Run it yourself

Get the finished app on your own machine, ready to change however you like.

VS Code Command Palette⇧⌘P
leaseleaf -scaffold=elementscode/demo-leaseleaf

Press 'Enter' to confirm your input or 'Escape' to cancel

Press ⇧⌘P in VS Code and choose Elements: New App. Then paste this line and press Enter.

New to Elements? Install Elements first.

The code

How it's built

Leaseleaf needed a live rent roll, rent by card and autopay, a maintenance queue with photos and comments, tenant invites, and scheduled reminder emails. Each of those is a part of Elements, so the agent spent its 27 minutes on the property app itself.

What Elements gave the app

  • Live rent and maintenance. Rent charges, maintenance requests and their comments are LiveTables, so a payment shows as paid on the landlord's rent roll the moment it lands, and a tenant sees a request move to scheduled or done as the landlord changes it.
  • Rent by card and autopay. A tenant pays a month's rent through Stripe or saves a card for autopay, each with one @rpc call. Payments are recorded once whether the return page or Stripe's webhook arrives first. Until a Stripe key is set, the pay button opens a test checkout inside the app that records rent the same way, and in production the app registers its own webhook the first time a tenant pays.
  • One daily job. A one-line cron schedule runs the rent cycle every morning at 9: it creates the month's charges, charges autopay cards on the due date, and emails a reminder three days before and a late notice the day after, each once.
  • Maintenance updates by email. Only the landlord changes a request's status, and each change emails the tenant. Tenants attach photos when they file a request.
  • Invites and sessions. The landlord invites a tenant by email, and accepting the invite sets a password, starts the lease and creates the first charge in one step. Landlord and tenant pages each check the signed-in role.
  • Data from SQL files. Migrations define the app and seed a landlord, two buildings with eight units, seven tenants, three months of rent with two tenants behind, and a maintenance queue with photos.

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 35 tests pass. Every page works on desktop and phone. A real sandbox payment went through Stripe end to end.

Comments· 0

Join the community

Get a weekly digest of new posts.

Sign up