WEBVTT 00:00.110 --> 00:04.250 Hi, my name is Neal Cummings and welcome to my training course, learn to build an e-commerce store 00:04.250 --> 00:04.580 with. 00:04.760 --> 00:06.710 Net, React and Redux. 00:06.710 --> 00:11.240 This is going to be a training course about how to build a real world kind of application based on an 00:11.240 --> 00:14.780 e-commerce store, and what we're going to use to build it is, of course. 00:14.930 --> 00:15.980 Net, React and Redux. 00:15.980 --> 00:19.280 I kind of give that away in the title, but just for clarity. 00:19.520 --> 00:24.890 Net we're going to use as our backend and we're going to use C-sharp as the coding language that we'll 00:24.890 --> 00:26.180 use to write that code. 00:26.180 --> 00:32.570 And React and Redux are two very popular front end libraries to help us display the view of what we 00:32.570 --> 00:35.960 get from our back end to display in the user interface. 00:36.110 --> 00:41.240 So let's take a look at what we are going to be building on this training course. 00:41.240 --> 00:45.710 So let's run through a very quick demonstration of the application that we're going to be building. 00:45.740 --> 00:47.030 First of all, we've got our home page. 00:47.030 --> 00:49.490 We can switch between light modes and dark modes. 00:49.490 --> 00:51.470 And we can go to our shop. 00:51.470 --> 00:53.720 And when we do we're presented with a catalog. 00:53.720 --> 00:59.390 It's going to be a ski snowboard type shop, and it's pretty much what you would probably expect if 00:59.420 --> 01:01.580 you were thinking of an e-commerce type app. 01:01.580 --> 01:03.140 We can see our catalog with products. 01:03.140 --> 01:05.030 We can sort by price. 01:05.240 --> 01:13.280 We can filter and we can specify a type of different products that we want to look at and reset those 01:13.280 --> 01:14.090 filters. 01:14.090 --> 01:16.040 So pretty much what you would expect. 01:16.040 --> 01:17.690 You can go and view individual products. 01:17.690 --> 01:19.370 And then we can see the description. 01:19.370 --> 01:22.370 We can add them to our basket as well. 01:22.370 --> 01:25.520 And when we do then we see our basket updating. 01:25.520 --> 01:27.440 So I'll just add another product inside here. 01:27.440 --> 01:29.810 I'll just add some gloves and I'll go to the basket. 01:29.810 --> 01:34.130 And then we can see the different products that we have available for us to buy. 01:34.160 --> 01:38.690 At this point we can go and check out, and at this point we'll need to log in. 01:38.690 --> 01:42.500 So we're including authentication in the building of this app as well. 01:42.530 --> 01:48.290 I'll just log in as one of the test users with the passwords. 01:48.290 --> 01:52.100 And when I'm signed in I'll be redirected to the checkout. 01:52.130 --> 01:58.490 Now Bob's been to this shop before and he's already got an address saved in here, so it's pre-populated. 01:58.490 --> 02:05.040 But what we also get because we're using stripe as a payment processor, we also get Google autocomplete 02:05.040 --> 02:08.220 for many countries, about 30 different countries. 02:08.220 --> 02:15.240 So if you pick a country that's supported like the USA, UK, probably all of Europe, etc., then you 02:15.240 --> 02:22.350 can just come in here and start typing an address and you're going to get automatic completion for this 02:22.350 --> 02:23.910 as well. 02:23.910 --> 02:28.020 And then we can save that as the default address and we can go on to the next step. 02:28.050 --> 02:31.260 At this point we can start putting in our credit card information. 02:31.260 --> 02:37.080 So I'll just put in a test card that's available from stripe or 42 in this case and give it an expiry 02:37.110 --> 02:37.470 date. 02:37.470 --> 02:38.730 Some dates in the future. 02:38.730 --> 02:39.630 It doesn't really matter. 02:39.630 --> 02:41.280 It's just a test card. 02:41.610 --> 02:48.240 And then because we're using stripe, we can also link this with a secure one click checkout with link. 02:48.270 --> 02:49.200 I'm not going to do that. 02:49.230 --> 02:53.880 That's entirely optional and it requires some kind of sign up as well with link. 02:53.880 --> 02:55.440 So I'll just click on next again. 02:55.440 --> 02:58.110 And then we get our billing and delivery information. 02:58.110 --> 02:59.550 What is it we're going to order. 02:59.550 --> 03:01.740 And then I can make the payments. 03:01.740 --> 03:04.830 And once I have made the payment we get the confirmation. 03:04.830 --> 03:11.460 And then we can go and view the order and the payment has been received and that's been notified to 03:11.490 --> 03:14.310 our API from stripe, the payment processor we're using. 03:14.310 --> 03:17.670 So we can confirm that payment has indeed been received. 03:17.700 --> 03:22.350 So that's just a very quick look at what we're building in this training course. 03:22.350 --> 03:24.300 At least some of the features that we're adding. 03:24.300 --> 03:26.400 So is this course for you. 03:26.430 --> 03:29.910 Well in this course we're going to build a real world type of application. 03:29.910 --> 03:34.800 And as we go about the process of building it, we learn new things, new features about the different 03:34.800 --> 03:36.690 languages that we're using to build it. 03:36.720 --> 03:41.520 We solve problems, which is very typical in any application building. 03:41.520 --> 03:46.800 And because we go from start to finish, we face all of the challenges that we would face when building 03:46.800 --> 03:48.390 this type of application. 03:48.420 --> 03:53.820 If you're a learner that likes practical focus and you get the most out of learning practically learning 03:53.820 --> 03:57.210 by doing, then for sure this is the right kind. 03:57.210 --> 04:00.180 Of course, for you it is very practical. 04:00.270 --> 04:06.720 I'd go as far to say it's about 9,095% of what we do here is practically focused. 04:06.720 --> 04:11.780 So if you're more of a theoretical learner, and before you start typing on your keyboard, you need 04:11.780 --> 04:17.030 a full explanation about everything we're doing, then this probably won't be the course for you, and 04:17.030 --> 04:22.040 I would recommend something else, because this is very heavily, practically focused. 04:22.040 --> 04:27.260 And as we go along, I do explain all the code, but I don't do that before we start writing the code. 04:27.350 --> 04:33.110 We kind of explain as we go along whilst we're building this application, and there's no pre-built 04:33.110 --> 04:34.670 code in this training course. 04:34.670 --> 04:37.130 What we saw that we built in that demo. 04:37.160 --> 04:43.070 We start from nothing and we go all the way through until we have a fully working, published application 04:43.070 --> 04:44.210 at the end. 04:44.840 --> 04:49.400 So it's not a short course and this does take some time, but that's what we're aiming for here. 04:49.430 --> 04:51.920 So there are some prerequisites for this course. 04:52.310 --> 04:57.770 And if you think of yourself between a zero and a ten in terms of coding experience, zero being no, 04:57.770 --> 05:04.160 coding experience, ten being expert level, then this course is kind of pitched at around the just 05:04.160 --> 05:06.860 above beginner before intermediate level. 05:06.890 --> 05:14.710 Now it's impossible for anybody, no matter how good an instructor they are, to create a course that's 05:14.710 --> 05:18.190 100% perfect for everybody that takes it. 05:18.220 --> 05:19.300 It's just impossible. 05:19.300 --> 05:25.120 So I tend to pitch or this course is really pitched around about this level. 05:25.180 --> 05:28.870 Now, if you've never coded before then it's going to be tough. 05:28.900 --> 05:34.780 Probably too tough because I'm going to assume that you've got some prior knowledge about basic code. 05:34.780 --> 05:38.380 I'm going to assume you know what HTML is and you can recognize it. 05:38.380 --> 05:43.900 I'm going to assume that you know what C-sharp is, or you're coming from another language and you want 05:43.900 --> 05:45.100 to learn C-sharp. 05:45.100 --> 05:47.560 But I'm going to assume you know what an object is. 05:47.560 --> 05:52.660 I'm going to assume you know what a for loop is, an array and the basic building blocks of any code. 05:52.660 --> 05:56.020 I'm going to assume that you've already got a little bit of coding knowledge. 05:56.020 --> 05:59.800 So if you are coming from zero coding experience, it's going to be a challenge. 05:59.800 --> 06:05.980 And I would recommend you slow right down and try and get some prior knowledge before even taking this 06:05.980 --> 06:06.790 course. 06:06.910 --> 06:11.570 And of course, if your expert level or intermediate level, this is not the right course for you. 06:11.600 --> 06:14.180 You will find it too easy, I would assume. 06:14.300 --> 06:19.490 But if you are coming from another language or languages, then you might still find it useful. 06:19.520 --> 06:23.810 What you'll need to participate in this course is, of course, a computer. 06:23.900 --> 06:29.750 But the code we write and what we're doing here is cross-platform, so everything's pretty much the 06:29.750 --> 06:33.380 same for a windows user, a mac user, or a Linux user. 06:33.410 --> 06:39.080 We write the same code, we can use the same tools, and everything is cross-platform. 06:39.080 --> 06:43.820 And of course, because we're writing code, you will also need something to write the code in. 06:43.820 --> 06:49.340 All of the demonstrations that I'll provide are done using Visual Studio Code, an excellent IDE free 06:49.340 --> 06:50.570 of charge, cross-platform. 06:50.600 --> 06:53.360 Same experience on windows, Mac and Linux. 06:53.360 --> 06:59.390 But a development environment is personal to the developer, so you can also use whatever you're most 06:59.390 --> 07:02.030 comfortable with to write the code in this training course. 07:02.030 --> 07:05.990 But like I say, I'll be demonstrating on VS code. 07:05.990 --> 07:09.560 So I hope you join me on this journey to build this application. 07:09.560 --> 07:14.090 And coming up next, we're going to take a look at setting up our developer environment.