# Realty Reach(RealEstateApp)

Built a RealEstateApp using HTML,tailwind CSS,javascript,Web APIs(local storage),modal,google map api.

Features of the app:

• As a user, I want create Real Estate App, where user can search for Listing, Open house, Agents, His office and members involved.

• As a user, I want to be able to navigate to each page via the nav bar.

• As a user, I should see all the listings available in the website.

• As a user, When I search by City or MLS status(active/cancelled/expired) it should display the listings pertaining to it.

• As a user, When I click on Heart symbol in any card in listings page, it should add the card details to local storage.

• As a user , When I click on Favourites button in filter Menu in listings page, it should retrive the cards from local storage and display it in listings page

• As a user, When I click on any card in listings page, it should display modal and the images should display in carousel with the same card details

• As a user, When I click on pagination on the bottom of the listings page, it should display 5 items per page.

• As a user, when I click on the dropdown in the open house page, it should display a list of cities where open houses are available.

• As a user, when I choose one city, it should display a picture of the listing, date and time of the open house, and the details of the listing including address, list price, year built, lot size, number of bedrooms, number of bathrooms, and direction.

• As a user, when I want to be contacted about a open house, I can fill out the form and submit it.

• As a user, when I click on 'View Submission', I should see my form submission details.

• As a user, when I click on dropdown menu in members page, it should display a list of top members fetched using member details API.

• As a user, when I choose one member, it should dispaly a card along with the member full name and its details.

• As a user, when I choose a member, it should dispaly the member image in the card from the image name that will be retrieved from the local storage.

• As a user, when I click on a member, the member location will be displayed to the right of the page in google maps.

• Office Page: As a member, when I click on the "Agent office" option on the navigation bar, I am redirected to the landing page of Agent office

• As a user, in the agent office landing page, I can fill in my information in the form on the side and it will be stored in the local storage for Realty Reach to contact me.

• As a user, I can select a State/Province of my choice from the dropdown menu on the landing page

• As a user, when I click on the dropdown menu, I can see the names of states/provinces in which Realty Reach has office spaces

• As a user, when I choose the state/province , I can see the details of the office space, such as the office name, address, contact details

• As a user, I can see a picture next to the office details

• As a user, when I choose the state/province, I can see the location of the office as displayed to the right of the page in google maps.

• As a user, when I click on the "Select" option, I am redirected to the landing page.

Deployed site:

Mock demo:

• Homepage

• Listings Page

• Open House

• Agents ![image]()

• Members

• Agent Office

• responsive

• local storage

• Modal

• filter / input (interactive)

• pagination

• responsivesness

• dropdown

• googlemap location

Image of the landing page

Dropdown menu

Offices data