I want to make a property discovery bot which will help people in finding 5 properties based upon input given which are city, for rental purposes or buying purposes, type of property (house, flat, pg, hostel, commercial area (for office place), for production, renting for a limited period stay and price range of either rent (per month, if applicable) or buying price, these all thing will be there with each property, stored in the backend as metadata. So, 1st we will make its frontend, where firstly the name of the company is "Propertykhojo" and and at the landing page user will be asked in which city they want the property so that the 1st page will look like the name of the company at vertically centered and also above the horizontally centered line so that the field where the city is to be entered will be at center. The center search bar has the following specifications:
- Corners are rounded with a radius of 10 px and the text in the search bar, which is in the background and can't be removed, "Place where you want to search for property" . and it will be in 80 percent width, so in rest 20 percent width on the right side will show written "locate" and an icon which is given in an attachment, clicking on which will lead to fixing of the location in which we need to find the property
Loading...
When the locate is clicked, then locate the location on map by calling free api from google maps. The width of the search bar should be 50 percent of overall horizontal width. On clicking on locate , next question will pop up on screen that whether the want to rent or buy the property,this page will contain only a question with H3 and there are 2 options which are to be shown as buttons, which are want to buy/want to rent or want to sell/want to put on rent, here buttons will be side by side coverinh 60 percent of whole width and having 10 px of width in between them with rounded corners with radius of 10 px. If they want to buy, then ask for type of property they want to buy. On this page, text will be written showing "Type of Property" and below that there will be some buttons which can be clicked and added as filters in a row , these filters are rectangular and placed below the row in which the clicked filters wiill be added, and the filters are as below "Flat", "Bunglow", "Farmhouse" (if there in the location), "Office Area" and such 9 fields which are aligned vertically centered and also the filters, when once clicked, removed from the buttons and added to the row with cross signn at righ side of the filter covering 20 percent of the width of the filter, here multiple filters cn be added and whenever any filter is added in the row, it is removed from bottom and the space is occupied from next filter and this aill happen till all the in between spaces are being filled and a "Next" button will be there to go to the next screen and price range in next page in which minimum and maximum price range will be asked in the form of 2 flexed blank entries in which one of them shows minimum pricing and 2nd shows maximum pricing , also a button is to be there to move to next page , showing "Next" , all of them covering 60 percent of width and also having rounded corners with 10 pixel radius and the ratio will be 2:2:1 for min price: max price: next button. The question which is asked here with the pricing is "What's your budget for buying property?". After clicking next, buffer will happen showing properties are being searched according to the choices filled by you and the next page will show 5 properties
Loading...