Setting up your base project

- [Instructor] Let's go to our editor or IDE of choice and set up our project. When you open up the repository and go to the 02_01 branch you'll see our base project template. This project was set up using create react app. And when you navigates to the public directory, you can see the index.html file right here. Inside the index.html file, we have a link to our Bootstrap CDN because we are using Bootstrap for styling our app, so that we can only focus on what's essential in Redux toolkit. When you open up the src directory, you see the components folder, a data folder, and the styles folder. The data folder is where we have our application data and where we'll put our Redux store. We also have the productList.json file which currently contains our product's array of objects, and each object represents a product item. For example, we have the first product on line three with an id of 1, name as Springs Robot, it's detail, price, and imageUrl. Let's go back to the src directory and open the components folder. Here we have the Cart.jsx file which is the cart component. And on line one, we started by importing productList from the data directory. We've also imported the cart.scss file from our styles directory which contains style files for our app. We're creating the cart components on line four which returns a jsx code. On line nine, we're mapping through all the products in the productList array and displaying each on our cart page. Since we'll be getting our cart items from the Redux store, we will come back later to modify this so that inside our productList we'll use cart products from the Redux store. When we scroll down, you see that we have a div that says your cart is empty. We'll only show this when there's no item in the cart. We also have the Home.jsx file which contains our product catalog. And inside of our product catalog, we are also importing productList from the productList.json file. Like we did in the cart component, we are mapping through the productList data and displaying each of our products on the homepage. On line 18, we have a button which we're going to use to add items to the cart. We'll add an onclick event listener to a button, so that when user clicks it, the particular item that the button belongs to will be added to the cart. We'll use Redux toolkit to implement this. The Navbar.jsx file is where we have the navbar for our application. We'll also use Redux toolkit on line 13 to display the number of items in our cart instead of the current hard-coded data, so that whenever we update our cart, it'll also change to reflect the new cart data. Now that we've gone through the structure of our project, we can go back to our terminal and draw the command npm install to install our packages. Then npm starts to start up our application. When we open our app on the browser, it'll look similar to the finished project we saw earlier. Only that its functionalities don't work yet. There's no store we can add items to. And when we go to the cart, you can see that the products here are all from the productList.json file. And right here, we also have this message that should only appear when the cart is empty. On the navbar, we have the hard-coded data 7 instead of the number of items in our cart. Now you should have the base knowledge to set up your app and follow along.