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

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 232

  • @tuntunpandit8367
    @tuntunpandit8367 2 роки тому +181

    We Need more Angular projects like this.

  • @AmbrozeSE
    @AmbrozeSE 6 місяців тому +30

    Thanks a lot @Slobodan Gajic. Your teaching style is really easy to follow.

  • @lxdzii
    @lxdzii Рік тому +10

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

  • @Blade7850
    @Blade7850 2 роки тому +20

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

  • @mohammedsalmanali01
    @mohammedsalmanali01 2 роки тому +17

    Thank you for finally posting an Angular Project ❣️

  • @renends7615
    @renends7615 Рік тому +11

    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!

  • @dzejcek
    @dzejcek 3 місяці тому +9

    Hi, honest question: why would you use stripe.js library to riderict to checkout on the frontend? Can't you just use angular router/window object to redirect to created url (session object on backend has property url as far as i know)?

  • @Pratip.
    @Pratip. 2 роки тому +6

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

  • @piyushchaudhari2708
    @piyushchaudhari2708 2 роки тому +9

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

  • @deluxe9490
    @deluxe9490 2 роки тому +19

    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 2 роки тому +3

      You’re welcome

    • @shantisuma7738
      @shantisuma7738 2 роки тому +2

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

    • @karunabisen
      @karunabisen Рік тому

      I need complete mean stack project

  • @panayiotispanayiotou1637
    @panayiotispanayiotou1637 2 роки тому +5

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

  • @damin1916
    @damin1916 2 роки тому +9

    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!!!

  • @MrTubber44
    @MrTubber44 Рік тому +3

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

  • @eliuddyn
    @eliuddyn 2 роки тому +4

    Best Angular Tutorial ever 🔥🔥

  • @gamehubgamer3678
    @gamehubgamer3678 2 роки тому +152

    Finally, Angular project......

    • @pravinjadhav8055
      @pravinjadhav8055 2 роки тому +39

      So true, everyone is running behind reactjs

    • @CodewithSloba
      @CodewithSloba 2 роки тому +31

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

    • @coupleodevs
      @coupleodevs 2 роки тому +17

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

    • @gommonebucato1562
      @gommonebucato1562 Рік тому +10

      @@coupleodevs where are you from?

    • @Afdac247
      @Afdac247 Рік тому +6

      ​@@coupleodevs where r u from

  • @MaximusRGZ
    @MaximusRGZ 2 роки тому +9

    Amazing tutorial, it's really complete

  • @realVvD
    @realVvD 11 місяців тому +2

    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.

  • @sagar2165
    @sagar2165 2 роки тому +8

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

  • @jmarcetaa
    @jmarcetaa 2 роки тому +2

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

  • @natnaelsisay1424
    @natnaelsisay1424 7 місяців тому

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

  • @MrTubber44
    @MrTubber44 Рік тому

    Excellent Sloba. Thx!

  • @CamiloMazorra
    @CamiloMazorra Рік тому +3

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

  • @fparween5248
    @fparween5248 2 роки тому +1

    Thanks for Angular project.😊 Need more projects

  • @shubhampatankar1468
    @shubhampatankar1468 2 роки тому +4

    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....🙏

  • @mohammadparsamaliyani9529
    @mohammadparsamaliyani9529 4 місяці тому +3

    عالی هادی میره واسه ی قهرمانی🎉🎉

  • @karolwrzesinski7531
    @karolwrzesinski7531 2 роки тому +3

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

  • @ntesla5
    @ntesla5 6 місяців тому

    Great tutorial , thank you very much

  • @BegueMarieantoinette
    @BegueMarieantoinette 10 місяців тому

    Remerci boeur pour le travil vous farie nous le monde❤

  • @GGSoft2009
    @GGSoft2009 Рік тому

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

  • @chicorafa
    @chicorafa 7 місяців тому +3

    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?

  • @leeroysdad
    @leeroysdad 2 роки тому

    This is so helpful 💯💯💯

  • @martinbraga6655
    @martinbraga6655 Рік тому +1

    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

  • @ayashkh
    @ayashkh Рік тому

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

  • @ashiktm5631
    @ashiktm5631 2 роки тому +2

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

    • @merlinwarage
      @merlinwarage 2 роки тому +1

      The cart.next() updates the subject.

    • @ashiktm5631
      @ashiktm5631 2 роки тому +1

      @@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 2 роки тому +1

      @@ashiktm5631 and i have the same question

    • @arunshankark9857
      @arunshankark9857 Рік тому

      Hi
      ItemInCart + = 1 means
      ItemInCart = ItemInCart + 1

  • @abrhamgg3647
    @abrhamgg3647 Рік тому +3

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

  • @Lokibee1234
    @Lokibee1234 Рік тому +4

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

  • @bhavikprajapati5400
    @bhavikprajapati5400 2 роки тому +7

    justify-between not working don't know why

  • @AGUNGKAYA
    @AGUNGKAYA 2 роки тому +6

    I love angular

  • @dallasbaldwin4501
    @dallasbaldwin4501 7 місяців тому +1

    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

  • @alfonzo444
    @alfonzo444 2 роки тому +1

    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 Рік тому +1

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

    • @chinomorales6293
      @chinomorales6293 11 місяців тому

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

  • @kingstonic3504
    @kingstonic3504 Рік тому

    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 Рік тому

      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 Рік тому +1

      @@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 Рік тому

      @@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.

  • @agu160579
    @agu160579 2 роки тому +1

    First learning it.

  • @thedeeprot
    @thedeeprot 2 роки тому +1

    👌👌👌

  • @Salma.Louhichi
    @Salma.Louhichi Рік тому +2

    We need projects like this with Angular 15 please ♥

  • @BrianRiendeau
    @BrianRiendeau Рік тому +2

    This project is already outdated, not sure how to get this working or installed since 14.0.0 is not supported anymore for angular. And trying to do the course in 15 does not work, most of the html selectors like justify-content space-between do not work anymore. please provide a fix.

    • @mayuraandrew
      @mayuraandrew Рік тому

      did you find a solution for that??

    • @kevamorim
      @kevamorim Рік тому +3

      They work. You probably didn’t setup tailwindcss correctly

    • @marcogrillo3396
      @marcogrillo3396 Рік тому +3

      @@kevamorim They don't work. Did the exact same things as he did and tailwind is not working properly.

  • @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.

  • @nataliavrs
    @nataliavrs 2 роки тому +2

    Angular = ❤

  • @miladmashayekhi6235
    @miladmashayekhi6235 Місяць тому

    I wish this project had an admin panel!

  • @jdicoder
    @jdicoder 2 роки тому +1

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

    • @CodewithSloba
      @CodewithSloba 2 роки тому

      Because that is the root 😁

    • @nunoarruda
      @nunoarruda Рік тому

      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.

  • @gachecem_yt
    @gachecem_yt 4 місяці тому

    would be cool if this had a details product page

  • @Almighty_Flat_Earth
    @Almighty_Flat_Earth 2 роки тому +8

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

  • @Almighty_Flat_Earth
    @Almighty_Flat_Earth 2 роки тому +3

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

  • @abrahamsecoe87
    @abrahamsecoe87 10 місяців тому

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

  • @dheerajvithalkar
    @dheerajvithalkar Рік тому +1

    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. 😑

  • @Vishnu.sfambruh
    @Vishnu.sfambruh 2 місяці тому

    Ankaur bhai shi hai sath me aapke

  • @hieudaica1304
    @hieudaica1304 Рік тому +1

    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?

  • @PixQuilly
    @PixQuilly День тому

    {{ '150' | currency}} doesn't work for me. Is this because I'm using Angular 19?

  • @bangzino
    @bangzino 2 роки тому

    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

  • @eleonora3139
    @eleonora3139 Рік тому

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

  • @mmd10-m9o
    @mmd10-m9o Рік тому

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

  • @sidarthg2477
    @sidarthg2477 Рік тому

    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

  • @Abs272b
    @Abs272b 2 роки тому

    I want to donate my kidney to this channel

  • @nikolaivanovic8851
    @nikolaivanovic8851 Рік тому

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

    • @Msmc123
      @Msmc123 10 місяців тому

      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.

  • @fedechiar1
    @fedechiar1 Рік тому

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

    • @piyushkumar-jw8eb
      @piyushkumar-jw8eb 10 місяців тому

      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;
      }

  • @Errormakesmarter
    @Errormakesmarter 2 місяці тому

    Which version of angular is this

  • @tamilselvan152
    @tamilselvan152 Рік тому

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

  • @logiccomputer8000
    @logiccomputer8000 Рік тому

    We need more angular project

  • @manarkrid1700
    @manarkrid1700 2 роки тому +1

    there is no database ?

  • @georgenc7605
    @georgenc7605 2 роки тому +2

    Nice

  • @puscjom8279
    @puscjom8279 Рік тому +2

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

  • @vusimashaba3417
    @vusimashaba3417 Рік тому

    which stylesheet did u choose in the cmd?

  • @alvirarahman1559
    @alvirarahman1559 2 роки тому +4

    Please post more Angular content T_T

  • @Danjames-w4r
    @Danjames-w4r 10 місяців тому

    Which node js version dose this project use?

  • @shadowgazesup
    @shadowgazesup Рік тому

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

  • @franklin1014op
    @franklin1014op Рік тому

    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

  • @orkhanfarmanli
    @orkhanfarmanli 2 роки тому +2

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

    • @CodewithSloba
      @CodewithSloba 2 роки тому

      Sorry to hear that, but I see your point.

  • @roysonsalis4915
    @roysonsalis4915 2 роки тому +2

    Can we use online code editors?

  • @mboe94
    @mboe94 Рік тому

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

  • @BrunoSilva-mx1ut
    @BrunoSilva-mx1ut Рік тому +1

    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

  • @rlosangeleskings
    @rlosangeleskings 2 роки тому

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

  • @amrashour7285
    @amrashour7285 Рік тому

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

  • @benothmanbechir7729
    @benothmanbechir7729 Рік тому

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

  • @devkodar303
    @devkodar303 2 роки тому

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

  • @betogalvez2891
    @betogalvez2891 2 роки тому +1

    Great tutorial... @ 21:17 justify-content doesn't work for me, anyone?
    Update: Welp I guess the flex class was missing. I added a global utility class like in Angular Material docs instead:
    .flexit-spacer {
    flex: 1 1 auto;
    }
    I hope it doesn't kick me in the azz later.

    • @CodewithSloba
      @CodewithSloba 2 роки тому +1

      You have flex class in the tailwind

    • @chrisortiz3133
      @chrisortiz3133 2 роки тому +1

      Hey, the reason justify-content didn't work correctly for you is because you didn't setup tailwindcss correctly.

    • @betogalvez2891
      @betogalvez2891 2 роки тому

      @@chrisortiz3133 Yeah, I'm going to do re-do it, I forgot about this project.

    • @BrianRiendeau
      @BrianRiendeau Рік тому +2

      @@chrisortiz3133 how so? I installed tailwind exactly how the video says and justify-content does not work for me either

    • @BRODERVEVO
      @BRODERVEVO Рік тому

      @@BrianRiendeau you need a class of display:flex with your justify content

  • @shortscut7614
    @shortscut7614 2 роки тому +1

    1:58:12

  • @TheQdfqdsf
    @TheQdfqdsf Рік тому

    Someone is hungry at 2:17:20 😅

  • @DiederickvanZyl-u3o
    @DiederickvanZyl-u3o Рік тому

    Why do people use tailwind?

  • @Nayandin77
    @Nayandin77 Рік тому +1

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

  • @vitorvono
    @vitorvono Рік тому

    My checkout is not working =(

  • @varun2716
    @varun2716 2 роки тому +2

    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

  • @ecofirewall6676
    @ecofirewall6676 Рік тому

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

  • @mercee9980
    @mercee9980 2 роки тому +1

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

  • @atanughosh2959
    @atanughosh2959 2 роки тому +1

    Good

  • @SnowdenFu-jh6bx
    @SnowdenFu-jh6bx Рік тому

    package 1. material 2. tailwindcss

  • @Nodsaibot
    @Nodsaibot 2 роки тому +1

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

  • @KanchanaRathod-g7h
    @KanchanaRathod-g7h Місяць тому

    Amazing

  • @Powerdevpodcast
    @Powerdevpodcast Рік тому

    Fakestoreapi site is down

  • @spraveenitpro
    @spraveenitpro 2 роки тому +3

    Please make a React version of this.

  • @nocturnewarrior8649
    @nocturnewarrior8649 2 роки тому +1

    First comment 🎉🎉🎉

  • @mylenav
    @mylenav 9 місяців тому +1

    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: ua-cam.com/video/9p5ZXUmLKPs/v-deo.html
    I just was able to move on with this project after specifying the material version i was installing.