1 00:00:00,420 --> 00:00:05,650 Hi guys and welcome to our next project e-commerce website called Vintage tech. 2 00:00:05,790 --> 00:00:11,130 Before we look at the application we're going to build let's cover some general info about technologies 3 00:00:11,130 --> 00:00:16,110 we're going to use for a front end of course we're going to use to react and more specifically we're 4 00:00:16,110 --> 00:00:22,080 only going to use a reactive X for our functionality as far as our backend or the API. 5 00:00:22,140 --> 00:00:28,200 We're going to use strappy on awesome open source headless CMOs that will allow you to build your API 6 00:00:28,500 --> 00:00:34,260 in a matter of minutes and includes features like authentication right out of the box in order to process 7 00:00:34,260 --> 00:00:35,100 our payments. 8 00:00:35,100 --> 00:00:40,680 We're going to use stripe the hottest new payment processor on the block and nice alternative to good 9 00:00:40,680 --> 00:00:41,740 old PayPal. 10 00:00:41,910 --> 00:00:48,710 As far as hosting will host are front and on the notify our backend on her uncle and our images on cloud 11 00:00:48,710 --> 00:00:49,330 Marie. 12 00:00:49,410 --> 00:00:55,750 I also like to mention that all technologies were known to use have a free tier option so don't worry. 13 00:00:55,890 --> 00:01:02,580 Your credit card can stay in your wallet when it comes to styling project is responsive meaning it looks 14 00:01:02,580 --> 00:01:08,460 good on any screen size and also all to see is already premade and provided for you. 15 00:01:08,460 --> 00:01:14,280 So that way we don't have to waste our time on styling and can cover all react related topics in more 16 00:01:14,280 --> 00:01:15,060 detail. 17 00:01:15,060 --> 00:01:20,680 Just to quickly recap for the front end of course we're going to use react for a break and we're going 18 00:01:20,680 --> 00:01:23,090 to use strappy to process our payments. 19 00:01:23,100 --> 00:01:24,890 We're going to use stripe. 20 00:01:25,080 --> 00:01:30,700 And then in order to host our back end we're going to use Heroku in order to host our front end. 21 00:01:30,810 --> 00:01:35,010 We're going to use notify Delphi and for the images we're gonna use cloud energy. 22 00:01:35,310 --> 00:01:37,390 So what we're going to build in this project. 23 00:01:37,410 --> 00:01:39,890 Well first of course we're going to have the number. 24 00:01:40,030 --> 00:01:44,740 And then in the homepage there's gonna be a hero section with feature products. 25 00:01:44,850 --> 00:01:47,410 So some products that we would like to showcase. 26 00:01:47,490 --> 00:01:53,160 We have two options of moving to the products we can click on only products link in number or we can 27 00:01:53,160 --> 00:01:58,860 navigate directly from the rink provided in the hero section so we can navigate to a product. 28 00:01:58,860 --> 00:02:03,780 And then of course we have the product page as you're hovering each and every product we're going to 29 00:02:03,780 --> 00:02:10,020 be able to open up a specific page that covers info about this product and we can obviously add it to 30 00:02:10,020 --> 00:02:10,570 the card. 31 00:02:10,670 --> 00:02:14,500 The same war in the homepage where we have the featured products. 32 00:02:14,580 --> 00:02:16,730 Again we're hovering over the products. 33 00:02:16,800 --> 00:02:21,900 And then if I'm going to click on the details then of course I'm navigating to that specific product 34 00:02:22,200 --> 00:02:26,090 and I can add it to the cart before we add anything to the car. 35 00:02:26,370 --> 00:02:32,040 I also like to mention that we're going to cover filtering in this project as well as the presentation. 36 00:02:32,070 --> 00:02:39,060 So hop on top I can filter let's say based on price and then if I only have four products then there's 37 00:02:39,060 --> 00:02:40,490 gonna be no pageant nation. 38 00:02:40,580 --> 00:02:46,280 Or if I would like to display all the prices for my product then of course I'm going to be able to navigate 39 00:02:46,290 --> 00:02:47,940 from one page and another one. 40 00:02:47,940 --> 00:02:54,330 And also we're gonna take a look at how we can have and and lacks buttons as far as filtering we can 41 00:02:54,330 --> 00:02:54,960 type here. 42 00:02:54,960 --> 00:02:56,880 What name would be looking for. 43 00:02:56,880 --> 00:03:01,200 So let's say if I'm going to type W then this is going to show me Windows phone. 44 00:03:01,200 --> 00:03:06,360 So if I would want to look at the computers that start with W then I'm gonna have unfortunately your 45 00:03:06,360 --> 00:03:09,390 search query did not return any product. 46 00:03:09,390 --> 00:03:11,420 So let me go back to the defaults. 47 00:03:11,430 --> 00:03:15,990 I'm going to look for let's say only computers that have the free shipping notice. 48 00:03:16,020 --> 00:03:18,240 As far as computers we have two pages. 49 00:03:18,330 --> 00:03:23,330 And then if we're going to take a look at the free shipping we're only going to have three products. 50 00:03:23,370 --> 00:03:30,000 So we're gonna take a look at how we can filter based on text input based on select based on the checkbox 51 00:03:30,270 --> 00:03:31,880 as well as the radio buttons. 52 00:03:31,920 --> 00:03:37,710 Once you understand how these would work with the react Hooks you're gonna be able to add more filtering 53 00:03:37,920 --> 00:03:39,120 to your project. 54 00:03:39,150 --> 00:03:44,220 And once we have covered our search setup as well as the presentation let's take a look at how we can 55 00:03:44,220 --> 00:03:45,450 add product to the car. 56 00:03:45,810 --> 00:03:48,990 So I'm gonna have the details of course and then I click on the details. 57 00:03:49,020 --> 00:03:51,790 This is gonna give me specific information about the product. 58 00:03:51,810 --> 00:03:57,720 Now I can clearly see that if I navigate to a card page I have the empty card and I would need to fill 59 00:03:57,720 --> 00:03:58,130 it. 60 00:03:58,140 --> 00:04:01,940 So in this case again we can navigate back to our products page. 61 00:04:01,980 --> 00:04:06,810 So let me take a look at one of the products and then I'm going to add this guy to the car notice this 62 00:04:06,810 --> 00:04:08,440 is our card page right now. 63 00:04:08,490 --> 00:04:13,290 We can increase the amount of products that I have in a card or I can decrease it. 64 00:04:13,320 --> 00:04:19,470 Now if I'm gonna go below 1 I'm remove this product from the card again I'm going to navigate back to 65 00:04:19,530 --> 00:04:22,800 a product and then in this case let me try this guy. 66 00:04:23,100 --> 00:04:26,630 So let's go with add to cart I'd want to add more items. 67 00:04:26,640 --> 00:04:28,850 Then again we're going to navigate back to product. 68 00:04:28,980 --> 00:04:35,010 I'm going to go back to default just so we can have more products and I'm also gonna add the radio to 69 00:04:35,010 --> 00:04:35,730 the card. 70 00:04:35,730 --> 00:04:37,890 So now I have seven items. 71 00:04:37,920 --> 00:04:40,970 So the amount of seven even though will have to product. 72 00:04:41,040 --> 00:04:44,580 So of course the first one has six items in the card. 73 00:04:44,610 --> 00:04:46,140 This is gonna be my total. 74 00:04:46,140 --> 00:04:51,940 However we cannot checkout unless we have logged in so we can add everything to the card. 75 00:04:52,010 --> 00:04:56,110 We are gonna use the local storage so that way we're going to persist between there and there. 76 00:04:56,130 --> 00:05:00,230 Because notice even if I refresh the page I still have my car. 77 00:05:00,520 --> 00:05:03,600 So that clearly displays all the information that I had before. 78 00:05:03,700 --> 00:05:06,230 And we're gonna do that using local storage. 79 00:05:06,280 --> 00:05:12,360 However in order to pay for our product we're going to have to log in and in order to log in we're going 80 00:05:12,360 --> 00:05:16,910 to have to navigate to a log in page and once in a logon page we have two options. 81 00:05:17,020 --> 00:05:23,220 We can either sign in if the user has already registered or we would need to register first. 82 00:05:23,230 --> 00:05:26,830 So just to show you how this is gonna work I'm going to register first. 83 00:05:26,830 --> 00:05:30,750 I'm gonna come up with some kind of dummy e-mail. 84 00:05:30,860 --> 00:05:37,960 I'm going to show you also some kind of dummy password and then we're gonna go with user name and if 85 00:05:37,960 --> 00:05:44,410 we click on submit if everything goes successful if there is no user with that type of email or that 86 00:05:44,410 --> 00:05:50,670 type of user name then we're gonna log in and I can clearly show that if I navigate my back end and 87 00:05:50,680 --> 00:05:55,990 then I go to my users I'm gonna refresh and you're going to notice that up on the top I'm going to have 88 00:05:55,990 --> 00:06:03,670 John with John at G.M. dot com and only if the user has logged in or signed up then we're going to display 89 00:06:03,670 --> 00:06:04,860 the check on page. 90 00:06:04,960 --> 00:06:10,030 So previously if you remember in the NAV where we did not have a link for to check page and once the 91 00:06:10,030 --> 00:06:13,780 user has registered then of course we show the checkout line. 92 00:06:13,840 --> 00:06:19,360 Also keep in mind that we're going to make sure that we restrict the access using the URL as well. 93 00:06:19,660 --> 00:06:25,720 So essentially if the user hasn't logged in or registered he or she is not going to be able to go to 94 00:06:25,720 --> 00:06:29,690 your URL and then type forward slash checkout and navigate to that page. 95 00:06:29,830 --> 00:06:35,490 The access to that page is going to be restricted and only if the user has logged in or register as 96 00:06:35,610 --> 00:06:38,210 then he or she is going to be able to access it. 97 00:06:38,230 --> 00:06:43,720 So we have our card and we have our checkout and I can see my totals that matches exactly the same that 98 00:06:43,720 --> 00:06:44,790 I have in the card. 99 00:06:44,980 --> 00:06:48,310 And if I want to submit my order I'm going to have to write some kind of name. 100 00:06:48,640 --> 00:06:49,630 So I'm going to write here. 101 00:06:49,630 --> 00:06:55,700 John's order and then these are gonna be the test values for a stripe. 102 00:06:55,750 --> 00:06:58,330 So I'm just gonna add these test values one by one. 103 00:06:58,390 --> 00:07:00,060 This is gonna be my card number. 104 00:07:00,170 --> 00:07:02,710 Then this is gonna be my expiration date. 105 00:07:02,980 --> 00:07:05,640 And by the way we're gonna be doing the checking. 106 00:07:05,650 --> 00:07:10,420 So essentially if I would want to submit with some kind of invalid values you're going to see that once 107 00:07:10,420 --> 00:07:12,490 we submit we're not able to do it. 108 00:07:12,520 --> 00:07:15,320 So there's gonna be an error where it says your card expiration year. 109 00:07:15,460 --> 00:07:16,720 He is in the past. 110 00:07:16,720 --> 00:07:20,820 So that way we're gonna make sure that user fills out the correct values. 111 00:07:20,860 --> 00:07:23,040 So let me just fill them out. 112 00:07:23,050 --> 00:07:28,450 I'm going to go with some kind of zip code and then once we do we're gonna click on submit. 113 00:07:28,450 --> 00:07:30,440 Now notice how we're submitting the order. 114 00:07:30,640 --> 00:07:35,430 And once the order is late then we're gonna see that in two places we're going to see it on our back 115 00:07:35,430 --> 00:07:37,050 end where we have the orders. 116 00:07:37,060 --> 00:07:39,010 You're going to see that this is gonna be John's order. 117 00:07:39,030 --> 00:07:44,230 And if I navigate to my stripe dashboard I can see that I have the same charge there as well. 118 00:07:44,230 --> 00:07:46,810 This is gonna be our project guys hopefully you enjoy it. 119 00:07:46,810 --> 00:07:48,730 And let's start working on the project.