A modern, fully responsive real estate web platform built with vanilla HTML, CSS, and JavaScript — designed to help users explore, filter, and discover residential and commercial properties across India.
SmartAcres is a feature-rich frontend real estate platform inspired by real-world property websites. It includes an advanced property search system, multiple dedicated pages, interactive modals, an EMI calculator, and a clean, professional UI — all without any frameworks or build tools.
- Search by city name
- Filter by listing type — Buy or Rent
- Filter by bedroom count — 1 BHK to 4+ BHK
- Filter by property type — Apartment, Villa, Flat
- Filter by price range — ₹50L to above ₹2Cr
- Filter by amenities — Parking, Gym, Swimming Pool
- Featured Properties section with dynamic property cards (generated via
script.js) - All Properties page (
listings.html) with full grid layout - Commercial Properties page (
commercial.html) filtered from the same data - Property Detail page (
property-detail.html) with extended property info - Image Lightbox — Click to enlarge property photos with prev/next navigation
- Input: Property price, down payment %, interest rate, loan tenure
- Output: Loan amount, monthly EMI, total interest, total payment
- Login & Signup modal with client-side form validation
- Credentials stored in
localStorage— for demo purposes only - Persistent session across tabs (navbar updates on login/logout)
- Contact page (
contact.html) for user inquiries - Floating callback button for quick reach
- WhatsApp float button for direct chat
- Sticky inquiry bar with Call Now & Get Callback actions
- Contact Agent modal for individual property agents
| Page | File | Description |
|---|---|---|
| Home | index.html |
Hero, search, featured properties, testimonials, news, insights |
| All Properties | listings.html |
Full property grid |
| Commercial | commercial.html |
Office/commercial listings |
| Property Detail | property-detail.html |
Single property view |
| Contact | contact.html |
Inquiry form |
| Details | details.html |
Additional property details |
- RERA Certified, 4.8★ Rating, 100% Secure, 24/7 Support — trust badges
- Customer testimonials from buyers, tenants, owners, and builders
- Platform stats: 10,000+ happy customers, 500+ cities, 15,000+ properties
- Price Trends, City Insights, Housing Research cards
- Real estate News and Articles with article thumbnails
- Full semantic HTML5 with ARIA roles and labels
- Skip-to-content link
- Open Graph and Twitter Card meta tags
- JSON-LD structured data (
RealEstateAgentschema) - Lazy loading for all images
| Technology | Usage |
|---|---|
| HTML5 | Semantic markup, multi-page structure, accessibility (ARIA) |
| CSS3 | Responsive layout (Flexbox/Grid), animations, modal styles |
| JavaScript (ES6+) | Property rendering, filtering logic, modals, EMI calc, auth |
| Google Fonts | Outfit & Inter typefaces |
| Vercel | Deployment & hosting |
No frameworks, no build tools, no dependencies — runs directly in any browser.
SmartAcres/
├── index.html # Home page (hero, search, featured, insights, news)
├── listings.html # All residential property listings
├── commercial.html # Commercial property listings
├── property-detail.html # Single property detail view
├── contact.html # Contact / inquiry page
├── details.html # Additional property details
├── style.css # All styles (82KB — single stylesheet)
├── script.js # All JS logic (50KB — properties, filters, modals)
└── images/
├── nav.jpg / nav.webp # Hero background image
├── price-trends.png/webp # Research: price trends card
├── city-insights.png/webp # Research: city insights card
├── housing-research.png/webp # Research: housing research card
├── article-metro.png/webp # News: Bangalore Metro article
├── article-coliving.png/webp # News: Co-living article
├── article-festival.png/webp # News: Property festival article
└── property-banner.png/webp # Sell property CTA banner
No installation or build step required.
# Clone the repository
git clone https://github.com/nishtha-agarwal-211/SmartAcres.git
# Navigate to the project folder
cd SmartAcres
# Open in browser
open index.htmlOr simply open index.html in any modern browser (Chrome, Firefox, Edge, Safari).
SmartAcres is deployed on Vercel with automatic continuous deployment.
- Every push to the
mainbranch triggers a new production build - No build commands or environment variables required
- Signup/Login is implemented using browser
localStorage - This is a frontend demo only — no real backend or server
- No actual user data is stored or transmitted anywhere
- Suitable for portfolio/demo purposes; not production-ready auth
- Backend integration for real user authentication
- Dynamic property data via REST API or database
- Persistent search filters across page navigations
- Backend-powered contact form with email delivery
- SEO and Core Web Vitals optimization
- Full ARIA/keyboard navigation improvements
- Property wishlist with localStorage persistence
This project is built for learning, demonstration, and portfolio purposes.
It does not represent a production-ready real estate platform and uses mock data throughout.
Nishtha Agarwal
GitHub