0:02 Hey everyone, how are you? So, I've been
0:04 working on this fullstack angular
0:05 e-commerce project for the past few
0:08 weeks for my next mega tutorial/course
0:10 on YouTube and finally I've been able to
0:12 finish up the front- end part of this
0:15 project and here it is in all its glory.
0:16 Okay, in this video I'm going to take
0:19 you through a brief walk through all of
0:22 the features of this e-commerce project
0:24 and what you can expect in the next few
0:26 days and weeks on my YouTube channel
0:28 related to this. So our app here is a
0:30 full stack e-commerce project. I've
0:31 named it modern store but you can
0:33 actually keep your own logo or come up
0:35 with another creative name if you'd like
0:38 to. It is built with angular 20 angular
0:41 material components and CSS for styling.
0:43 Now our initial page is something like
0:45 this. It's a products grid which is
0:46 really common when you open up your
0:48 e-commerce website any typical
0:50 e-commerce site. It is organized into
0:52 different category that you can see
0:53 here. So you can click on different
0:56 categories here and it's going to filter
0:58 the products information according to
1:00 that category. Now notice if you notice
1:02 closely here you're going to see that
1:05 you have the category here in your root
1:06 parameters here. So this is where
1:09 angular routing comes in and when you
1:11 have your category here your products
1:13 grid is basically derived from the
1:15 category here that you get in your
1:16 route. So if you have clothing here
1:17 you're going to see that we have the
1:19 route parameter as this and this is not
1:22 it. So we also add another parameter
1:24 which is a query parameter and you can
1:25 actually search for stuff as well. So
1:27 for example here we want to search for
1:30 wool here and you're going to see that
1:31 we're going to have a search parameter
1:35 here as well again derived from the URL
1:36 so that it can be shared with others
1:38 just like you would have in a typical
1:40 e-commerce application. Okay. And you
1:42 can close the search here as well so
1:44 that it goes back to the normal state
1:47 and also you are searching within
1:49 different categories as well. So you
1:52 don't find any smart related products in
1:53 clothing but you're going to find them
1:55 in electronics. You're going to find
1:57 them in maybe other categories like home
1:59 and all. You'll find two products here
2:02 related to smart. You can then disable
2:04 this. Now the products here are filtered
2:05 and all of the state is maintained using
2:07 the ngx signal store which is a
2:09 lightweight store and my personal
2:11 favorite for state management in
2:13 angular. And uh in case you haven't
2:14 noticed though when we were changing the
2:16 categories you'll see this nice
2:19 transition effect and this is basically
2:21 your view transitions API. So if for
2:23 example you go from all to accessories
2:26 here you're going to see that two cards
2:28 basically just shift positions just like
2:30 you would change thing you would change
2:32 the layout and add and subtract
2:34 different things on the UI. Now this is
2:35 all automatically using the view
2:37 transitions API. And speaking of view
2:40 transitions API, once you click on a
2:41 product here, product card, you're going
2:44 to see it in action again. So you can
2:46 see here that the product image
2:48 basically expands into this and you can
2:50 see the root is now the detail of a
2:53 specific product. So this is sort of the
2:55 best use case for view transitions and
2:57 you can see it beautifully implemented
2:59 in this application. All right. So in
3:01 the details page then you will have the
3:02 more detailed information about
3:04 different products including the
3:06 reviews, the view, the prices, the
3:08 description and then a section here in
3:10 which you can specify the quantity to
3:12 add to the cart and you also have a
3:15 heart icon to actually add it to your
3:17 wish list. Below this you have a nice
3:19 customer reviews section and the
3:20 customer reviews just like you would
3:22 have on a normal e-commerce site. Now,
3:24 in the review section, we can't write a
3:26 review as yet because you're actually
3:28 not signed in, but more on that in
3:30 later. And you can see that we have an
3:33 add to card and a uh heart icon here.
3:35 So, let's say we don't want to add this
3:37 to the cart as yet, but we can add it to
3:39 the wish list here. You can see we have
3:42 a nice in notification here. If this is
3:46 using the ng expert hot toast library,
3:47 which is a very nice the notification
3:50 library for angular. And once we add our
3:51 things to a wish list, this product to
3:54 the wish list, you'll see that we have
3:56 one indicator appearing on the heart
3:58 icon here. This heart icon represents
4:01 the wish list page. And we can now go
4:03 back and let's say we want to add more
4:05 products to our wish list. You can see
4:07 that we can click on this and it's going
4:10 to add more to this wish list. Here we
4:12 can see we can click on this and click
4:13 on this and you can see that we are
4:16 having different products here. Okay. So
4:17 let's say we want to see how many
4:19 products we have in our wish list. So
4:20 we're going to click on the wish list
4:22 here and we going we have a similar
4:24 product grid here. Now the difference
4:27 here is that we can move to cart not add
4:29 to cart here and we can also delete
4:30 these items from the wish list. So once
4:33 it's removed you get a notification and
4:35 you can see that the item number is
4:36 removing. So all of the UI is really
4:39 reactive and as you can see it is all
4:42 derived from an NGX signal store which
4:44 will be sort of the highlight of my
4:45 whole tutorial because it's going to
4:48 show how easy and convenient it is to
4:49 maintain state in your angular
4:51 application. Okay. So let's say we want
4:55 to add now these items to my cart and I
4:58 want to buy them. So we can also move it
5:00 move this item to the cart using this
5:01 button here. And now you can see that
5:03 the cart also has an item. And of
5:06 course, we can also clear our wish list
5:07 if you like to, but I'm not going to
5:08 show that here. So, we can continue
5:11 shopping and we can also add to cart
5:12 from here. So, we can also add to cart
5:14 from this. For example, we add added
5:16 this to the leather watch. And we can
5:18 also go in detail and we can add to cart
5:20 from here as well. Let's say we want to
5:22 add two of these. And you can see that
5:24 we have four here. A total of four
5:27 products here. Great. And if you for
5:28 example check out an out of stock
5:29 product here, if you click on this,
5:31 you're going to see this indicator here.
5:33 and it's going to be disabled. You can't
5:36 really add it to your cart. Great. So
5:39 now we can go in your add to cart. Click
5:41 on this and you're going to see a cart
5:43 page here which has a nice wish list
5:45 item here. It's going to show all of the
5:47 items in your wish list and it's going
5:49 to show your products one by one and
5:52 your total which is all reactive here.
5:54 So you can now increase the quantity
5:56 here and you're going to see the p the
5:58 total calculated is increasing. This is
6:00 all the power of signals and computers
6:03 and combined with the NGX signal store.
6:04 Okay. Now, you can also shift some of
6:06 the products. For example, I don't have
6:08 enough budget for my smart TV. So, I'm
6:09 going to shift this to the wish list
6:11 again. And it's going to shift this to
6:13 the wish list. You can see here. But if
6:14 you for example are feeling like you
6:16 need to spend more, you can add all of
6:18 them to the cart as well. So, there's no
6:20 item to the wish list. And now you can
6:22 directly buy them from here. Okay,
6:24 great. So, you have all of these and now
6:27 you can then proceed to check out here.
6:28 Now once you click on proceed to
6:30 checkout, you're going to be given a
6:32 sign-in dialogue here. This dialogue you
6:34 can also come in when you click in from
6:37 here. But this is mandatory when you
6:39 want to proceed to check out because uh
6:41 you usually need user information before
6:43 you can actually go on to complete the
6:45 checkout process. So you have some dummy
6:47 information here and here we're going to
6:49 be faced with our first form. So this is
6:51 where I'm going to explain about angular
6:53 forms and how to implement them
6:55 currently what is the latest best
6:57 practice for it. Of course, eventually
6:58 we are going to shift this to signal
7:00 forms, but currently it is reactive
7:02 forms. Okay, great. And if you don't
7:03 have an account, we can also click on
7:06 sign up here and you're going to go to a
7:08 sign up dialogue where we can do that.
7:09 Now, we're going to leave that here and
7:11 we're going to go back to sign in. And
7:12 we're just going to click on sign in
7:14 now. And once you see sign in, you're
7:16 going to see this user has been logged
7:17 in here like this. You can also sign out
7:19 if you'd like to from here, but I just
7:21 like to continue with the checkout
7:23 process. Okay. So for the checkout we
7:25 are finally on the checkout page and now
7:27 we can add our shipping information here
7:29 this is also a form this as you can see
7:31 the layout has been altered and
7:33 according to my own taste I wanted a
7:36 sort of a less density layout for my
7:38 material design component so I've used
7:40 those and I'm also going to show you how
7:42 we can actually do that for our project
7:44 and then for payment options we're just
7:45 using stripe at this point okay we're
7:47 going to click there's a nice summary
7:49 here and then we're going to do place
7:51 order okay so now we are taken to the
7:53 orders success route here which is sort
7:54 of the route in which we are going to
7:57 come back from the stripe payment page
7:58 if the payment succeeds and now there
8:00 will also be a failure page but I
8:02 haven't shown that here because it's
8:04 difficult to recreate this in this case
8:06 okay and this is where the back end
8:07 comes in so I'm going to tell you more
8:09 about the back end that I plan but in a
8:11 bit okay so we can click on continue
8:13 shopping and we can go back and you can
8:15 see now your add to cart is cleared the
8:17 state has been cleared because you have
8:19 already completed an order okay great so
8:21 now we completed an and you have bought
8:24 something and you have tried it out. Now
8:26 you can go back to this. For example, if
8:28 you have bought the headphones here, you
8:30 can go back down here and because you
8:32 are logged in now you're going to see a
8:34 write a review section here. So you can
8:36 now give a user review. You can say that
8:39 the product was really nice and you can
8:42 give another review. Three points stood
8:44 out. Okay. And you can give four stars
8:46 here and you can submit the review. Once
8:47 you submit the review, you're going to
8:49 see that this automatically changes the
8:52 review. the rating and you can see that
8:54 your review appears now down here just
8:55 like all of the other reviews with your
8:57 username with your user profile
9:00 pictures. Okay. And you go back and then
9:01 you come back here again you're going to
9:03 see this again. So this is now stored in
9:05 your NGX signal store in the original
9:07 product data. Okay. So this was a short
9:08 breakdown of all of the features that we
9:10 are going to be covering in the tutorial
9:12 and this sort of covers the whole flow
9:15 of a typical e-commerce application. Now
9:17 I was surprised myself about how much we
9:20 have to learn if we actually get to
9:22 build such a project. So for the
9:24 tutorial itself, the front- end part
9:26 shown here in this walkthrough is going
9:29 to be completely free released starting
9:30 in the next few days. I'm going to start
9:32 start releasing the parts one by one and
9:34 I'll try to package it into different
9:35 parts based on different Angular
9:37 concepts. So maybe one for content
9:40 projection, dependency injection and all
9:42 of the other features of Angular that
9:44 you need to know about the tips and
9:45 tricks that you need to know about and
9:48 I'm going to give a bit of theory and
9:50 then a bit of practical implementation
9:52 so that we can build a feature using
9:54 that. Now the back end is not added as
9:56 yet as you can see here but I do plan to
9:58 add it and in that respect I'd like
10:00 really like some feedback from you guys
10:02 about it. So I plan to use a modern
10:04 stack for the back end and I plan to use
10:06 for the authentication part I plan to
10:09 use clerk for authentication and for the
10:12 backend DB and server functions I plan
10:14 to use convex DB and convex functions
10:16 for that purpose and then obviously for
10:18 payment integration I want to use stripe
10:20 because that's a standard nowadays I do
10:22 plan to release it but it would only be
10:25 as a premium course offering on my own
10:27 website. So if you will be interested in
10:28 something do let me know in the
10:30 comments. If you're interested a more
10:33 complete package and I will be sure to
10:35 incorporate all of that in my premium
10:38 paid course related to this. Also if you
10:39 feel that there are some features
10:41 missing or you want to see some features
10:43 in the front end part as well do let me
10:44 know in the comments. I really want to
10:47 make it into a more useful course
10:49 covering zero to her angular
10:51 transformation so that you can build
10:54 real projects like this on your own. So
10:56 that's it for now and I hope I have
10:58 covered most of it and I hope you are as
11:01 excited as I am to start work on this
11:02 tutorial and I hope you're going to
11:05 enjoy it on my YouTube channel. So,
11:07 thanks for watching and I'll see you in
11:10 the next video hopefully when I publish
