Тёмный

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

freeCodeCamp.org
Подписаться 10 млн
Просмотров 304 тыс.
50% 1

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

Опубликовано:

 

25 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 201   
@tuntunpandit8367
@tuntunpandit8367 Год назад
We Need more Angular projects like this.
@CodewithSloba
@CodewithSloba Год назад
Thank you ❤
@go_lang_thang
@go_lang_thang 9 месяцев назад
me too bro
@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!
@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
@Blade7850
@Blade7850 Год назад
Perfect timing. Like 10 minutes ago I started researching stripe for my webshop project
@CodewithSloba
@CodewithSloba Год назад
Awesome!
@user-zb9ub5nd1z
@user-zb9ub5nd1z Месяц назад
Thanks a lot @Slobodan Gajic. Your teaching style is really easy to follow.
@lxdzii
@lxdzii Год назад
More Angular projects please ❤🎉, this is a beautiful tutorial!!
@CamiloMazorra
@CamiloMazorra Год назад
Thanks for this project, I've learned a lot. Keep the angular projects coming please
@mohammedsalmanali01
@mohammedsalmanali01 Год назад
Thank you for finally posting an Angular Project ❣️
@CodewithSloba
@CodewithSloba Год назад
You're welcome!
@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
@Pratip.
@Pratip. Год назад
🔥🔥🔥🔥😤🔥🔥🔥🔥 This Channel can singlehandedly beat all these paid Upskilling sites.
@CodewithSloba
@CodewithSloba Год назад
Exactly
@fparween5248
@fparween5248 Год назад
Thanks for Angular project.😊 Need more projects
@piyushchaudhari2708
@piyushchaudhari2708 Год назад
Thanks a lot...much awaited Angular project I👍
@CodewithSloba
@CodewithSloba Год назад
Thank you!
@MrTubber44
@MrTubber44 Год назад
Excellent Sloba. Thx!
@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 11 месяцев назад
I need complete mean stack project
@MaximusRGZ
@MaximusRGZ Год назад
Amazing tutorial, it's really complete
@CodewithSloba
@CodewithSloba Год назад
I'm glad you like it
@realVvD
@realVvD 6 месяцев назад
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.
@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 ❤
@GGSoft2009
@GGSoft2009 Год назад
It was very useful, thanks a lot!!!!
@leeroysdad
@leeroysdad Год назад
This is so helpful 💯💯💯
@ntesla5
@ntesla5 Месяц назад
Great tutorial , thank you very much
@natnaelsisay1424
@natnaelsisay1424 2 месяца назад
I have watched the hole video and it was amazing. Thank you
@MrTubber44
@MrTubber44 Год назад
A potential sister project might be, same source code but with a ‘digital products’ implementation? Just an idea. Great stuff! Please continue👍🏾👏🏾🔥🔥🙏🏾
@eliuddyn
@eliuddyn Год назад
Best Angular Tutorial ever 🔥🔥
@CodewithSloba
@CodewithSloba Год назад
Thank you so much
@karolwrzesinski7531
@karolwrzesinski7531 Год назад
I'm gonna go ahead and say this was hard. Learned a lot though, thank you.
@CodewithSloba
@CodewithSloba Год назад
Awesome I’m glad
@sagar2165
@sagar2165 Год назад
More Angular projects please 🙏🏼🙏🏼🙏🏼🥹🥹🥹
@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!
@jmarcetaa
@jmarcetaa Год назад
Sloba please don't listen these haters in the comments, keep making amazing content :)
@agu160579
@agu160579 Год назад
First learning it.
@user-sq7si4jz5h
@user-sq7si4jz5h 5 месяцев назад
Remerci boeur pour le travil vous farie nous le monde❤
@thedeeprot
@thedeeprot Год назад
👌👌👌
@CodewithSloba
@CodewithSloba Год назад
Thank you
@mahamadoudjenepo7160
@mahamadoudjenepo7160 Год назад
Hii Good tuto What is the best backend for this king of project and for use Our own API ? Node JS ?
@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.
@puscjom8279
@puscjom8279 11 месяцев назад
Redirect to checkout is deprecated, you should get session on frontend side.
@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 Год назад
what if the list is updated ?
@filthypirate
@filthypirate Год назад
@@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
@ayashkh
@ayashkh 11 месяцев назад
Thank You very much, I respect your efforts, the finale Part (Payment with Stripe) was very useful for me
@georgenc7605
@georgenc7605 Год назад
Nice
@CodewithSloba
@CodewithSloba Год назад
Thank you!
@Lokibee1234
@Lokibee1234 Год назад
justify-between is not working , anybody can help me ?
@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
@martinbraga6655
@martinbraga6655 10 месяцев назад
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
@logiccomputer8000
@logiccomputer8000 Год назад
We need more angular project
@aishaghalia1259
@aishaghalia1259 Год назад
We need projects like this with Angular 15 please ♥
@EmanAhmed-ht6ny
@EmanAhmed-ht6ny Год назад
Is this project not angular 15
@nataliavrs
@nataliavrs Год назад
Angular = ❤
@CodewithSloba
@CodewithSloba Год назад
Absolutelly
@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 6 месяцев назад
hey man, im doing the tutorial and i encountered the issue where category isn't being binded, have you perhaps solved this issue?
@sidarthg2477
@sidarthg2477 8 месяцев назад
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
@AGUNGKAYA
@AGUNGKAYA Год назад
I love angular
@CodewithSloba
@CodewithSloba Год назад
Me too
@quantum-t
@quantum-t Год назад
hate angular.
@CodewithSloba
@CodewithSloba Год назад
@@quantum-t fair enough
@dheerajvithalkar
@dheerajvithalkar 10 месяцев назад
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. 😑
@abrhamgg3647
@abrhamgg3647 Год назад
i was following along and "justify-between" isn't working for me.?
@user-ve2hg9cp1k
@user-ve2hg9cp1k 8 дней назад
me too
@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.
@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?
@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 8 месяцев назад
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.
@eleonora3139
@eleonora3139 9 месяцев назад
It cannot install agular cli version 14.0.0 at the beginning. It always installs 16.2.0
@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
@manarkrid1700
@manarkrid1700 Год назад
there is no database ?
@dallasbaldwin4501
@dallasbaldwin4501 2 месяца назад
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
@tamilselvan152
@tamilselvan152 8 месяцев назад
Whenever I refresh the page, the cart gets empty what do I need to do to retain the same
@atanughosh2959
@atanughosh2959 Год назад
Good
@CodewithSloba
@CodewithSloba Год назад
Thank you
@nocturnewarrior8649
@nocturnewarrior8649 Год назад
First comment 🎉🎉🎉
@vusimashaba3417
@vusimashaba3417 Год назад
which stylesheet did u choose in the cmd?
@jessicaterryberry
@jessicaterryberry Год назад
you can choose the default version css
@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
@benothmanbechir7729
@benothmanbechir7729 Год назад
do this project work with angular 15 or i need to modify it ?
@catsanddogs6350
@catsanddogs6350 8 месяцев назад
it'll work quite good.
@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
@rlosangeleskings
@rlosangeleskings Год назад
Looking for a Linux Debian base without M$ being used at all...
@franklin1014op
@franklin1014op 8 месяцев назад
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
@Nayandin77
@Nayandin77 Год назад
Am I the only one that noticed a snickers bar 1:16:25 🤣
@chicorafa
@chicorafa 2 месяца назад
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?
@nikolaivanovic8851
@nikolaivanovic8851 7 месяцев назад
Why is cart in header component private and in others is not? Great video :)
@Msmc123
@Msmc123 5 месяцев назад
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.
@hellenickemetist
@hellenickemetist Год назад
I want to donate my kidney to this channel
@shadowgazesup
@shadowgazesup Год назад
Why do you use manual subscriptions? In your case there is no sense to do that
@alvirarahman1559
@alvirarahman1559 Год назад
Please post more Angular content T_T
@CodewithSloba
@CodewithSloba Год назад
For sure
@user-pf8lq2zw7o
@user-pf8lq2zw7o 5 месяцев назад
Which node js version dose this project use?
@sawetnysodziak5192
@sawetnysodziak5192 4 месяца назад
14 || 16
@abrahamsecoe87
@abrahamsecoe87 5 месяцев назад
It Seems I am not able to follow. Where ate the 3 line for {{ '150' | currency }} gone??
@kingstonic3504
@kingstonic3504 9 месяцев назад
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 9 месяцев назад
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 8 месяцев назад
@@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 7 месяцев назад
@@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.
@crazcoder4243
@crazcoder4243 Год назад
Git bash should zoom..
@Nodsaibot
@Nodsaibot Год назад
good for practice but nothing you would use for production at all
@CodewithSloba
@CodewithSloba Год назад
Yep exactly
@hxdsgn4375
@hxdsgn4375 Год назад
Nuxt next please
@amrashour7285
@amrashour7285 10 месяцев назад
where is the code , it is in github or something ?
@ecofirewall6676
@ecofirewall6676 8 месяцев назад
very good monologue try in radio but forgive students and forget teaching
@BrunoSilva-mx1ut
@BrunoSilva-mx1ut 10 месяцев назад
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
@fedechiar1
@fedechiar1 7 месяцев назад
I can't understand why my header toolbar doesn't center itself with mx-auto
@piyushkumar-jw8eb
@piyushkumar-jw8eb 5 месяцев назад
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; }
@shortscut7614
@shortscut7614 Год назад
1:58:12
@spraveenitpro
@spraveenitpro Год назад
Please make a React version of this.
@CodewithSloba
@CodewithSloba Год назад
Great request
@mboe94
@mboe94 Год назад
damn, app-header showing red line with me, not working
@rroua4374
@rroua4374 Год назад
same
@naijatechmentor
@naijatechmentor Год назад
Fakestoreapi site is down
@SnowdenFu-jh6bx
@SnowdenFu-jh6bx 10 месяцев назад
package 1. material 2. tailwindcss
@user-nl2vv7yc8h
@user-nl2vv7yc8h Год назад
Why do people use tailwind?
@burhaanhassan5498
@burhaanhassan5498 Год назад
Angular is gonna outdate near future
@vitorvono
@vitorvono Год назад
My checkout is not working =(
@Santon-Motho
@Santon-Motho Год назад
what error is it giving you?
@roysonsalis4915
@roysonsalis4915 Год назад
Can we use online code editors?
@CodewithSloba
@CodewithSloba Год назад
Of course
@TheQdfqdsf
@TheQdfqdsf 7 месяцев назад
Someone is hungry at 2:17:20 😅
@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
@lpontes4489
@lpontes4489 Год назад
3:17:12
@expertsystem6379
@expertsystem6379 7 месяцев назад
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.
@elyanfi9541
@elyanfi9541 Год назад
57:29
@alwaisy
@alwaisy Год назад
why angular? still angular
@mercee9980
@mercee9980 Год назад
Please I need source code for a website that checks for serial number. More like product authentication using serial number
@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?
@fadumohassan5336
@fadumohassan5336 Год назад
I don't understand
@CodewithSloba
@CodewithSloba Год назад
First go for basics
@mylenav
@mylenav 4 месяца назад
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9p5ZXUmLKPs.html I just was able to move on with this project after specifying the material version i was installing.
@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.
Далее
Я читаю переписки сына
00:18
Просмотров 651 тыс.
Выпускаем трек? #iribaby
00:14
Просмотров 431 тыс.
Learn Git - Full Course for Beginners
3:43:34
Просмотров 487 тыс.
Pointers in C / C++ [Full Course]
3:47:23
Просмотров 3,6 млн
React State Management - Intermediate JavaScript Course
2:46:38
Data Analysis with Python for Excel Users - Full Course
3:57:46
Python Django Web Framework - Full Course for Beginners
3:45:41
Я читаю переписки сына
00:18
Просмотров 651 тыс.