- Read Tutorial
- Watch Guide Video
Now, when I was originally building the course, I thought that I would build out a similar type of component as we did with the Portfolio Manager. So, I thought I would build out a blog form and then a sidebar of blog posts and then a different page that would actually render the blog and I actually did do that when I was preparing, so the final version of the application does have this full setup but then I realized that that would be kind of cheating you because that would simply be going over all of the same types of concepts which would be good for review but I'd rather teach you newer and cooler features, so this is what we're going to build out.
If you click or if you see what I have here on the Blog page, this is what we're going to build.
We have our full blog here and we're gonna learn how to build an infinite scrolling system, so instead of pagination, you're actually going to be able to build a very cool and modern feature which allows you to scroll down and whenever you hit the last post, or the last post that was called from the API, it's gonna call the server automatically and it's gonna load automatically more posts, so that's gonna be a really cool feature.
If you've ever used sites like Facebook or Twitter or Instagram, they all implement infinite scrolling in order to make it so you never have to click to view the next page, it just automatically pulls all the data in, so that's gonna be a really cool feature to build out. The show page or the detail page, if you click on one of the links is also gonna look good.
It's gonna be a pretty standard page where we have the title, the ability to have a featured image and then we have formatted text and you're gonna see that you have to implement a few key features in order to get this kind of behavior such as having images embedded directly into the text and being able to have paragraphs and styling and so, instead of having a blog manager, what we're going to do is we are going to be able to have this cool little link here where if you're logged in, you can click it and we're going to learn about how to work with models.
So we're gonna see how we can build out a model and this model is going to allow us to have a full form here and then we can type and have this what's called a WYSIWYG and it's a rich text editor which allows you to type in anything you want and then automatically you'll have all of this formatted in HTML and then from there, you can upload a featured image if you would like,
and then from there, you can simply hit Save and it's going to then populate the data just like we have right here. So, we're gonna build all of that out in this guide and I thought that would be cool, you're gonna learn about infinite scrolling, you're gonna learn about models, you're going to learn how to build a loader and then we're gonna connect all of that with our current knowledge on being able to build out the CRUD functionality like what we did in the Portfolio Manager.
So, now that you know what we're going to build in this section, let's jump into the code