Real Estate Website
Boutique estate agency website — searchable property listings with URL filters, photo galleries, saved homes, a mortgage calculator and viewing requests
Vibely
Creates your own copy. Free to start.
Designed for
- Independent estate agents and realtors who want their own site instead of a portal profile
- Letting agents and property managers advertising homes to rent
- Developers marketing a new-build scheme or a small portfolio of homes
- Builders who need property search, filters and enquiries already working
Key highlights
About this template
A complete website for a fictional boutique agency, Homestead & Co.: a hero search, sixteen seeded properties for sale and to rent, a detail page for each with a photo gallery, agent profiles and a contact page. It runs as a real app from the first click, not a static mockup.
Every filter on the listings page — buy or rent, neighbourhood, property type, price range, bedrooms, bathrooms, sort order and grid or list view — lives in the URL. A filtered search can be bookmarked, shared or refreshed and comes back exactly as it was, and the back button steps through the changes. On a phone the same filters open in a bottom sheet with a live result count.
The numbers are handled with care. Prices are stored as whole cents, and the mortgage calculator works out deposit, loan, monthly repayment, total interest and total repaid in integer cents, so the figures on screen always add up. Rentals get a move-in cost breakdown instead. Saved homes persist to localStorage through a provider that waits until it has read storage before it writes, so an empty first render can never wipe a visitor's shortlist.
Best use cases
Independent estate agency
Your own branded site with search, listings and enquiries, rather than a profile page on someone else's portal.
Lettings and property management
Rentals show monthly rent, the weekly equivalent, deposit and move-in costs, with an availability date on every home.
New-build or development launch
Present a set of homes with galleries, key facts and a calculator that helps buyers see what they can afford.
Any searchable catalogue
The URL-driven filter, sort and saved-items patterns fit holiday lets, car dealers or anything else browsed by attributes.
Getting started
Step 1: Remix this template
Click Use template. Vibely copies the full source into a new project, boots a sandbox and brings the preview up — you are looking at a running app, not a static mockup, before you have typed anything.
Step 2: Describe your first change
Tell the chat what you want in plain language. It reads the project the same way you would, edits the files and shows you the result in the preview. You can also open the code and edit it directly at any point.
Step 3: Put your listings in
Properties, agents, neighbourhoods and agency details are all in src/lib/listings.ts. Replace the seed data and every page — search, listings, detail, agents and saved — follows.
Step 4: Rebrand it
The palette is a small set of oklch tokens (paper, spruce and clay) in src/styles.css. Change them once and the whole site follows, including the calculator and the footer.
Step 5: Add your photography
Ask the chat to generate property imagery, or upload your own. Every listing reads its gallery from the same data module, and the files live in src/assets.
Step 6: Connect a database
Enquiries are validated but not sent anywhere yet. Connect Supabase so listings and viewing requests live in a database, and agents can add homes without editing code.
Publish when it looks right
Publish gives the project a live URL. Connect a custom domain in project settings, or export the whole codebase to GitHub and deploy it yourself — nothing here is locked in.
Conclusion
A property site lives or dies on search that remembers what you asked for, photos that load quickly and numbers you can trust. Those are the parts already built here, so you can spend your time on the homes themselves.
Features & capabilities
Filters in the URL
Buy or rent, neighbourhood, type, price, beds, baths, sort and view are all search params — shareable, bookmarkable and back-button friendly.
Grid and list views
Photography-led cards in a grid, or a wider list with summaries, with active-filter chips, clear-all and an empty state.
Gallery and lightbox
An editorial photo mosaic on desktop, a swipeable gallery on phones, and a full-screen lightbox with thumbnails and keyboard navigation.
Saved homes
A heart on every card saves the home to localStorage, hydrated after mount so the shortlist survives a refresh without a hydration mismatch.
Mortgage calculator in cents
Price, deposit, rate and term produce a monthly repayment, total interest and total repaid computed in whole cents. An estimate, not financial advice.
Viewing requests
A react-hook-form and zod form with inline errors, a date for viewings and a success state. Nothing is sent until you connect a backend.
Agent profiles
Each agent has a profile with their neighbourhoods, contact details and every listing they look after.
Designed for phones
Filters open in a bottom sheet and every property page keeps the price and a Request viewing button pinned to the bottom of the screen.
