1 00:00:02,120 --> 00:00:04,930 This will be a huge course section, 2 00:00:04,930 --> 00:00:08,430 a very long course section because in this course section, 3 00:00:08,430 --> 00:00:10,960 we are going to build a milestone project. 4 00:00:10,960 --> 00:00:13,280 We're building a complete online shop 5 00:00:13,280 --> 00:00:15,770 from the ground up A to Z, 6 00:00:15,770 --> 00:00:18,330 and we're going to apply all these core concepts 7 00:00:18,330 --> 00:00:20,590 we learn about throughout this course. 8 00:00:20,590 --> 00:00:22,880 We're going to build the frontend and the backend. 9 00:00:22,880 --> 00:00:25,400 We're going to write HTML and CSS code, 10 00:00:25,400 --> 00:00:28,880 browser side JavaScript and backend JavaScript code. 11 00:00:28,880 --> 00:00:30,730 We're going to work with a database. 12 00:00:30,730 --> 00:00:33,560 It will all be in this course section. 13 00:00:33,560 --> 00:00:37,600 Now, I'll also say right away, this is a big course section, 14 00:00:37,600 --> 00:00:40,340 and we'll walk through all these steps together, 15 00:00:40,340 --> 00:00:44,070 but this course section is also a great practice for you. 16 00:00:44,070 --> 00:00:47,100 I'll mention it again in the next course lecture, 17 00:00:47,100 --> 00:00:50,170 but definitely take this course section as an opportunity 18 00:00:50,170 --> 00:00:52,010 to practice what you learned. 19 00:00:52,010 --> 00:00:55,160 I'll show you the finished online shop in just a second. 20 00:00:55,160 --> 00:00:57,790 And you can then try building this on your own 21 00:00:57,790 --> 00:00:59,080 from the ground up, 22 00:00:59,080 --> 00:01:02,800 or you just follow along with the lectures step-by-step, 23 00:01:02,800 --> 00:01:04,800 but pause frequently, 24 00:01:04,800 --> 00:01:07,360 try building those next features 25 00:01:07,360 --> 00:01:09,280 we are about to add together 26 00:01:09,280 --> 00:01:11,500 in the lectures on your own first 27 00:01:11,500 --> 00:01:14,470 before you then continue with the lectures. 28 00:01:14,470 --> 00:01:15,760 After a lecture is finished, 29 00:01:15,760 --> 00:01:18,460 maybe try rebuilding what we built on your own. 30 00:01:18,460 --> 00:01:21,590 This is really meant to be a big exercise, 31 00:01:21,590 --> 00:01:23,990 so definitely use it as an exercise 32 00:01:23,990 --> 00:01:27,050 in order to get the most out of this course. 33 00:01:27,050 --> 00:01:29,620 Now, what are we going to build? 34 00:01:29,620 --> 00:01:31,550 Well, an online shop, as I mentioned, 35 00:01:31,550 --> 00:01:34,780 an online shop where you as a regular user, 36 00:01:34,780 --> 00:01:37,150 no matter if you are logged in or not, 37 00:01:37,150 --> 00:01:39,770 and yes, we're going to add authentication, 38 00:01:39,770 --> 00:01:43,510 but where you as a regular user can browse goods, 39 00:01:43,510 --> 00:01:46,540 add them to your cart and where you then, of course, 40 00:01:46,540 --> 00:01:49,070 also can log in or create an account 41 00:01:49,070 --> 00:01:52,600 and then log in to purchase those goods 42 00:01:52,600 --> 00:01:54,550 because you will be able to browse the page 43 00:01:54,550 --> 00:01:56,070 in unauthenticated mode, 44 00:01:56,070 --> 00:01:58,060 but you will need to sign up and sign in 45 00:01:58,060 --> 00:01:59,490 to then purchase goods. 46 00:01:59,490 --> 00:02:01,560 Now, we also have some validation 47 00:02:01,560 --> 00:02:04,010 to ensure you're providing correct data. 48 00:02:04,010 --> 00:02:06,800 And then once you have an account and you did log in, 49 00:02:06,800 --> 00:02:10,169 you can buy goods and view all your orders 50 00:02:10,169 --> 00:02:12,390 once you made a purchase. 51 00:02:12,390 --> 00:02:14,860 Now, this is one side of the online shop, 52 00:02:14,860 --> 00:02:18,100 the customer-facing side, where you can browse goods, 53 00:02:18,100 --> 00:02:20,750 add them to your cart, update them in your cart, 54 00:02:20,750 --> 00:02:22,713 view your orders and so on. 55 00:02:23,600 --> 00:02:27,540 We also have another side, the administration side. 56 00:02:27,540 --> 00:02:29,680 If you log in with a special user, 57 00:02:29,680 --> 00:02:32,280 which we'll create together in this course section, 58 00:02:32,280 --> 00:02:34,570 then you see a different interface. 59 00:02:34,570 --> 00:02:37,720 You can now manage products and manage orders. 60 00:02:37,720 --> 00:02:39,270 And when you manage products, 61 00:02:39,270 --> 00:02:42,200 you can update existing products or delete them. 62 00:02:42,200 --> 00:02:44,660 You can also create new products though, 63 00:02:44,660 --> 00:02:46,590 add a price and a description 64 00:02:46,590 --> 00:02:48,010 and all these details, 65 00:02:48,010 --> 00:02:50,980 upload an image, we'll add this as well. 66 00:02:50,980 --> 00:02:53,170 And then once the product was added, 67 00:02:53,170 --> 00:02:55,480 users can of course buy it. 68 00:02:55,480 --> 00:02:57,620 You can, of course, also view all the orders 69 00:02:57,620 --> 00:02:59,480 placed by all the customers. 70 00:02:59,480 --> 00:03:01,470 And there, as an administrator, 71 00:03:01,470 --> 00:03:04,770 you will also be able to update the order status. 72 00:03:04,770 --> 00:03:07,510 So that, for example, once you shipped an order, 73 00:03:07,510 --> 00:03:10,070 you can show that to your customers. 74 00:03:10,070 --> 00:03:12,500 This is the online shop we built and, of course, 75 00:03:12,500 --> 00:03:14,370 feel free to experiment with that 76 00:03:14,370 --> 00:03:18,000 and add more features at the end and do whatever you want, 77 00:03:18,000 --> 00:03:20,010 but this is what we'll build step-by-step 78 00:03:20,010 --> 00:03:22,110 over the next course sections. 79 00:03:22,110 --> 00:03:25,470 And for that, we're going to start by planning this project, 80 00:03:25,470 --> 00:03:29,020 planning the data we need and the main views we need, 81 00:03:29,020 --> 00:03:30,990 and we will then write both the frontend, 82 00:03:30,990 --> 00:03:34,870 so the HTML, CSS, and browser side JavaScript code, 83 00:03:34,870 --> 00:03:38,060 as well as all the backend code which we need. 84 00:03:38,060 --> 00:03:40,080 We're also going to use a database, 85 00:03:40,080 --> 00:03:41,950 MongoDB in this course section 86 00:03:41,950 --> 00:03:44,720 since we worked a lot with that throughout the course. 87 00:03:44,720 --> 00:03:47,080 You could also build it with MySQL though. 88 00:03:47,080 --> 00:03:50,510 You don't need MongoDB, but that's what we will use here. 89 00:03:50,510 --> 00:03:52,330 And therefore, by the end of this course section, 90 00:03:52,330 --> 00:03:55,370 we will have practiced all these key concepts, 91 00:03:55,370 --> 00:03:57,570 which we worked with over and over again 92 00:03:57,570 --> 00:03:58,973 throughout this course.