PrimeHomes is a responsive Client-Side Web Application (SPA) designed to simulate a modern real estate platform. Built with React JS, this application allows users to search for properties, view detailed specifications, and manage a "Favorites" list using interactive drag-and-drop functionality.
This project was developed for the 5COSC026W Advanced Client-Side Web Development module.
| Desktop Search | Property Details | Mobile View |
|---|---|---|
 |
 |
 |
Users can filter the JSON dataset of 7 properties using multiple simultaneous criteria:
- Type: House, Flat, or Any.
- Price: Minimum and Maximum price ranges.
- Bedrooms: Minimum and Maximum bedroom count.
- Date Added: Search by specific dates or date ranges.
- Postcode: Filter by area code (e.g., BR1, NW1).
- Powered by React UI Widgets for enhanced consistency and accessibility.
- Dynamic Routing: Each result links to a dedicated property page.
- Image Gallery: Custom implementation allowing users to view a large main image and browse 6-8 thumbnail images.
- Tabbed Information: Uses React Tabs to organize the Long Description, Floor Plan, and Google Map integrations.
A robust system to manage saved properties:
- Drag-and-Drop: Drag properties directly into the favorites sidebar.
- Click-to-Save: "Heart" icon buttons for accessibility.
- Management: Remove items by dragging them out or clicking delete. Clear all favorites instantly.
- Persistency: The Favorites list is displayed on the main Search Page.
- Fully responsive layout utilizing CSS Grid and Flexbox.
- Optimized for both Large Screens and Tablet/Mobile (< iPad Landscape).
- Frontend Library: React JS (Create React App).
- Styling: Custom CSS with hand-written media queries (No templates used).
- Data Source: Local JSON file containing 7 diverse property listings (No server-side database).
- Testing: JEST Framework.
- CSP (Content Security Policy): Implemented to prevent XSS attacks.
- Sanitization: HTML encoding ensures protection against injection vulnerabilities.
To run this project locally on your machine:
- Clone the repository:
git clone [https://github.com/](https://github.com/)[YOUR_USERNAME]/PrimeHomes.git
- Navigate to the project directory:
cd PrimeHomes - Install dependencies:
(Note: The
node_modulesfolder is excluded from this repo to save space )npm install
- Run the application:
Open https://Sanara-Perera.github.io/PrimeHomes to view it in the browser.
npm start
This project includes 5 meaningful tests covering critical logic using the JEST framework.
To run the test suite:
npm test