Building out this application will give you a solid idea of how to create your own components how to apply styles to these components. The idea of state and a few other really important things in order to get started with react. All right so if I head over to the Trello board with our projects and I click on the Hi-res designs and the link to the basic design prototype on invision. It brought up with a preview put together by one of the designers here Bottega and we can see that the main objective of the application. The main idea is to fill out the fields below and click the general button to see the Mad Lib story. So we can't really modify these since it's just a design but it does have limited functionality. If we hit generate Mad Lib we are brought to another screen and it fills these out. So what you'll notice is that 1 2 3 they're all mapped accordingly down here in the content. So it says ladies and gentlemen this pink barber your sportscaster bringing you the last inning of the game between the Cleveland people and the electric Yankees and so on, so clearing this we are brought back to the original screen and this is what you see.

So something really neat and useful about using Invision is that say for example you finish this course you get your first client and he wants you to design it. You make the designs or you have a designer design it and you have it in Invision right. You can now go to your client and he can mess around with it with the general functionality of it since you're not going to build out the entire app on it. And he can tell you whether or not it's what he wants right. That way you don't spend a lot of time developing the wrong application and then come back to him only to have him tell you to go back and remake it. So that's just one really really nice thing about using a tool I can envision is that it could save you a lot of time and confusion.

All right so heading back to my application I'm going to go ahead and generate Mad lib and you'll see that it maps these values that I've typed and down to the content. So it says ladies and gentlemen this is blue barber your sportscaster bringing you the last inning of the game to the Cleveland developers and the neat Yankees. Big Sean is pitching for the Yankees and so on. So if I go up here and I delete cool you'll notice a couple things. First, this turns gray. So whenever you type in anything into that input that will turn green and the other thing you'll notice is down here it automatically updates. So if I delete the L in cool will be left with Coo and same thing with all the other inputs. If I type in Jordan Hodgens for celebrity you'll notice that maps over here instantly so Jordan Hudgens. So I'm going to go ahead and clear that.

Ok, so that is the general overview of the Bottega Mad Libs app that we're going to be building out in this module. I talked about a few things earlier in this video that we will be covering a few concepts those concepts being components, state, JSX and a few other things, if you want to read up on those before you head on to the next videos feel free to go to https://reactjs.org/docs/glossary.html. And this is basically a glossary of the react terms that you should be at least somewhat aware of. I will be going over these and referencing this documentation as we build out certain features throughout the application. So if you don't want to read up feel free not to but if you want to definitely check it out. All right so that's it for this video and I'll see you in the next video.