🏠 Orange Nest is a client-side property search web application developed as part of a university coursework project. Inspired by platforms like Rightmove, the application allows users to search, view, and save property listings using multiple criteria, entirely on the frontend.
🔗 Live Demo: https://orangenest.saadmaz.com
This project was built to demonstrate:
- Practical use of React JS for UI development
- Client-side data handling using JSON
- Multi-criteria search functionality
- State management and browser localStorage usage
- Responsive web design and accessibility principles
No server-side technologies were used, in line with coursework requirements.
- JavaScript (React JS) – UI components, state, and lifecycle management
- HTML5 – Semantic structure
- CSS3 – Layout, styling, and responsive design
- JSON – Property data source
- Local Storage – Favourites persistence
Users can search properties using any combination of:
- Property type (house, flat, any)
- Price range (minimum & maximum)
- Bedroom count (minimum & maximum)
- Date added (after or between dates)
- Postcode area (e.g., NW1, BR1)
Search works with one or multiple criteria simultaneously.
- Results displayed with image, price, and short description
- Clean, user-friendly layout
- Each result links to a dedicated property details page
Each property includes:
-
Large featured image with image gallery (6–8 images)
-
Thumbnail navigation
-
Short property summary (type, price, location)
-
React Tabs displaying:
- Long description
- Floor plan
- Google Map location
-
Add properties to favourites via:
- Drag & drop
- Favourite button/icon
-
Prevents duplicate entries
-
Remove favourites by:
- Dragging out
- Delete button
-
Clear entire favourites list
-
Favourites persist using browser localStorage
-
Favourites displayed on the search page
-
Fully responsive layouts
-
Two main breakpoints:
- Large screens
- Screens smaller than iPad landscape width
-
Implemented using CSS Grid, Flexbox, and media queries
- Clear visual hierarchy with headings and spacing
- Consistent color palette and typography
- Logical grouping of related UI elements
- Balanced layouts and visual harmony
- Design focused on usability and clarity
- Client-side protection using Content Security Policy (CSP) concepts
- Safe rendering through JSX
- No direct HTML injection
- Awareness of frontend security best practices
- This project was developed strictly for academic purposes
- Not actively maintained
- UI and architecture reflect coursework constraints
- Not representative of my current production-level standards
Orange Nest represents a key stage in my transition from static websites to interactive, data-driven React applications. It demonstrates my ability to translate detailed technical specifications into a fully working frontend system.
For my latest and most polished projects, visit:
— Saad Mazhar