House Hub

About the Project: HouseHub is a modern real estate platform built with vanilla JavaScript and Tailwind CSS. It allows users to browse, buy, sell, and rent properties without agents or commissions — designed with a clean UI and smooth user experience.

Key Highlights: Features a fully functional property search card, a responsive six-property listing grid, and a modular component-based JavaScript architecture built without any framework.

Project Details

What's Inside

• Header — Fixed navigation bar with animated mobile menu toggle.
• Hero — Full-screen banner with a property search card and filter tabs.
• About — Platform overview with a feature list and image with play button.
• Services — Three-step guide explaining how HouseHub works.
• Properties — Grid of six featured property cards with ratings and pricing.
• Contact — Call-to-action section with an email newsletter subscription form.
• Footer — Site links, contact details, and social media icons.
• Back to Top — Scroll-triggered floating button for quick page navigation.

Key Features

• Property Search Card — Filter properties by category, min price, and max price.
• Buy / Sell / Rent Tabs — Interactive tab switching with active state highlighting.
• Property Listings Grid — Six cards showing area, beds, baths, price, and rating.
• Responsive Design — Fully responsive layout built with Tailwind CSS utility classes.
• Mobile Navigation — Animated hamburger menu that closes automatically on link click.
• Newsletter Form — Inline email subscription form with a rounded submit button.
• Back to Top Button — Smooth scroll button that appears after scrolling 300px.
• Component Architecture — Each section is a separate JS module for clean code structure.

Technologies Used

• HTML5 — Semantic markup with modular root mount points for each section.
• Tailwind CSS (CDN) — Utility-first CSS framework for all layout and styling.
• Vanilla JavaScript (ES Modules) — Component-based architecture without any framework.
• Ionicons — Icon library used throughout for UI and navigation icons.
• League Spartan (Google Fonts) — Clean, modern typeface used across the entire site.

Project Structure

house-hub/
│
├── index.html                 # Main HTML with component mount points
│
├── assets/
│   ├── js/
│   │   ├── app.js             # Main entry point importing all components
│   │   ├── header.js          # Header component with mobile menu
│   │   ├── hero.js            # Hero section with search card
│   │   ├── about.js           # About section with feature list
│   │   ├── service.js         # Services cards component
│   │   ├── property.js        # Property listings grid
│   │   ├── contact.js         # Contact and newsletter section
│   │   ├── footer.js          # Footer component
│   │   └── backTop.js         # Back to top button
│   │
│   └── images/                # Hero background, property photos, about image
│
└── README.md                  # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/house-hub.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update property listings and details in <code>property.js</code></li>
      <li>Edit navigation links and brand name in <code>header.js</code></li>
      <li>Change hero text, tabs, and search options in <code>hero.js</code></li>
      <li>Update contact info and footer links in <code>footer.js</code></li>
      <li>Modify about section content and features in <code>about.js</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

Live project ➜ Live Demo