Setup and Explore our Shopping Cart Application to Learn Redux with TypeScript
This course builds off a react-based shopping cart application containing a list of products (loaded dynamically from a JSON file). It is fully self-sustaining and does not rely on any third party APIs. It uses vite as the underlying bundler and development tool with react-ts preset.
To get started simply follow the these instructions:
git clone git@github.com:xjamundx/redux-shopping-cart.git
cd redux-shopping-cart
git checkout egghead
npm install
npm run dev
open http://localhost:3000
Note This course uses a shopping cart application to demonstrate redux principles. It is not meant to demonstrate anything about making actual financial transactions over the web.
Jamund Ferguson: [0:00] Head to the sample repo and copy the link to the code by clicking this button. Then, in the terminal window, type git clone and paste in that URL. From there, cd into the folder. Make sure to check out the egghead branch and type npm install. With that installed, you can type npm run dev to start the application. Head back to your web browser and open up that URL.
[0:23] You'll see that we have our basic store page with three items in the navigation bar -- our home page here, a products page, which has a list of products which you can pretend to add to your cart, and then a checkout page or a shopping cart page, where you can see all the items that have been added to your cart.
[0:39] All the items listed as in our shopping cart aren't really there. I can't remove items. I can't check out, and I can't update the quantity. It doesn't work. These are all things that we're going to add as we go through the course. Once you've explored the application a little bit, go ahead and open it up in your IDE.
[0:53] I'll quickly walk you through the file structure that we have here. Our main HTML is found in this index.html file, which links to our source folder /main.tsx. That's the start of our React application.
[1:04] If I open up main.tsx, you can see that we render our React app here in strict mode into the root element. What you see on the screen actually comes from App.tsx.
[1:16] In App.tsx, you can see that we're using react router dom to handle our navigation, which switch through three different path, //products and /cart. All those three link to separate components. The home component, which powers the main page is directly in the app file.
[1:32] The other two components, cart and products are found inside the features folder. Features has a cart and products subfolder with a few components, and CSS, and various things needed to render those pages. There's also an app folder where we have a file called api.ts.
[1:48] Api.ts contains some interfaces for some of the key data that we're working with and some fetch calls for actually retrieving that data. That's pretty much it. Go ahead and take a look around the application.
[1:59] Make sure you understand how it works, search around it with a browser and we'll see you in the next lesson.