Madlib React Project: App Overview
Hi and welcome to the react course. In this guide, I'm going to be going over the first application we're going to build throughout this course.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

That application is the Bottega mad lib's application you see here on the screen. So if you head over to the guide notes below there should be a link to that design and for this basic design, there's a more advanced design that we will be building out later on and that is what you see right here.

But the one we're going to be building in this set of guides is this application right here. So, I'm just going to explain it a bit and then we'll get started. So you'll see that we have all of these inputs here. Basically the idea is you type in a noun, a number, and so on, and then you hit Generate Madlib and it shows the story down here, and it kind of fills in these values.

large

So as you can imagine you can put in different values here. So it could say ladies and gentlemen this is blue barber and so on. So the idea of the application is to put in some custom values and then it generates a story and it's kind of cool. So a few technologies will be using to get the layout in place is CSS grid and flex box and of course just regular styles to get in the colors and everything else.

For the functionality we're going to be using React obviously and we're going to learn quite a bit about application state. We're going to learn about components and functional components and a few other things. So that's the idea of the application. Let's go ahead and generate our project and the next guide. So I'll see you then.