Universal online real estate market for everyone! Realtor app allows users to find there dream homes or rental properties, and it also allows users to list their properties for rent or sale.
- Create a property listing
- Delete or edit listing property
- upload images of property
- Edit profile name
- Reset password
- separate pages for offer,rent and sale
- leaflet geolocation map
- Authentication using google service
- Fully responsive
- Single page application
| Stack | - | - | - | - | - |
|---|---|---|---|---|---|
| FrontEnd |
|
|
|
|
|
| BackEnd |
|
|
|
|
|
General requirement -
In order for those projects to work, you'll need to have:
- An IDE of your choice, but I'd really recommand Visual Studio code. If you do not own it yet, take a look here .
- Either clone the repo or download the app and open the folder in the cli
- To clone the repo locally by doing -
git clone https://github.com/Midhunkumar-se/realtor-react.git- Install all dependencies using the
npm installcommand - To do so, open your IDE, select the persistence Project and open the terminal, type
npm install
- Go to firebase app, create a Firebase project and register your app
- Install the SDK and initialize Firebase, take a look at the documentation here .
- Don't use my
firebase.jsfile, which is insidesrcfolder, because my firebase configuration is different from yours, please read the documentation mentioned in 2nd point. - Start the web server using the
npm startcommand. The app will be served at http://localhost:3000/
When you visit the Realtor application, the first page you will directed to the home page of the application.
- If you do not have an account, you will be able to access the home page , offer page, rent page, sale page, and sign-in page.
- On the home page header, you can see the app logo on the left side and three menus on the far right side - home, offer, and sign-in.
- If you have an account and logged in to that account, the sign-in option will be replaced with a profile option, which you will see later in this documentation.
- Below the menu header, There is a wide banner image along with the name of the respective house on the top left side of that image, and the cost of the respective house on the bottom left of that image.
- If you click on that image, you will be redirected to the listing page(you will see later in this section) of that clicked image.
- Below the banner image, you can see a list of recent offers house cards.
- If you click on "Show more offers" or "offer" (marked with a red border), you will be redirected to the offers page.
- The same applies to the "Places for Rent" and "Places for Sale" sections located below the recent offers list in home page.
- If you click one of the listed house cards in the application, you will be directed to the listed card detail page.
- On the top right of the image, you will see a copy link button (marked with a red border). You can click it to copy the URL of that listed page and share it on social media or other places.
- Below that image, you will see a down arrow (marked with a red border). Clicking on it will show you the details of the house and its location on the map.
1st row - Name of that house along with price of the house.
2nd row - Address of that house.
3rd row - First column is category whether house is for sale or rent 2nd column is dicount price.
4th row - The date of the listed card was posted.
5th row - Description of that house.
6th row - Facilities of that house.
7th row - Contact landlord button.
- When you click that 7th row button you will see landlord name in bold text and the house title in bold text, below that text area input and below text area input you see send message button (all marked in red border).
-When you click that send message button you will redirected to your default email provider in your system along with message you written in that text area and email of that landlord.
- Both authenticated and unauthenticated users can access the above features (both Home Page section and Listing Page section).
Since the core application is protected through authentication and authorization,If you click Sign in link in header menu, you will directed to Sign in page.
- If you do not have an account yet,go through registation process or you can use Demo user email and password which is below "continue with Google" button.
- And also you can register with your Gmail account.
If you forgot password click forgot password link in signIn Page or signUp Page you will directed to forgot password page.
- Write valid email on that input, A password reset link will be sent to your email to allow you to change your password.
After successfully logging in, you will be directed to the home page, and the 'Sign in' link in the header menu will change to a 'Profile' link.
- After clicking the Profile link, you will be directed to the My Profile page.
- On the profile page, you will see your name and email. Below that, you will find an edit link (which is used to edit your profile name) and a sign-out link (which is used to log out from the application).
- Below the edit and sign-out links, you will see a "Sell or Rent Your Home" button, which you can use to create a listing.
- Below that button, you will find "My Listings", which is a list of the house cards that you (the authenticated user) have created in the application.
After clicking "Sell or rent your home" button in profile page.
- You will be directed to "Create Listing page".
1st row - Click the button according to whether you are going to sell or rent your house.
2nd row - Enter the name.
3rd row - Enter the number of bedrooms and bathrooms.
4th row - Click the button to indicate whether a parking spot exists or not.
5th row - Click the button to indicate whether the home is furnished or not.
6th row - Enter the address of the house.
7th row - Enter the latitude and longitude of that address(in 6th row) you can find in Google map.
8th row - Enter the description of the house.
9th row - Click the button to indicate whether you will provide an offer. If you provide an offer, the 11th row will appear; otherwise, it will not.
10th row - Regular price of your home. If you want to rent out your home, the "\month" will be displayed next to regular price input box.
11th row - Discounted price of your home. If you want to rent out your home, the "\month" will be displayed next to Discounted price input box.
12th row - Upload the images(maximun 6 and each image file size should be less than 2mb).
13th row - Click this button to create a listing.
- Then you will redirected to you created Listing page
- And created house listing card add to My Listing in Profile page
In 'My Listing' list you can edit and delete those listings.
- In My Listing, on the first row and second column card, you will see a delete button marked with a red border. It is located in the bottom left corner.
- Clicking on that button you get warning alert "Are you sure want to delete?", if you click "Ok" button that house listing will be deleted.
In My Listing list you can edit and delete that listings.
- In My Listing, on the first row and third column card, you will see a pencil button marked with a red border. It is located in the bottom left corner.
- Clicking on that button you will directed to Edit Listing page. Edit Listing process is exact same as Create Listing.
In Profile Page You see edit link below your email click that and your name input box color changes to red and you can edit your name and finally click apply change link to update profile name.
In Profile Page You see sign out link below your email click that link to logout from the application and you redirected to home page.
- In header menu Profile link changes to Sign in link.
👤 Midhun Kumar
- Linkedin: @Midhun Kumar
- Github: @Midhun Kumar
Please ⭐️ this repository if you liked the project!