HouseHub - Property Platform

About Project: A responsive property management platform for buying, selling, and renting homes without agents or commissions. Built with modular JavaScript components, Tailwind CSS utility classes, and smooth animations organized in clean ES6 modules that property platforms can customize with search filters, property cards, newsletter subscription, mobile navigation, and much more.

What I learned: Created reusable component architecture with ES6 modules and template literals, implemented mobile-first responsive design with Tailwind utility classes, built interactive tab system and search functionality with vanilla JavaScript, and much more.

Personal Note: I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.

Project More Details

What's Inside

• Header Component - Fixed navigation with logo, menu links, sign-up button, and mobile hamburger menu
• Hero Section - Full-width banner with background image, overlay, headline with highlighted text, and property search card
• Search Card - Property search form with tabs for Buy/Sell/Rent, category dropdown, price range filters, and search button
• About Section - Two-column layout with image, video play button with pulse animation, description text, and feature list
• Services Section - Three cards explaining platform features with icons, titles, and descriptions
• Featured Properties - Grid of property cards showing images, details, pricing, ratings, and favorite buttons
• Contact Section - Call-to-action with contact button and newsletter subscription form
• Footer Component - Brand information, navigation links, contact details, and social media icons
• Back to Top Button - Floating button that appears on scroll for quick page navigation
• Mobile Menu - Full overlay navigation with smooth height transition and icon toggle

Technologies Used

• HTML5 - Semantic structure with proper meta tags and accessibility attributes
• Tailwind CSS (CDN) - Utility-first styling with custom configuration for League Spartan font
• JavaScript (ES6+) - Modular components using imports, template literals, and DOM manipulation
• Google Fonts - League Spartan font family for modern typography
• Ionicons - SVG icons for UI elements, property details, and social media
• CSS Animations - Smooth transitions, hover effects, pulse animations, and scroll-triggered visibility
• Responsive Design - Mobile-first approach with Tailwind breakpoints (sm, md, lg, xl)
• ES6 Modules - Component-based architecture with separate files for header, hero, about, services, properties, contact, footer, and back-to-top

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 video button
    │   │   ├── 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
    

Key Features

• Fully Responsive Design - Works seamlessly across all devices from 320px mobile to desktop screens
• Modular Component Architecture - Each section built as independent ES6 module for easy maintenance
• Mobile Navigation - Hamburger menu with smooth height animation and icon toggle
• Interactive Search Tabs - Buy/Sell/Rent tabs with active state styling and smooth transitions
• Property Search Form - Text input, category selector, and price range filters for property discovery
• Property Cards Grid - Responsive grid layout with images, details, pricing, ratings, and favorite buttons
• Video Play Button - Animated pulse effect on about section video placeholder
• Newsletter Subscription - Email input form with inline submit button in rounded container
• Scroll-Triggered Button - Back to top button appears after scrolling 300px with fade-in animation
• Hover Effects - Color transitions on buttons, links, and property cards
• Template Literal Rendering - Components use data objects and template strings for content generation
• Cross-Browser Compatible - Tested on modern browsers with Tailwind CSS compatibility

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 platform name and content in component data objects</li>
      <li>Modify Tailwind configuration in <code>index.html</code> script tag</li>
      <li>Replace property images in <code>assets/images/</code> folder</li>
      <li>Update contact details in footer component</li>
    </ul>
  </li>
</ol>

Customization

• Text Content: Edit data objects at the top of each component file - update platform name, property details, descriptions, and contact information
• Colors: Modify Tailwind configuration in index.html or use Tailwind utility classes throughout components

  // Change primary color from green-600 to your color
  // Find and replace: bg-green-600 → bg-blue-600
  // Also update: text-green-600, border-green-600, etc.

• Images: Replace files inside assets/images/ with your property photos (update image paths in component data objects)
• Fonts: Change the Google Fonts link in HTML <head> section and update Tailwind config with new font family
• Properties: Add or remove property cards by editing the propertyData.list array in property.js
• Services: Update service cards by modifying the serviceData.services array in service.js
• Navigation: Edit menu items in headerData.menu array in header.js
• Footer Links: Modify footer columns and contact details in footerData object in footer.js
• Search Options: Update categories and price ranges in heroData object in hero.js

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

You can view the live project here ➜ Live Demo