BUILD A REAL ESTATE / PROPERTY APP - RUBY ON RAILS TUTORIAL

how's it going guys in this video series we'll be building a property tech website now there are a number of probably tech websites online in this example I'm going to use something similar to domain so the domain is an Australian property search website and you can see on the home page they have multiple listings we can click through to this profile and you can see information here about the agent the leasing agent for that property and we have some description info the ability to make bookings for a private meeting tube to view the property and then there's other similar properties in the area for the purpose of this video we'll be focusing on adding listings signing users up and being able to have a profile for each property and possibly in later videos and we will get into more specific features on the platform and the first thing I'm going to do here is just jump in and set up a new application now this is pretty standard you've probably seen me do this and some of the other videos I posted so right now we're just installing all of the required gems and this normally takes a few minutes to set up but once we have the app set up then it's much faster to develop later so now that this is finished we will change directory into our new property finder app and then we will open up the folder within our code editor if we go inside our database file we can see that they're using postgrads and our Ruby version is two point six point three and we're using rails six point zero zero to build this application so now we can go ahead and set up our database and if we run the DB migrate command down what will trade a schema file for us and just to keep things organized I'm going to commit this code in to get soaked it is for version control and we will just add all of the app files to begin with so now we want to set up our first controller and we will call this public and we will create a main method within that public controller we're going to use this for our home page and we can add in the default route path here for our application so that would be the first page that users see once they visit our app so now rails is starting up we have started the rails server and we're seeing a bit of an issue here already so let's have a look and see what's going on so we'll just run the bundle install command and it is oh ok we've got a typo here so we need to add a hash tag instead of that slash I don't know why that's in there and let's reload this again and we've got this working now ok so now we can open up our main HTML file and just replace some of the text in here we'll style this up a little bit later but it's just add some dummy text for now and we will do something similar to what we saw on the property listing website so I'll say search for your new home today and we can just start with that first so now let's set up our user accounts so we'll use the device gem for that and what we need to do here is install and then we need to run the device install command to rails generate device install okay and now we can update this environment file to include the default URL for mailers and we're just we'll just follow the instructions here and just to make sure everything's set up correctly so now we can go ahead and set up our device model and you can always refer back to the documentation to get the exact set up routine for setting up device SOLAS has created a migration for us under the DP migrate folder structure and in this case we're gonna enable the tracking and the confirmable on our device accounts that means that users will have to confirm their email and we will be able to see what IP address they sign in with and we'll also add a few extra fields here first name last name and we can have a profile URL in here too so this will just allow us to customize the accounts a little bit make them a little bit more user friendly so we can see who the agent name is go to their profile etc see what other properties they may have so these are good things to have and we'll just do it from the outset here and now we can see that the new routes have been set up for device I'm going to use the rails generate scaffold command here to create our properties now this should create a lot of the views and the migrations and things for us so we'll just pass in some parameters here you want to create a name column address a price how many rooms are available in that property and the bedrooms so we can start with this and we can always add more fields later but I think this is a good start for now and probably one of the most important things to add here is a photo for the property now we may add a gallery separately but I think it's always good just to have one photo that is maybe set as a background at the top of the page to make the listing look more attractive so we'll go with that for now and we will run our migration here and see how things look so I just realized we've forgotten something very important here and that is to connect our properties to our accounts so we can go ahead and roll back that migration first and we'll just add that additional field and we'll add that as a reference and having it as a reference will allow the well allow trails to create proper indexing on the column name so let's go ahead now and run that migration again and now we can see that we've got this model already set up for us for the property and we should now enable a couple of things here we want to add confirmable and trackable to our account for device and then we want to create the relationship to say that the account has many properties so now let's add some additional markup to our page we want to include a menu on the home page that allows users to log in or sign up so we will link that using a render and Google add a partial file here within the layouts folder and what I'm going to do here real quick is just get the version of I'll get the latest version of bootstrap and install it so I could use the gem for this and there is a gem listed on the bootstrap page but just as a quick measure to get this running I'm just gonna drop in these links directly into our template and a good way to save time when setting up a new application is to use some of the templating that is available now bootstrap already has some of these templates on their website which you can use and in this case I'm just going to copy the navigation structure here and paste it into our app and then we can tweak it just to make it fit what we're trying to do so already we've got a working drop down menu got links and a search box so let's go ahead and also copy this top section so I think it makes the website look a little bit more legitimate we've got an actual navigation plus a kind of banner at the top and some content layout that will save us some time so this it replaces and we can also add in a footer for our page and we will create a new file just paste that code into for now under layout to create a footer file and then we can just update this with our own information here and that's already starting to look very good for us now it looks actually like we've got something done and that's less than ten minutes already so now back within our navigation file I'm just gonna update these links to make them fit more with the site that we're trying to build so some links refer to latest properties maybe we can add something here for sign-in and a create account so we can make this login and then sign up and we could also add another link here for advertising so that's something we will probably not get around to in this video but something we can add later and then we all need to add in the proper URLs for these so we can copy and paste in the correct URL for creating your account and logging in so now let's check this out and we can see now we've got these links at the top and it looks like we've got something on our site now it's starting to fill out a little bit now you'll see there is a little bit of an issue with the styling at the top there is this background color behind digital links and it turns out that's because of the scaffold CSS stylesheets that comes as part of a default let me use the scaffolding feature in rails so we can just comment this out and means that everything kind of looks normal again and in fact you can go ahead and delete that scaffolding style together so we'll do that in this case so now I'm going to use another template here from bootstrap and it is for this sign-in page and we can also use the same style for the signup page so it looks pretty clean quite nicely laid out so it will save us a bunch of time if we just use this code that really exists for that it paste it in and we will try to fill out the fields here as best as we can and the first thing we can do is just remove this icon at the top so we don't need that for now and we'll just paste it in the fields that we need within this layout so we'll need the email address here and we will need our password and we can delete this old code in and just remove the form tags and then replace it with thee and tag here to close off our rails form and I'm gonna add another stylesheet here just for device and I'll paste in the code from our template from bootstrap so this is a style sheet and pasting in and I'm just gonna replace a class name because is the default class it's added by Rails for this divide form and you can use indentation here and tidy up this style sheet to use sass rather than CSS so we can just wrap these all within this form sign in tag and in fact if we name this correctly we can use it for both a sign in and sign up so this changes to form off class and then we'll add this as a wrapper so let's add a section tag here and wrap it around our sign in form and I think this form will look better if it's centered and that the center is all the links at the bottom as well so we can also tidy up our signup page now using the same approach and I'm just gonna skip over this a little bit quicker here because we're basically repeating the same thing that we did in the sign-in page and while we clean up this signup page I just want to remind you guys it I will be lunching some of these MVPs on my website so you can see the link in the description of the video below and as always if you're enjoying this content make sure and subscribe as it will be creating a lot more MVPs in the future so now going back to our signup page things are looking much tidier now and overall I'm very happy with how these pages are looking these device pages and the next step for this is really adding these parameters to our application controller so we've got additional fields in here for first name last name and URL so we want to allow the user to add these when they sign up and even once they are signed in and edit Engler account we want them to be able to modify these fields so now we can try signing up for a new account so now it looks like we are signed up however on the home page we can't really tell but if we look at our server log we can see that an email has been sent so once we try logging in now we can just see that there are still got this log in signup button so we all actually have to modify the the public navigation to check to see if the user is actually signed in and I guess what we want here is if the user signed in we have the option to sign them out but if they're not sign in then we should show this sign up sign in navigation links so now once we reload the page we should be able to see the sign out link log out link and once we click that and we're signed out again but what we'd really like to see here is once we're signed in we would like to see a dashboard and there is this template here on bootstrap for a dashboard so let's get things prepared for that and the first thing we can do now is set up a new controller and we can do that using the rails g controller command and we will call this controller dashboard and then we will add a method for this called index and we can also add some additional methods here that we can fill out later so now within our public navigation let's update this to check if the user is logged in and if they logged in then we can show a link to the dashboard and if they're not logged in and we will just be linking back to the home page you so using rake routes we can see our our path again for this dashboard and we can see here that the routes are not quite named the way we want them so we can customize a name on those routes for dashboard and dashboard properties or reports so it looks like we made a mistake in our routes file so let's go back and see what we've done okay so our formatting of this URL isn't quite right but now we have it working what we want to do now is copy some of this markup to create this left navigation once the user is logged in so we'll just copy that from the bootstrap dashboard example and then we can paste that into our own application and modify the links and afterwards when writing logic like this we should really be moving it outside of the views so probably into a helper method for this but we can come back and title this up later it's just to safe and get things up and running first without spending a lot of time here so just to summarize over trying to achieve here we want to show this public navigation if the user is on the home page or the sign-in signup page but if they are not on those pages we want to see the dashboard so the left side menu and show them a different experience once you're signed in along with copying over the HTML for this layout we will also need to copy over the Styles stylesheet ax is used to give that proper layout the proper design so we'll put this into our dashboard style sheet so now I will copy over the main body content to this graph at the top and the other parts to the dashboard itself so let's put this into our dashboard view our index files or dashboard and see what happens okay so things are starting to look reasonable but we are missing our graph here we can actually just take out this graph for now as we don't have any need for it so now let's try to tidy up this search bar at the very top and we will just give it this darker theme like we see here and then demo and we can fix this by moving our bootstrap stylesheet above our application stylesheet we can see here little footer is looking a little bit out of place so we will remove that temporarily and I want to look now at the icons on the left side and customizing that navigation and we also have this white space at the top of our dashboard which you want to remove and we can see here that that is being caused by this notification paragraph that is embedded in our layout template application template so back in our dashboard now and we want to remove this sidebar and move it out into a different file that way we can reuse it for different views on different pages that we are at within the dashboard so we will set up a new file for that under layouts now have folder that we have created earlier and then we will just paste in that code for that sidebar navigation and in fact what we can do here is even move some more of this crude out to the application template a really in this dashboard file we just want the body content is on the dashboard we don't want to have the structure of the sidebars and all the rest of it so let's move that out into the application template I'll just take a moment here while I'm cleaning this up just to let you know that most of these MVPs I'm actually putting out for sale now I normally go ahead and finish them out a little better after I finish the video but I also do some custom work on some of these MVPs for potential clients so if that's something you're interested in you can actually buy the MVP and I can do additional work on it to add your branding your logo or custom custom navigation and you could even add custom integration for payment gateways possibly to have a sponsored listing or advertising things like that so back to the video now what I'm doing here is just replacing these links within the dashboard side navigation so I want to add them as rails links remove the default HTML link and style it up and in the rails way here so we're going to try and wrap this as a block this link so make this link into a block and then we will have the icon within that block so rails is complaining at us here at the moment but we can go back to our routes and see what's going on here and as it turns out there is a typo here that I have in my dashboard path but that's not the key issue here I think there's maybe a mistake in the way I've formatted this link block I should really be moving that that path down into the body or that content down in the body of the blog so let's move that a little bit now okay so that is working now and what we can do is continue to do that for the other links here we can just copy and paste lists and then just change the path so we got it our properties into this sidebar now we can go ahead and try that out and you can see here we've got this list and we have the form to add this property so let's test out this form and see if it works and it is telling us that the account must exist so it looks like we have to set the account ID here within our controller so we can just do that using the logged in current account and then at the top of this controller we can make a before action just to ensure that the user is actually logged in before they create a property you ok so now we've got our first property created and we can see it here on the list and now we're going to see if we can find some icons for our sidebar I'm using favor icons calm here as this is part of what was in the template originally from bootstrap now in here we can search for the icons that we want to use on that sidebar so for properties we really want to have something a bit like the Home icon but in most cases the Home icon is used for the dashboards so it's possibly a little bit confusing in our case so what I have done here is just skipped ahead a little bit and I've added in this script for the filler j/s and then I'm running filler to replace and what I'm trying to do here is basically set these inline elements using the HTML markup and then we'll use the JavaScript to generate this SVG icon so just remove those hard-coded SVG's right now and then replace these too much so it is a package to say that it is our property and just as an example here I'll use gift for products and you can see that he's updated so we can come back and update these later but I just want to show how I will be adding these icons so you can see here that I've done some updates to that left navigation I've added viewings with a calendar and removed some of the reports so the next thing I want to do is update this property profile view so right now it's just showing like really basic information about the property but first we can tidy up this table using the bootstrap classes and already that looks much nicer in terms of layout you could actually change these buttons too to make them more bootstrap styled but we'll add some styling to this form first so now let's reload our foreign page and see how we look and it's looking quite reasonable right now it's much tidier better spacing we can update this heading tag to make it a little bit smaller we'll use a h3 class and that's looking better there is some spacing issues at the top of this page we want to get rid of to look at that shortly and on the bottom there is a little bit of tightness around these buttons and form fields so I think if you get the classes right here we can space this out now I want to move this validation message into a partial so we'll put down our layouts folder call the file validation and we'll pass in the the object that we're trying to save our validate in this case so this can be used within all of the form form views that we have on our app so let's create something that's reusable and not messing up our views so now I want to try and fix the spacing issue at the top it's very close the headline headlines very close to the search box at the top and I think we can adjust that from within the template itself so just adding some margin to the top of this container it's starting to look a little bit better now the spacing is looking good for us so now let's go and fix our sign out link top right at the moment this is just a dummy URL but we can make this into our proper URL here using our sign out path you so now let's reload the page and try out our new link and that's working nicely so trying to sign in again I'm noticing here that we have this navigation menu now that shouldn't be here so let's go and see what's going on here and we can see here that we have got device as one of the controllers that we are showing the public layout but if we go to the login page we're actually using a sessions controller so that's kind of skipping that public view and displaying that navigation for the dashboard instead so we are noticing some styling issue in the very top here of our page on the navigation so let's add some body classes and ID's to our layout based on we can actually base this on the controller that we're using and the action that we're using on any page so we can set styles appropriate for each page so in this case we're going to wrap all our styles here for the dashboard and that way they won't affect the user when they're not logged in so that's looking quite nice however once we go to properties we can see that this is a problem because we are on the properties controller and not the dashboard controller so what we can do a quick measure to fix this is just adding the properties to the CSS file that we added so then here we can just add this on to the dashboard and that should fix it temporarily we may look into a more permanent fix for this but for now it's fine so we want to resize this headline just like the other ones you'll notice when we click the back button here we can see they're signed in successfully now that's only appearing here because it has not been displayed already so we really want to have that within the body of the page to be able display notifications even if we hide it initially that is fine but we really want a place for that to be output to the page so we will temporarily set this as a notifications ID and then we within our stylesheet and we can just hide this for now going back to our listings page for properties let's add some styling to this button for new property and can change the color on that using the class so that looks much better and we'll just say save property here instead of submit so on this show view for the property this is gonna be our profile page for the property and we don't want to really have edit links or backlinks here so we'll just take those out so now we want to add the ability to upload photos within our application and we will do that using the carrier wave gem along with the fog jam and we'll use a mini magic gem for resizing images after they're being uploaded so now we will modify our form from the properties and add in the extra field for the image so let's just rename this to photo and then went in our controller for properties we will need to whitelist this photo field and the photo cache so that we can store this to the database so at this point we need to create a uploader class and we can do that under a folder called uploaders I'm just gonna copy and paste the code I have for this here in quickly and this code we're gonna paste in here is actually supplied on the documentation for the carrier wave gem so you can just get that on the carrier wave Docs and paste it in there and just modify it to fit your needs and now we just need to restart the server to get this up and running so we've added our uploader and once we restart this we can see the new field has been added to the form so under the development in our gem file I'm going to use the Figaro gem and I'm using this to handle the environment variables on localhost you can create this new file and just paste in the credentials for your Amazon s3 account and here I've also set up my carrier wave configuration so again I've pasted this code in and you can find this code for this on the documentation and just looking at my property here again I want to be able to show that the the actual saved version of the property I want to be able to show that image once the user goes to edit that property again so we can do that by checking if that photo is attached to this record and if so then we will show the thumbnail on the page and it looks like here we need to include the actual URL of the image itself and we do that in the image tag and something is still not quite right here but go back to our code we can yeah we can see that we are not using the property here so our alias is for the property and that photo is attached to the property so that appears to be working now and we can just add some margin to the top of this to space it out so now let's log out again and have a look at the home page and here in the home page we want to have the latest properties so in order to do that we will need to create a new file to contain those property loop so we loop over some properties that I've been added lately I'll create a new partial to do that under the properties folder and the views and then we will just loop over this properties array so we'll load this from the controller in a few moments but we'll just get some basic layout here first and here we want to input an image tag and we can add a class to this if we wish but we can actually use a helper method for this and the reason for doing that is that if it propagates a property gets added and there is no thumbnail yet for it then we would want to show a placeholder image so that shouldn't really be the case when adding properties really every property should have a photo attached to it but it's good to prepare for these measures just in case so I have just found an image online I'm dropped it into the folder of our assets are assets images folder and that will be used as a placeholder image if there are no images attached to an individual project or individual property sorry so now back on our home page that's create a section where we will be outputting our latest properties and we can put that in within a container and a row so that will just give it some layout so that centered on the page so now back into our public controller for our home page let's load in the latest properties and then within our property model we can set a new scope for the latest properties using scopes allows us to easily chain database queries together to make it much more easy to select data in the future so now we can see that our first image has loaded incorrectly from that property so we are loading in the properties thumbnail right now we want to also add in the details so like the name of the listing how many rooms there are just those kind of things to make this this listing a little bit more complete so we've also added the address at the bottom and we can style this up a little bit but our key focus at the moment is really getting the data just output on the page so in time we can style this much further but so far that's looking reasonable we've got the name the address and thumbnail so we can actually push this section down a bit to space it from the rest of the page content so let's do that now okay so it's starting to look a little bit better now we've got a bit of breathing room around the content some white space there so we can add additional properties in here to see how that looks but one thing we should add in here is some additional details for the amenities of the property so how many bathrooms are how many rooms are our car parking spaces these are all very important information when choosing a property so we want to display lows at the front and we can't go back and copy our icon so we can use an icon to show each of these pieces of information just to make it a little bit more interesting to the viewer so just to show you what we are trying to achieve here it's something a bit like this with these icons a number beside it now we can go through this website try and find something that's suitable but it can be quite difficult to find the right icon for these things so we're not gonna focus on it too much but that's something that we can always change later so I think in the meantime we can go ahead and add some additional properties to see how this looks on the front end and that's been added successfully so let's go ahead and add one more now we can see that we have three listings now and on the front end things aren't looking so good we need to clean this up a little bit so that's quite easy to fix you can just change this to for column width and now I've got this spacing in between but we could really try to get these images all the same height so that this is aligned correctly but for now let's carry on and try to link this up to the property show page so at the end we'll come back and clean up some of these image sizing and styles just to polish things off but I want to initially focus on getting all the functionality in place first so it's at a link around this thumbnail and that's going to go to the property path so that will show the show view for that property however right now our show view is like this we have this basic details and ability to edit the property so we want to actually show the front end version of this page I want to see like the description of the property the gallery things like that so that will be from non logged in users and since it's for non logged in users will need to hide sidebar on this page so the we don't want to see the ability to add properties and all the rest of it so that will be taken out for this specific page on the properties controller so first of all we've got that part working so we'll need to basically create this instance variable to say that the whether or not to show that sidebar so you can create a method for this and only run it on certain views within this controller so we can set that to accept a show view so the that will be our property profile page this show view so in here we will say that show sidebar that's true and that will run for every page except for that profile page and we can see here that there's some issue with the styling on this page so the top navigation has some weird styling right now and one thing to note here is that we can see that the e styles are restricted for just a dashboard and the properties model or controller so we want to disrupt this in the show sidebar class and we will basically output that class if the show sidebar instance variable is set so let's add this to our body and a class to our body tag you we can see that our top navigation the styling has been has been fixed however the sidebar is still not quite right and it looks like if you look at the clasp on the body tag that there is no space between the the view of the action and the show sidebar so that's going to fix that now just need to add an additional space between these classes so now we can click through in the properties section to see that the sidebar is working on each of these pages but on the dashboard it seems to be missing so what we need to do for that and we need to set the show sidebar within the dashboard controller and conduce we can just copy that across from our properties controller and we can actually remove these unnecessary actions that we have in here just clean this up and now that's working that's good I was log out and we can click on the property but we still need to style up that profile page so before we do that they set up a new link here on the name of the property so now we will start working on the profile page for the property so this is probably one of the most important pages on the website as it as it conveys all the information about an individual property and its front and it's a customer facing so it's pretty important that we get all the right information in here so let's start by adding a container and a row will add some basic markup here some some bootstrap markup to get the basic layout going now another thing that the content is actually hidden behind the top navigation area so we can do something to try and push that down a little and just by adding a small margin to the top of this container we can see that that content is just peeking down under the navigation now so in our public stylesheet we can set a padding top on the body element and by doing that we can see that it pushes our content further down the page so it's not hidden behind this navigation now and what we'd like to do really is have a big background graphic here seems to be the best way to show a property using visuals so we'd love to have a big background splash image of the property and then move that content for the name address price etc further down the page so we can start by moving this information into a column and you can see that it's all displayed underneath each other now so let's get our image added to this page so it's copy this across and instead of thumbnail we'll set up a new helper called property photo and if we go to our helper file now we can just duplicate this and we can change this to the full-size photo and we're getting an error so it looks like we've got a typo here and now we can see our image loading however it doesn't really look that great on the front end I think the better option would be to set this as a background image and make that photo the full width of the page okay so we want to set a style here on this div and we will output the asset URL for this property image so we can say background image and passing a URL and we can use the class name that we've created on this div a property main photo to set a min height within our stylesheet and then we can also say using using that class we can also say that the background image should cover the entire space of that div so let's do that now you so we'll set a height of 500 pixels and the background image is set to cover so let's return a URL instead of an image tag from this helper so we'll set the asset URL and return that back to the user and we can see that's working nice quite nicely now but there is this white space at the top but we have to look at so it looks like our padding on the body that we were using before it's a little bit too much so we'll just set it to the height of the actual navigation bar itself and that's starting to look pretty good right now I'm overall quite happy with that so we've got the full width image at the top we've got the details underneath and but we really want to add that contact information for the agent on the right side of the page and some additional information about the property too so I'll just set some temporary info here just to see the layout and we can render a partial here for the agent details that's quite a new file for that and this will output the account information once we have this completed but we can just drop in something very temporary right now so we can see on the site that we're comparing this to that we have a full name and we have a company name and there should be really like a contact button or a a call button to expose that users and details up so you can make a call to the agent but we'll have a button here and says call contact and we'll add a name and then we will create a second button that is for emailing that agent you so back in our controller now that set the agent for this property so we can say properly to account but we can see that there is no full name column set so we could just create one like this and pass in first name and last name returned as a string but it's also saying that there is no company so we'll set a temporary company method here obviously we'll need to add that to the account model but let's just go with that for now and then we can add a heading tag then for the name of that agent and a paragraph for their information so let's start they look pretty good right now we have agent details property details photograph in the next video we will be adding the functionality for these buttons but for now it's just about presentation so there are a lot of things we can add to this such as the ability to charge users to put a property on our website so we could be charging them $10 $20 to make a listing so that's gonna do it for this video if you've enjoyed this video do give it a like and subscribe to the channel as I create a lot of content around MVP building so building these platforms really quickly using powerful Ruby on Rails technology so if you enjoy this content do subscribe to the channel and I am also selling some of these templates on my website so check out the link in the description if if that's of interest to you but otherwise I will see you guys in the next video

Channel: David Battersby

Views: 38,829

Keywords: ruby on rails, ruby on rails tutorial, rails tutorial, rails 6, proptech, property, web development, mvp, real estate, website, platform, app, property listing, tutorial, startup, web app, walkthrough, coding challenge, carrierwave, Ruby (Programming Language), learn ruby on rails, propertypal, propertyguru, coding, live coding, programming, build web app, how to use ruby on rails

Id: qvGGz-2WHpU

Length: 51min 2sec (3062 seconds)

Published: Fri Aug 30 2019