bradtraversy / house-marketplace

House marketplace built with React and FIrebase

House Marketplace

Find and list houses for sale or for rent. This is a React / Firebase v9 project from the React Front To Back 2022 course.

Usage

Geolocation

The listings use Google geocoding to get the coords from the address field. You need to either rename .env.example to .env and add your Google Geocode API key OR in the CreateListing.jsx file you can set geolocationEnabled to "false" and it will add a lat/lng field to the form.

Run

npm start

house-marketplace's Issues

when mapping the imgUrls, no need to use listing.imgUrls[index]

house-marketplace/src/pages/Listing.jsx

Line 52 in 2cb8d6f

background: `url(${listing.imgUrls[index]}) center no-repeat`,

we can just write

background: `url(${url}) center no-repeat`

since we already has url as element.

EditListing.jsx --> Listing imageUrls are no longer available on re-submit when editing

The Edit Form currently doesn't display the images already stored per listing, and forces the user to re-upload any images that they still want to show.

This also consumes more memory in Firebase Storage because the previously stored images aren't actually being deleted, the field is just being adjusted in the firestore document.

Create-Listing lecture 100 / 101 returns invalid address when geocoding enabled.

Inputting the geocode coordinates manually works but when switching to geocode api address keeps being flagged "Please Enter a valid address" message. Checked my geocode api and key and is active and running.

CreateListing offer error

Does anyone else when testing run into an error where for some reason certain entries for Regular Price and Discounted Price can trigger the error catch from toast even if logically it is sound? For example:
Regular Price: 10000 and Discounted Price 8000 has been giving me issues.
Then, once the error is triggered, even if you remove the offer section, no matter what value you put in for regular price will trigger that same error message.
I hope this makes sense.

we can't return something from forEach

house-marketplace/src/components/Slider.jsx

Lines 25 to 30 in 2cb8d6f

	querySnap.forEach((doc) => {
	return listings.push({
	id: doc.id,
	data: doc.data(),
	})
	})

Here we don't need to return something. Even If we write return, forEach method doesn't return anything.

Why React-Helmet?

Hello Mr. Traversy! I learned your "React: Front to Back 2022" course with excitement. That's cool. I want to ask that, you didn't use 'react-helmet' in this project, but in the Listing page, Helmet was put. If there is no helmet, the project is still working as well as before. Why do we need the helmet here?

getFirestore() missing app parameter

Comparing our initialization of the firestore db, we do not pass app to the getFirestore function as in the example from https://firebase.google.com/docs/web/setup.

house-marketplace/src/firebase.config.js

Line 16 in 2cb8d6f

export const db = getFirestore()

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's [Firebase project configuration](https://firebase.google.com/docs/web/learn-more#config-object)
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Just trying to understand when it is and isn't required. FirestoreClient reference here.

Do you have different privileges for users?

Are there users who can become administrators and others who can only consume the content?

Proposed Fix for Mobile on Contact Page

When the height of the mobile screen is less than 720px, the button "Send message" does not show because it has no margin-bottom as the others classes like .explore, .listingDetails, etc.

Fix:
.pageContainer {
margin-bottom: 10rem
}

mistake sorry idk how to delete

mistake sorry