Leaseleaf: rent, leases and repairs for a small landlord
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.
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
@rpccall. 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.
Join the community
Get a weekly digest of new posts.
Comments· 0