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