Welcome to the next project in the Vue js developer course. In this project we're going to build out a API driven search engine.

In this first lesson, we're going to generate the application here using the Vue CLI.

Now that our Vue application has been generated, in this guide, we're going to create the two components that we're going to be working with throughout this project and I'm also going to show you my own personal workflow and a couple of shortcuts that I use.

In the last guide we built our two view components and we called one of them from our router.

Now that we have our components and our routes set up we're ready to start building out the functionality for our home page. We want to set this up so that we can search for something and have it take us to our search results page.

This is going to be a really fun guide. In this guide we're finally going to connect to an outside API service, and we're going to pull real data in from another application.

In the last guide, we were able to successfully bring in the data elements from the Daily Smarty API and render them on the screen. This is giving us just the raw JSON data. What we're going to do now is see how we can parse through this.

Now that you've seen how to go out use Axios to communicate with outside APIs, I think this is a good time to extend that knowledge and see how we can pass parameters to those APIs.

So now that we're successfully calling the search API, we are passing parameters and we're getting the data back. Now I think it's time to start rendering it on the screen. So let's see what we need to do in order to make that happen.

Now that we have the basic functionality built out for our application, we are now going to implement the styles that are going to make it look much better as well as making the user experience a little bit more intuitive.

In the last guide, we built out the initial styles for the home page, and it looks good, but our results page really needs a lot of work. We are going to apply the styles that we've built out in our front-end implementation course and we're going to take the HTML file and we're going to integrate it in.

As I mentioned in the last guide, our goal now is going to be to add content for these links. But we don't actually have these titles so we're just going to have the urls.

In this lesson, we're going to reorganize our styles so that they are scoped appropriately, so we need to sort through the different styles being called in our application and move them so that they are in their proper places.

In this lesson, we're going to add a few finishing touches to our program.