Full stack Real estate web application demo – Real.Estate

hi guys welcome to another demo session i am thomas a freelance software engineer and today i'm going to show you one of my demo applications i have designed and developed it personally from scratch all the ui the ux the data model and of course the implementation it is a real estate web application with a client side and an admin site on the client side the visitors can search and view the listings and on the admin side agents can manage them through a set of useful features let's start with the home page there is the menu on top with regular options like search blog about contact under the menu there is a search bar it always stays on top you can enter a text here and search for a city as you scroll down it loads more and more options so it is a infinite loading list here you can choose what kind of property you are looking for under the search bar there is this main display section with a background image a title and some text actually there are three three of them you can switch with these arrows the switch is nicely animated in the next section you can see two lists one is the new listings and the second is the recommended listings there are a few properties from these lists displayed here with the main image and the most important information the number of bedrooms bathrooms the address of course the price here is a link to the agents page and if you move the cursor over the image you can see the small liquid on the top right corner rotates a bit indicating that you can click it if you click it the images are loaded i think it's a nice feature because you can view the images without opening and loading all the or the properties pages if you like the images if you like the small images you can just click it and the click will navigate to the properties main page this is a visually oriented page it looks like this property has its own web page here is the main image and on the left side the main information as you scroll down you can see the detailed informations you can hide and show them and on the right side there is a form to book viewing and the link to the agent's page scrolling on the bottom you can see the images and if you want to view the high resolution image just click it and you can view them all it's the same up here if you click on the main image you can view the high resolution images now let's go back to the main page the next section is another display section with the title some text and a action button under that there are a few blog posts this can be the latest ones or the most popular ones and we have a footer down here with some text a many icons and links to the social media pages and with a form where the visitors can subscribe to the newsletter ok let's see this page on a smaller screen as the screen gets smaller the items are reorganized so they look well and it is also great on mobile there is place for the menu the search bar moves down here the listings are in one line one vertical column and of course the footer is responsive as well let's see the search page on the left side there is this search menu you can choose from basic advanced and full with advanced you have more option and with full you have all the options let's see the basic the city selection is the same as on the home page you can type any any city here let's see london here are the properties from london you can also specify the property type let's see we have a single family house here and condos let's filter windows now we have only condos for sale you can add more search criteria like we can have two bathrooms exactly yeah we have two bathrooms okay we can add more search criteria in the full section here let's see accessibility features choose wheelchair accessible we have only one and if we view it yeah it is in london two bathrooms and it is wheelchair accessible ordering also available here let's choose highest price so it starts with the highest price or we can reverse it yeah it's okay we have selected eight to show only eight results so we can navigate to the second page or we can choose more results per page like 48 now we have all the results in one page the search page responsive as well so it looks nice on smaller screen sizes and of course on mobile we have seen the most important parts of the client site let's log in with an admin user and see the the admin panel here is the welcome page on the left side there is the main menu and here are the links to the most important features i can view my listings these are my listings i am the agent the search or filter panel works as well here i can specify any criteria let's see the city london here are these orange buttons click it and you are navigated to the edit page this is a very long page with a lot of options and input fields but they are grouped together a climate control space location genera and if you see the the left context menu here under the edit listing menu these are the group titles and when you click it the application scrolls to the beginning of the group so it is very easy to to overview these options and and find the one you want to edit okay here are the action buttons here is save view and back these three can be found on the top of the page these are shortcuts because i did something here like this one this building size and click save to go back you can see here it's being changed another button is this blue view button click it and you can view or preview the listing okay if you navigate or scroll down here there is a trash and back i think they are self-explanatory but here is this video button this listing is currently published so it is a searchable and visible on the client side but if i withdraw it it won't be anymore let's check it out go to search london and you can't see here anymore of course if i go to the my listings i can access it because i am the agent of this property so i can edit it this icon shows that it is not published right now so i can click it it navigates to the edit panel of course i can do some edit here if i want but if i'm ready i can click the publish icon which is the same as here dom so i click it and now it's published i can go back to the search panel and now it is in the results okay let's view the image handling click the edit button on the left context menu click the images and we are scrolled down to the images section here you can see the already uploaded images the orange house button indicates that this is the main image i can change it easily just click on another house icon now this is the main image if i go back i can see that now the main image has changed let's just go back to the edit to the images here you can drop files i will show you just select the images you would like to upload you can select multiple images and just drop here and it's done the images have been already uploaded it is very easy and if you go back and open it you can see that the images are here of course you can select the newly uploaded image as a main image just click to the omicon and that indicates that this is the main image now here you can see images image deletion is very easy to just click on these buttons click and the image has been deleted yes just select this one and delete this now if you view the listing you don't see the deleted images there is another great feature that can help promote and diversify the the listings and you go to the edit page under the template settings you can select the template this template defines how the property or the listing is presented on the view page so here we selected this large image this is the template name and if i view it this is the template you have seen so far and yeah i think there are properties where one kind of representation is good like this one with this um nice professionally made high-resolution image but there are other properties where another kind of representation is uh is preferable so this can be achieved easily here you can create as many templates as as you want and just choose the one you like i have changed it save it and if i view i see now different representation of the same property of course the the template is uh is almost the same i have just changed the top but in real case the whole template can be totally different okay let's go back so with this template setting it is the agent's choice to choose the right template for the right property as you can see i can edit all the properties even though i'm not the agent of the property like you see this one the agent is luciferland but i have had it right so i can edit it this happens because i am an admin user but if i am an agent i can edit my own properties only so basically we are gonna need a feature that allows agents to edit other agents listings to achieve this just click the edit button and on the left panel click the edit right it will scroll down to the edit right input group and you will see a input field it says additional users here you can select other users agents or assistants who will be able to edit your listings even though you are the agent here luciferlan is set so check it out let's just login as lucy and if i navigate to the search page and search the listings lucy can view all the listings but the edit button only appears on her own listings where luciferlan is the agent and the one where the listing has been shared with her and if i click the share with me menu here i will see this one the agent is tom but as lucy i am able to edit it if i modify something and save it's done you can check it here okay i'm gonna login back as tom because i will need the admin user to show you the next feature let's just navigate to the edit panel it doesn't matter which in which property and you can see here a lot of lists these are predefined lists and the user can select an item from this list like the climate control or the electricity fresh fresh water source property type style so these are predefined lists and an admin can edit and add new items to these lists here under the listing properties the these lists can be managed so if i click to the property type i see the the available property types here if i go back i can i can check other lists like the accessibility features for example here are the accessibility features and if i change this property here like let's modify to condo999 update it go back to the list and it has been updated to condo999 here here here all the condos have been updated to condo999 and of course if i add the new one like i i will just add the new property type here and save it it's on the list now and if i go to the edit mode i can select the new property type and of course save it so after the save i see this is a new property type for sale i think this is a nice way to maintain those lists and just avoid the typing errors and it is much easier for the agents to just select from the list instead of typing all these properties so that's all for now more cool features and updates on this one coming so if you don't wanna miss them please subscribe to the channel if you want to know how can i help your business or your development project just contact me we will talk about the options thank you for your time i hope you liked it see you next time

Channel: Avelern

Views: 1,757

Rating: 5 out of 5

Keywords:

Id: CE2oP0gUhE0

Length: 22min 13sec (1333 seconds)

Published: Wed Oct 28 2020