Remix

Make your own version of TOUR-HOMES

Edit the prompt below and generate a customized version in seconds.

Original by Oyetayo Abdullahi

Describe your app

🧠 MASTER PROMPT — TOUR-HOMES (ESTATE MVP)
PROJECT NAME: TOUR-HOMES

Build a multi-page real estate agency website MVP called TOUR-HOMES using pure HTML, CSS, and vanilla JavaScript only.

No frameworks, no libraries, no backend.

All dynamic data must be handled using JavaScript and stored using localStorage.

The website is for showcasing apartments and houses for tourists, tenants, and investors, and simulating bookings and reviews.

🎯 CORE OBJECTIVE

Create a premium, modern real estate portfolio website that:

Displays 20+ property listings
Allows users to browse and search properties
Shows full property details dynamically
Simulates booking functionality (frontend only)
Allows users to leave star ratings and comments
Stores bookings and reviews in localStorage
Includes dark mode and light mode toggle (persisted)
Has a clean luxury real estate UI
🏗️ FILE STRUCTURE

Use this exact structure:

TOUR-HOMES/
│
├── index.html
├── property.html
├── booking.html
├── contact.html
├── admin.html
│
├── assets/
│
│   ├── css/
│   │   ├── home.css
│   │   ├── property.css
│   │   ├── booking.css
│   │   ├── contact.css
│   │   └── admin.css
│   │
│   ├── js/
│   │   ├── data.js
│   │   ├── home.js
│   │   ├── property.js
│   │   ├── booking.js
│   │   ├── contact.js
│   │   └── admin.js
│   │
│   └── images/
│       ├── logo/
│       ├── banners/
│       └── properties/
│
└── README.md
🏡 PROPERTY DATA REQUIREMENTS

Create a data.js file containing 20+ properties.

Each property must include:

id (unique)
title
location
type (apartment or house)
pricePerNight
bedrooms
bathrooms
guests
images (use safe Unsplash placeholder URLs)
amenities (array of strings)
featured (boolean)
📄 PAGE REQUIREMENTS
1. HOME PAGE (index.html)
Hero section with search bar
Featured properties section
Call-to-action button to explore properties
Clean premium landing page design
2. PROPERTY PAGE (property.html)

This page handles BOTH:

A. Listings Mode
Displays all 20+ properties in a grid
Search bar (location or name)
Filters:
price range
property type
number of guests
B. Single Property Mode

Triggered using:

property.html?id=3

Shows:

Image gallery
Full property details
Amenities
Price per night
Reviews section
“Book Now” button
3. BOOKING PAGE (booking.html)
Check-in date
Check-out date
Guests input
Automatic price calculation:
(number of nights × pricePerNight)
Confirm booking button
Save booking to localStorage
Show success modal
4. CONTACT PAGE (contact.html)
Simple contact form (frontend only)
5. ADMIN PAGE (admin.html)
Display all bookings from localStorage
Display all reviews from localStorage
Simple dashboard UI (no backend)
⭐ REVIEWS SYSTEM
Users can submit:
star rating (1–5)
comment text
Reviews must be stored in localStorage
Reviews are linked to a specific propertyId
Display only relevant reviews per property
📅 BOOKING SYSTEM
Users select:
check-in date
check-out date
number of guests
System calculates total price:
(number of nights × pricePerNight)
On confirmation:
store booking in localStorage
include timestamp and propertyId
show success message
🎨 UI / UX REQUIREMENTS
Premium luxury real estate aesthetic
Clean white minimal design
Dark mode + light mode toggle (saved in localStorage)
Fully responsive (mobile-first)
Card-based layout system
Smooth spacing and modern typography
Subtle hover animations and shadows
⚙️ TECH RULES
Pure HTML, CSS, JavaScript only
No frameworks (React, Vue, etc. not allowed)
No backend or API calls
No external state libraries
Use localStorage for:
bookings
reviews
theme preference
🧠 FUNCTIONAL REQUIREMENTS
property.html dynamically switches between:
listing grid mode
single property mode (via query param id)
search + filters must work on frontend data
booking system must calculate nights correctly
reviews must render per property
theme toggle must persist across all pages
🚀 FINAL OUTPUT

A fully functional, multi-page real estate agency MVP called TOUR-HOMES, behaving like a modern Airbnb-style booking platform, with clean UI, working search/filter, booking simulation, and review system—all using only frontend technologies and localStorage.

Free to use. No credit card required.