https://github.com/kmneetusingh/assign1
This is a responsive real estate web application built with React and Tailwind CSS. It showcases modern property listings with filters, navigation, and a clean UI. Users can explore available properties, view detailed info, and add favorites for future reference.
https://github.com/kmneetusingh/assign1
framer-motion js json luicide-icons react react-router redux skeleton tailwind-css vite
Last synced: 2 months ago
JSON representation
This is a responsive real estate web application built with React and Tailwind CSS. It showcases modern property listings with filters, navigation, and a clean UI. Users can explore available properties, view detailed info, and add favorites for future reference.
- Host: GitHub
- URL: https://github.com/kmneetusingh/assign1
- Owner: KmNeetuSingh
- Created: 2025-07-19T07:24:06.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-19T10:05:29.000Z (11 months ago)
- Last Synced: 2025-07-19T12:09:04.737Z (11 months ago)
- Topics: framer-motion, js, json, luicide-icons, react, react-router, redux, skeleton, tailwind-css, vite
- Language: JavaScript
- Homepage: https://assign1-rho.vercel.app
- Size: 243 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 🏠 Real Estate Property Listing UI
A responsive and scalable frontend for a mock real estate platform built with **React.js**. This project showcases properties in a grid layout, detailed view pages, a favorites system, and essential filters — simulating a real-world property listing interface.
## 🎥 Video Demo
https://github.com/user-attachments/assets/a15ba3e2-95cd-4763-97dc-31696638f315
# 🔗 [**Deployed on Vercel**](https://assign1-rho.vercel.app/)
## 🖥️ Features
### 1. **Homepage** `/`
* Responsive grid of **12+ properties**
* Each card shows:
* Image
* Title
* Location
* Price
* "View Details" button
* **Filters**:
* 💰 Budget Range (Min–Max)
* 🏘️ Property Type (Apartment, Villa, Plot, etc.)
* 🛏️ Bedrooms (1BHK, 2BHK, etc.)
### 2. **Property Details Page** `/property/:id`
* Image **carousel**
* Embedded **Google Maps / Leaflet.js** map for location
* Detailed information: Price, Area, Description, BHK, Amenities
* “Enquire” button opens a **form popup**
### 3. **Favorites Page** `/favorites`
* Users can ❤️ **Save to Favorites**
* Favorite properties are stored in **localStorage**
* View all saved properties
---
## 🧰 Tech Stack
* **React.js** (Functional Components + Hooks)
* **React Router DOM**
* **Axios** for API calls (using [DummyJSON](https://dummyjson.com) / mock JSON)
* **Tailwind CSS** for styling
* **Vercel** for deployment
---
## ⚙️ Optional Enhancements
* ✅ **State Management** with **Redux**
* ✅ Loading skeletons using **react-loading-skeleton**
* ✅ Smooth transitions with **Framer Motion**
* ✅ Fully **Responsive Mobile Version**
* ✅ Error boundaries for fallback UI
---
## 📸 Screenshots
### Homepage
### Property Details
### Favorites
### 💖 Favorites Page
---
## 📦 Folder Structure
```
src/
├── assets/
├── components/
│ ├── Navbar.jsx
│ ├── PropertyCard.jsx
│ ├── FilterBar.jsx
│ └── ...
├── pages/
│ ├── Home.jsx
│ ├── PropertyDetails.jsx
│ ├── Favorites.jsx
├── context/ or store/
├── App.jsx
├── main.jsx
```
## Thanks...