Haven Property Group
A React + Vite real-estate SPA — property listings, detail pages, protected user accounts, and social login, hosted on Firebase. "Providing reliable land since 1999" is the pitch on the page; the interesting bit is that the auth, routing, and property queries are all wired up against a live Firebase back-end from the client.
A property directory with real accounts
Haven is a small real-estate directory: a home page with a hero + property cards, a per-property detail page, and a full user-account flow so people can log in with email, Google, or GitHub. Registered users get a profile they can edit, and there's a newsletter signup + customer-care and copyright routes as flat content pages.
Nine routes in a client-side router
Every route below is defined in the bundle:
What you can actually do
🏠Browse listings
Cards on the landing list properties with location, price, status (apartment / villa), and a "View Property" call-to-action.
🔍Property detail
Each /property/:id route pulls
location, price, facilities, and "Additional
Info:" for a single listing.
👤Real accounts
Email/password with Firebase Auth, plus
one-tap Google and GitHub sign-in. Session
survives reload via
onAuthStateChanged.
🛡️Protected routes
/profile and
/profile-Edit guard against
unauthenticated access and redirect through
login using
useNavigate + a context.
✏️Profile edit
Change your display name and photo URL —
writes go through Firebase Auth's
updateProfile.
💌Newsletter
A dedicated route for newsletter subscription, plus a subscribe strip on the landing.
🎞️Motion & carousels
AOS drives scroll-triggered fade/slide entrances; Swiper handles the marketing carousels on the hero.
🔐reCAPTCHA
Google reCAPTCHA is loaded on the register flow to blunt automated signups.
Tech, verified from the live build
Everything in the "verified" set is provable — either the file name matches the framework's convention, or the library name appears in the built JS bundle.
createBrowserRouter, Outlet, useLoaderData)
Vite
Tailwind CSS
Firebase Auth
Firestore
AOS (scroll animations)
Swiper
reCAPTCHA
Firebase Hosting
Honest retrospective
- Keep the source. This is the big one — I ended up with the deployment and no repo. Since then every project I ship starts with a GitHub repo before the first line of code.
- Move secrets off the client. A Firebase-only app leaks its config to the browser by design; that's fine for a demo, but a production build would need real Security Rules and Cloud Functions to hide anything sensitive.
- Server-side rendering. Vite gives a fast dev loop but the site is a client-side SPA — meta / OG tags for each property page can only be right once the JS runs. The Ecobazar rebuild uses Next.js App Router to avoid this exact problem.
See the app for yourself
The demo is still live on Firebase — everything on this page is one click away.