Build a Webshop - Angular, Node.js, TypeScript, Stripe

Build a Webshop! In this tutorial, we are going to build a webshop or e-commerce store using Angular/TypeScript, Express.js, and Stripe.
We are gonna learn how to use Angular material and Tailwind to structure our UI and how to integrate store API into our app.
Also at the end, we will build a checkout, and we are gonna integrate Stripe so that we can process payments.
✏️ Slobodan Gajic created this course. Check out his channel: / codewithsloba
⭐️ Resources ⭐️
Code: github.com/bobangajicsm/E-Com...
Fake store API: fakestoreapi.com/
Stripe: stripe.com/
Prebuilt checkout page: stripe.com/docs/checkout/quic...
Stripe Shipping Code: stripe.com/docs/payments/chec...
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:01:01) Installing dependencies and project setup
⌨️ (0:18:11) Building home page
⌨️ (1:27:11) Building cart page
⌨️ (1:58:26) Implementing Cart logic
⌨️ (2:48:08) Implementing Store API
⌨️ (3:16:06) Stripe payment implementation
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 196

  • @tuntunpandit8367
    @tuntunpandit8367 Жыл бұрын

    We Need more Angular projects like this.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Thank you ❤

  • @go_lang_thang

    @go_lang_thang

    8 ай бұрын

    me too bro

  • @gamehubgamer3678
    @gamehubgamer3678 Жыл бұрын

    Finally, Angular project......

  • @pravinjadhav8055

    @pravinjadhav8055

    Жыл бұрын

    So true, everyone is running behind reactjs

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    I'm glad there is people who like Angular over React

  • @coupleodevs

    @coupleodevs

    Жыл бұрын

    react is amazing, im learning Angular because local jobs are 90% angular

  • @gommonebucato1562

    @gommonebucato1562

    Жыл бұрын

    @@coupleodevs where are you from?

  • @Afdac247

    @Afdac247

    Жыл бұрын

    ​@@coupleodevs where r u from

  • @renends7615
    @renends7615 Жыл бұрын

    This tutorial is excellent! The code quality, the tips, the explanation about each code construction. It will be reference! One more written on both channels! Thanks!

  • @Pratip.
    @Pratip. Жыл бұрын

    🔥🔥🔥🔥😤🔥🔥🔥🔥 This Channel can singlehandedly beat all these paid Upskilling sites.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Exactly

  • @Blade7850
    @Blade7850 Жыл бұрын

    Perfect timing. Like 10 minutes ago I started researching stripe for my webshop project

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Awesome!

  • @mohammedsalmanali01
    @mohammedsalmanali01 Жыл бұрын

    Thank you for finally posting an Angular Project ❣️

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    You're welcome!

  • @lxdzii
    @lxdzii10 ай бұрын

    More Angular projects please ❤🎉, this is a beautiful tutorial!!

  • @CamiloMazorra
    @CamiloMazorra11 ай бұрын

    Thanks for this project, I've learned a lot. Keep the angular projects coming please

  • @damin1916
    @damin1916 Жыл бұрын

    I changed the sort icon to sort because I thought it looked cool I did the nestjs course recently and i have to say angluar seems to click really well with nestjs. Nice course and thank you for making it for free Slobodan Gajic!!!

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    You’re welcome ❤

  • @realVvD
    @realVvD5 ай бұрын

    Excellent tutorial. The stripe docs was a little different, I had to look for the appropriate code, but still - there is finally a normal production level tutorial for angular on youtube.

  • @deluxe9490
    @deluxe9490 Жыл бұрын

    Amazing, we definitely need more angular and more complex projects ❤️ in future MEAN stack project would be great with more complex nodejs code. Thanks for great video.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    You’re welcome

  • @shantisuma7738

    @shantisuma7738

    Жыл бұрын

    bro do u have any full mean stack project with source code if u have plse share to me bro

  • @karunabisen

    @karunabisen

    9 ай бұрын

    I need complete mean stack project

  • @panayiotispanayiotou1637
    @panayiotispanayiotou1637 Жыл бұрын

    Great tutorial. I didn't expect you can do all this features in 3:47 minutes. It was amazing!!!!

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Thank you

  • @piyushchaudhari2708
    @piyushchaudhari2708 Жыл бұрын

    Thanks a lot...much awaited Angular project I👍

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Thank you!

  • @natnaelsisay1424
    @natnaelsisay142421 күн бұрын

    I have watched the hole video and it was amazing. Thank you

  • @fparween5248
    @fparween5248 Жыл бұрын

    Thanks for Angular project.😊 Need more projects

  • @jmarcetaa
    @jmarcetaa Жыл бұрын

    Sloba please don't listen these haters in the comments, keep making amazing content :)

  • @MaximusRGZ
    @MaximusRGZ Жыл бұрын

    Amazing tutorial, it's really complete

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    I'm glad you like it

  • @MrTubber44
    @MrTubber4411 ай бұрын

    A potential sister project might be, same source code but with a ‘digital products’ implementation? Just an idea. Great stuff! Please continue👍🏾👏🏾🔥🔥🙏🏾

  • @sagar2165
    @sagar2165 Жыл бұрын

    More Angular projects please 🙏🏼🙏🏼🙏🏼🥹🥹🥹

  • @abrhamgg3647
    @abrhamgg3647 Жыл бұрын

    i was following along and "justify-between" isn't working for me.?

  • @MrTubber44
    @MrTubber4411 ай бұрын

    Excellent Sloba. Thx!

  • @shubhampatankar1468
    @shubhampatankar1468 Жыл бұрын

    2nd view ❤️ and first comment...I am huge fan of all courses of free code camp. Please make a proper tutorial for Full stack development using MEAN and MERN stack....🙏

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Awesome!

  • @eliuddyn
    @eliuddyn Жыл бұрын

    Best Angular Tutorial ever 🔥🔥

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Thank you so much

  • @puscjom8279
    @puscjom82799 ай бұрын

    Redirect to checkout is deprecated, you should get session on frontend side.

  • @leeroysdad
    @leeroysdad Жыл бұрын

    This is so helpful 💯💯💯

  • @GGSoft2009
    @GGSoft200910 ай бұрын

    It was very useful, thanks a lot!!!!

  • @filthypirate
    @filthypirate Жыл бұрын

    You can actually move the products lists to the service class and create a caching functionality for all products. This way, you don't have to make unnecessary API request to the server when the data is actually cached inside the array list of products. That way, you can check to see if you have the product inside the services array list before making an API request.

  • @omarmetwally5450

    @omarmetwally5450

    10 ай бұрын

    what if the list is updated ?

  • @filthypirate

    @filthypirate

    10 ай бұрын

    @@omarmetwally5450 Without going too much in details, there are ways to solve that depending on the app, database, etc. You rarely need to fetch all updated lists. But say you're twitter and need constant live update of every list items, then you would need to listen for those server updates in real time. There is no way around it. But most apps don't need or use that kinda real time reactivity. In most reactive apps, you would listen for change per document or data row level, not list level. That means, when someone clicks a list item, you start listening for changes on that item. If that item is not in the database, you show error saying that item no longer exists. ETC

  • @bhavikprajapati5400
    @bhavikprajapati5400 Жыл бұрын

    justify-between not working don't know why

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    You need flex

  • @BrianRiendeau

    @BrianRiendeau

    Жыл бұрын

    @@CodewithSloba what does this mean?

  • @sethshuey974

    @sethshuey974

    Жыл бұрын

    I didn't put justify-between in the correct div.

  • @karolwrzesinski7531
    @karolwrzesinski7531 Жыл бұрын

    I'm gonna go ahead and say this was hard. Learned a lot though, thank you.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Awesome I’m glad

  • @Lokibee1234
    @Lokibee1234 Жыл бұрын

    justify-between is not working , anybody can help me ?

  • @pokumars1511
    @pokumars1511 Жыл бұрын

    I somehow got lost on how the fullWidthMode makes the component full-width. I cant seem to connect when we defined the implementation but it somehow also just works.

  • @mahamadoudjenepo7160
    @mahamadoudjenepo7160 Жыл бұрын

    Hii Good tuto What is the best backend for this king of project and for use Our own API ? Node JS ?

  • @alfonzo444
    @alfonzo444 Жыл бұрын

    Question: i have implemented everything (im currently on hr 1:27) but i cant bind category property and I believe mx-auto class is not working properly (do i have to install bootstrap in project) It is explained in the course that mx-auto class is for putting paddings o centering content, right? anyway thanks for the effort and the material

  • @kozi-corner

    @kozi-corner

    Жыл бұрын

    It's a tailwindCss class not bootstrap. There is no bootstrap in this project

  • @chinomorales6293

    @chinomorales6293

    4 ай бұрын

    hey man, im doing the tutorial and i encountered the issue where category isn't being binded, have you perhaps solved this issue?

  • @sidarthg2477
    @sidarthg24777 ай бұрын

    The course is very nice. But one note i would like to highlight. There is no need to provide the service in the app module as the injectable has a provided in data which does the job. For reference I deliberately dint provide it and the code still works exactly the same

  • @Almighty_Flat_Earth
    @Almighty_Flat_Earth Жыл бұрын

    You should have increased the font size in the code editor. It's hard to read on the phones.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Noted

  • @martinbraga6655
    @martinbraga66558 ай бұрын

    Hey, I closed virtual studio before finishing the tutorial, around the 1:12 minute mark, and now the page loads wierdly. The cart doesn´t open, categories button is small and says "ex", same with the show 12 button, and next to it it says viewviewview. In the console it started throwing this error: ERROR Error: Invalid value "rowHeight" set as rowHeight, and i don´t really know how to fix it

  • @chicorafa
    @chicorafa10 күн бұрын

    Hi, I don't know if I'm the only one, but my categories buttons don't respond well, sometimes I click and they don't trigger the event, even though it is visibly selected. Any idea why?

  • @devkodar303
    @devkodar303 Жыл бұрын

    hey, are u guys ever planning to do an in-depth Roblox studio tutorial with Lua? It would be pretty cool with it! Ty! ❤

  • @Almighty_Flat_Earth
    @Almighty_Flat_Earth Жыл бұрын

    Vue and react make things unimaginably complicated, and those are childish libraries. Professional always prefer Angular, the King of kings.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    I love Angular

  • @agu160579
    @agu160579 Жыл бұрын

    First learning it.

  • @jdicoder
    @jdicoder Жыл бұрын

    I have a little question, Why set services in app.module providers if services have providedIn: 'root' property?

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Because that is the root 😁

  • @nunoarruda

    @nunoarruda

    7 ай бұрын

    Both ways do the same thing, they create a global instance of the service. But yeah, there's no need or no point in using both ways at the same time.

  • @user-sq7si4jz5h
    @user-sq7si4jz5h4 ай бұрын

    Remerci boeur pour le travil vous farie nous le monde❤

  • @aishaghalia1259
    @aishaghalia1259 Жыл бұрын

    We need projects like this with Angular 15 please ♥

  • @EmanAhmed-ht6ny

    @EmanAhmed-ht6ny

    Жыл бұрын

    Is this project not angular 15

  • @ayashkh
    @ayashkh9 ай бұрын

    Thank You very much, I respect your efforts, the finale Part (Payment with Stripe) was very useful for me

  • @dallasbaldwin4501
    @dallasbaldwin450127 күн бұрын

    I'm having a major issue getting this to be on an AWS lambda, and would really appreciate any help. Locally there is no issue, but I cannot get it to host anywhere

  • @ashiktm5631
    @ashiktm5631 Жыл бұрын

    2:11:06 How does itemInCart +=1 change quanitiy in items array?

  • @merlinwarage

    @merlinwarage

    Жыл бұрын

    The cart.next() updates the subject.

  • @ashiktm5631

    @ashiktm5631

    Жыл бұрын

    @@merlinwarage item object is used inside in cart.next() but itemIncart is not used anywhere.so if we increase the quantity how does item object changes?

  • @alexandrudabija1337

    @alexandrudabija1337

    Жыл бұрын

    @@ashiktm5631 and i have the same question

  • @arunshankark9857

    @arunshankark9857

    Жыл бұрын

    Hi ItemInCart + = 1 means ItemInCart = ItemInCart + 1

  • @logiccomputer8000
    @logiccomputer8000 Жыл бұрын

    We need more angular project

  • @nikolaivanovic8851
    @nikolaivanovic88516 ай бұрын

    Why is cart in header component private and in others is not? Great video :)

  • @Msmc123

    @Msmc123

    3 ай бұрын

    We need to use a private property to store the value of the cart, because if we use the cart property to store the value, we will have an infinite loop, because the setter will be called every time we try to set the value of the cart property.

  • @tamilselvan152
    @tamilselvan1527 ай бұрын

    Whenever I refresh the page, the cart gets empty what do I need to do to retain the same

  • @eleonora3139
    @eleonora31398 ай бұрын

    It cannot install agular cli version 14.0.0 at the beginning. It always installs 16.2.0

  • @manarkrid1700
    @manarkrid1700 Жыл бұрын

    there is no database ?

  • @abrahamsecoe87
    @abrahamsecoe873 ай бұрын

    It Seems I am not able to follow. Where ate the 3 line for {{ '150' | currency }} gone??

  • @dheerajvithalkar
    @dheerajvithalkar8 ай бұрын

    i am not able to justify-between because of some reason, I tried to install and reinstall tailwind and the whole project I am not able to send the cart to the extreme end of the page, same with some other classes as well. If anyone has faced the same issue and resolved them, please help me resolve aswell. EDIT: I found out a way of this, you have to make seperate class or id for the element and style it in the styles.css file instead of tailwind css. Works like a charm, but defeats the whole purpose of using tailwind. 😑

  • @vusimashaba3417
    @vusimashaba341710 ай бұрын

    which stylesheet did u choose in the cmd?

  • @jessicaterryberry8795

    @jessicaterryberry8795

    10 ай бұрын

    you can choose the default version css

  • @benothmanbechir7729
    @benothmanbechir772911 ай бұрын

    do this project work with angular 15 or i need to modify it ?

  • @catsanddogs6350

    @catsanddogs6350

    6 ай бұрын

    it'll work quite good.

  • @Nayandin77
    @Nayandin77 Жыл бұрын

    Am I the only one that noticed a snickers bar 1:16:25 🤣

  • @hieudaica1304
    @hieudaica1304 Жыл бұрын

    hello, I am facing a weird problem. The button label is always display after the material icon. Does anyone in here have the same problem like I am?

  • @kingstonic3504
    @kingstonic35048 ай бұрын

    Hey Guys! i followed all the steps,but when we placing the cart icon at 22:00 mins, into the header ,mine is at straight next to the a link on the left side......any reason why?

  • @zeuz3961

    @zeuz3961

    7 ай бұрын

    I had the same issue but i remember i fixed it by looking at the css path. but even after fixing the paths it still doesnt behave proporly but i went further and i am still stuck now at different point espcially when it comes to using tailwindcss

  • @makskrywionek1662

    @makskrywionek1662

    7 ай бұрын

    @@zeuz3961 because mx-auto doesn't work with mat-toolbar anymore, just add .mx-auto selector to the header.component.css file and the path to styleUrls in header.component.ts

  • @CodeF416

    @CodeF416

    5 ай бұрын

    @@makskrywionek1662 Thank you so much. I was also stuck here and had to do that. I don't know why this tutorial hasn't been updated yet.

  • @georgenc7605
    @georgenc7605 Жыл бұрын

    Nice

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Thank you!

  • @nataliavrs
    @nataliavrs Жыл бұрын

    Angular = ❤

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Absolutelly

  • @user-pf8lq2zw7o
    @user-pf8lq2zw7o3 ай бұрын

    Which node js version dose this project use?

  • @sawetnysodziak5192

    @sawetnysodziak5192

    3 ай бұрын

    14 || 16

  • @franklin1014op
    @franklin1014op7 ай бұрын

    Hello, my whole app has gone into dark mode all of the suddent after closing the app and re-launching it. Does anyone know how to fix this? I have already done 1:45 min of the turoial

  • @shadowgazesup
    @shadowgazesup Жыл бұрын

    Why do you use manual subscriptions? In your case there is no sense to do that

  • @bangzino
    @bangzino Жыл бұрын

    2:06:06 Would anyone anwser me that we already have providedIn: 'root' in Cart Serive. Why does we have to provider CartService in App Module again?

  • @lavkedar4199

    @lavkedar4199

    Жыл бұрын

    hello , i haven't seen the complete video , but we dont , providing in app Module and providedIn : root is basically the same thing

  • @alvirarahman1559
    @alvirarahman1559 Жыл бұрын

    Please post more Angular content T_T

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    For sure

  • @rlosangeleskings
    @rlosangeleskings Жыл бұрын

    Looking for a Linux Debian base without M$ being used at all...

  • @AGUNGKAYA
    @AGUNGKAYA Жыл бұрын

    I love angular

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Me too

  • @quantum-t

    @quantum-t

    Жыл бұрын

    hate angular.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    @@quantum-t fair enough

  • @fedechiar1
    @fedechiar15 ай бұрын

    I can't understand why my header toolbar doesn't center itself with mx-auto

  • @piyushkumar-jw8eb

    @piyushkumar-jw8eb

    3 ай бұрын

    you have to overridde the .mat-toolbar class by defuat its margin:0; .mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6{ margin:0 auto; }

  • @roysonsalis4915
    @roysonsalis4915 Жыл бұрын

    Can we use online code editors?

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Of course

  • @Xhhdebah
    @Xhhdebah Жыл бұрын

    I want to donate my kidney to this channel

  • @amrashour7285
    @amrashour72859 ай бұрын

    where is the code , it is in github or something ?

  • @atanughosh2959
    @atanughosh2959 Жыл бұрын

    Good

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Thank you

  • @spraveenitpro
    @spraveenitpro Жыл бұрын

    Please make a React version of this.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Great request

  • @thedeeprot
    @thedeeprot Жыл бұрын

    👌👌👌

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Thank you

  • @Martin-xf8be
    @Martin-xf8be Жыл бұрын

    damn, app-header showing red line with me, not working

  • @rroua4374

    @rroua4374

    Жыл бұрын

    same

  • @Nodsaibot
    @Nodsaibot Жыл бұрын

    good for practice but nothing you would use for production at all

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Yep exactly

  • @crazcoder4243
    @crazcoder4243 Жыл бұрын

    Git bash should zoom..

  • @vitorvono
    @vitorvono Жыл бұрын

    My checkout is not working =(

  • @Santon-Motho

    @Santon-Motho

    11 ай бұрын

    what error is it giving you?

  • @naijatechmentor
    @naijatechmentor11 ай бұрын

    Fakestoreapi site is down

  • @BrunoSilva-mx1ut
    @BrunoSilva-mx1ut8 ай бұрын

    Guys don't you thing that using frameworks like tawiling gets your html dirty? i rather much more doing only with sass using BEM pattern

  • @ecofirewall6676
    @ecofirewall66767 ай бұрын

    very good monologue try in radio but forgive students and forget teaching

  • @hxdsgn4375
    @hxdsgn4375 Жыл бұрын

    Nuxt next please

  • @user-nl2vv7yc8h
    @user-nl2vv7yc8h10 ай бұрын

    Why do people use tailwind?

  • @shortscut7614
    @shortscut7614 Жыл бұрын

    1:58:12

  • @TheQdfqdsf
    @TheQdfqdsf6 ай бұрын

    Someone is hungry at 2:17:20 😅

  • @SnowdenFu-jh6bx
    @SnowdenFu-jh6bx9 ай бұрын

    package 1. material 2. tailwindcss

  • @varun2716
    @varun2716 Жыл бұрын

    Which cloud certification has most job opportunities in India? At entry level As I see most people are learning AWS but as I think Nobody can challenge Google hegemony

  • @krtirtho
    @krtirtho Жыл бұрын

    I thought Angular was deprecated

  • @TayambaMwanza

    @TayambaMwanza

    Жыл бұрын

    There's 2 versions "angularjs" is deprecated "angular" is alive and healthy (dumb naming though)

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Why would you think so?

  • @burhaanhassan5498
    @burhaanhassan5498 Жыл бұрын

    Angular is gonna outdate near future

  • @alwaisy
    @alwaisy Жыл бұрын

    why angular? still angular

  • @lpontes4489
    @lpontes448911 ай бұрын

    3:17:12

  • @elyanfi9541
    @elyanfi9541 Жыл бұрын

    57:29

  • @mercee9980
    @mercee9980 Жыл бұрын

    Please I need source code for a website that checks for serial number. More like product authentication using serial number

  • @expertsystem6379
    @expertsystem63796 ай бұрын

    Don't he forget to zoom in or something to be mobile friendly as well, probably very old tutorial but using angular 14 is not that oldwr.

  • @fadumohassan5336
    @fadumohassan5336 Жыл бұрын

    I don't understand

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    First go for basics

  • @nocturnewarrior8649
    @nocturnewarrior8649 Жыл бұрын

    First comment 🎉🎉🎉

  • @orkhanfarmanli
    @orkhanfarmanli Жыл бұрын

    Just came here to say that I hate this thumbnail. It's unnecessary, unprofessional and discouraging. Thanks for your attention.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Sorry to hear that, but I see your point.

  • @mylenav
    @mylenav3 ай бұрын

    I had a problem with angular/material installation, it said: NOT SUPPORTED blabla something with id and $id , if you had it too, check the video: kzread.info/dash/bejne/a6RpvLqOna-xgNY.html I just was able to move on with this project after specifying the material version i was installing.

  • @procode6881
    @procode6881 Жыл бұрын

    People even use Angular now ?

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Absolutelly

  • @merlinwarage

    @merlinwarage

    Жыл бұрын

    I'm working with Angular for 7 years now, and I've got like 2-3 job offers every day, so yeah, a lot of companies need it :)

  • @lfcamacho
    @lfcamacho Жыл бұрын

    The cringe thumbnail tho...

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    Oh sorry to hear that