Build an Online Store Using AWS, React, and Stripe

[@Thebul500]

I want to say thank you so much. I have to do a project for my class and had no guidance and no experience with AWS and this video taught me more than what I have learned in class. Your videos are organists ed and structured better than any college professor I had and you explained all the key parts as well!

[@ldn496]

what grade did you get for it?

[@bricehemery1534]

This the most passive tutorial I've ever done. We're basically just listen to this guy who did all the work and we typing commands and listening to explanation. I feel like I'm in class right now

[@apidas]

yeah, education is soo boring right. you shouldn't study at all

[@bjcolber]

This is one of the best tutorials I've ever watched.

[@briandesign]

FCC dropping gems 🔥

[@feynthefallen]

I believe it. Amplify is exactly fot that. Discombobulate AWS to get off the ground in record time. I'd think REAL hard before using that on a productive project however. Firstly you are locking yourself in to AWS that way, and second, if anything goes wrong, you'll have a real hard time finding a solution, because having avoided all the complexity, you basically have shirked learning anything about the underlying systems.

[@asfd74]

Learned a lot from this, Manoj, thanks! I had two showstoper issues, both having to do with yarn, which you didn't discuss in the video. 1) At about 30 minutes into the video after I did amplify push I got the error × An error occurred when pushing the resources to the cloud An error occurred during the push operation: Cannot read property 'join' of null It is my belief based on some Googling that this unhelpful message was because I didn't have yarn installed before I started coding. So, after you install Visual Studio Code, you should run yarn version to see if yarn is installed. If not, you should install it with npm install -g yarn Once I was fully 30 minutes in, the only way I found to get around the error was to install yarn as described above and then start all over from the very beginning with new code. 2) I got error "amplify publish npm err! missing script: build" after running the last step (amplify publish) I solved this by running yarn build before amplify publish.

[@RonanODriscoll]

Excellent tutorial with a broad range of topics covered. Thanks so much, Manoj!

[@dailycodingproblem8346]

I'm 4 days away from turning 93 and freeCodeCamp inspired me to create my own tutorials! I don't show ads either.

[@user-pp4kn8tq7c]

Happy bday in advance

[@dailycodingproblem8346]

@@user-pp4kn8tq7c Thanks!

[@stevepriest5113]

You don't look a day over 91

[@jaisairam987]

Happy Birthday 🎂🎈

[@dailycodingproblem8346]

@@jaisairam987 Thanks, Monika!

[@LLL124Original]

This guy seems very positive.

[@samuraijack5919]

There is seriously so much value here. I am trying to break into web development and this is a great project idea. Thank you again!

[@austinbaccus]

dope name

[@globalaiinternetfreedomfun9970]

this project uses GraphQL transformer v1 and is no longer suitable for learning without significant changes tot the schema

[@dreamingfool2]

Dude, you need to work with Kitboga! You two could probably do great things.

[@Jinxyboop69]

I was amazed to see your books' list. I read them too😂

[@Sky-jq2rg]

One of the best tutorial however, would like some updates. I was getting an error during amplify push because the graphql schema needs to be updated to v2

[@conorsegreti1150]

Hi sky i am getting this same error, let me know if you are able to fix it

[@Sky-jq2rg]

@@conorsegreti1150 Yes I was able to, by not using graphql anymore

[@idkwhatagah7193]

​@@Sky-jq2rgplease explain

[@bubblTea01]

​​@@Sky-jq2rghi did you successfully make the website?? I need help as I'm making this for my project.. I changed the graphql code and it worked but I'm getting other errors

[@senlee325]

Great tutorial. Easy to follow and well explained :)

[@jakelucas9517]

proud of you ( Sri lankan)

[@aadijain7381]

i'm about to watch the lec. Do all the things fall under free tier?

[@imsarvesh_]

Thanks Manoj for such informative and awesome video. I really needed this.

[@angshumanpalchowdhury9102]

Lots of love ... U guys deserve all wishes and success ❤️

[@ricardoaraya8472]

What’s the monthly cost that you pay for all the Amazon services you are using?

[@ram_rama11]

Much needed one ♥️

[@codedbyte]

this is very helpful! thank you so much

[@MrTubber44]

Excellent, my friend! Thank you!

[@lksptl]

Thanks for Sharing this. Much Needed

[@DatascienceConcepts]

Very useful content as usual!

[@MicroUrb]

So do you have to use AWS-Amplify? Why not just connect React directly to a backend Express API? Not challenging you, just asking for insight into this architecture.

[@178fahimahmed7]

A really good video indeed 👌

[@ideav2155]

Do you have a video explaining your code or how you coded the app?

[@michaelwiginton8587]

Can you share the cost of setting this up and what it costs per month to maintain this store? I have not overcome my fear that AWS can get really expensive fast!

[@michaelwiginton8587]

I went to your YT channel and found the answer, Thanks.

[@viorelcioi938]

@@michaelwiginton8587 Hi, can you share the monthly price for this setup ? Thank you

[@alienboysd7528]

Thank you

[@thisnamecannotbedisplayed355]

freakking awesome!

[@anilkumarrolla6510]

Resource is not in the state stackUpdateComplete An error occurred during the push operation: Resource is not in the state stackUpdateComplete i am getting like this , can anyoone resolve this

[@ecoProgrammer]

im also having that same error, when the video is at ⌨ (29:08) Creating Cloud Resources

[@yusefcode5859]

Do you have to create a new IAM user for each project? I've noticed every tutorial use amplify configure and then you end up making a new user? Can you ever just use user for different projects or is it better to create a user for each project?

[@amrithanshu3478]

I am unable to create new user for aws amplify, though I entered many times. Please suggest any other options

[@RaulGlasgow]

well done!!

[@jordanbradley2863]

Was following along with no problems up until the user pool section at 37:08. Does anyone know what the issue would be?

[@hareeshbadiger8167]

not finding userpool "view in cognito"

[@hareeshbadiger8167]

I think might be a region issue we are following "us-east-2"" but there is no us-east-2 while creating a new pool

[@charliedeepk]

Please help me out how to interact with bookApi qraphql api endpoint url with other clients such as delivery agent

[@adeni4359]

Which one is better AWS or Azure? Can you do this with Azure?

[@HELLDOZER]

Stripe Charges API is almost pointless at this point .... Would love an update with stripe paymentintents

[@Meem_irq]

Hi .. i need help the graphQL schema is using @connection , @key directives from an older transformer … please i need to know how to write it in the new version

[@tiffanychan6272]

i changed book to product, and title to productName. useHistory is also deprecated, so you have to use useNavigate instead as well

[@batmanandrobin6373]

Hey did you figure out how to write in new version. Can you please help me.

[@Meem_irq]

@@batmanandrobin6373 I’m not sorry But I install the same version of cli 4.24 Now i have another problem

[@praveenkumar-ub4ni]

With the latest cli version used just go to the cli.json file in the amplify folder and change the value of "useexperimentalpipelinedtransformer" to true and "transformerversion" to 1. Save and amplify push again. It will work.

[@conorsegreti1150]

@@praveenkumar-ub4ni When i make these edits and push i can watch my cli.json file change from 1 to 2 on the transformerverison, then i still get the @connection and @key being deprectaed, do you have any tips?

[@satwikjoel]

hi there, i have been following the video for some of my project work. I found this video usefull. But i am struck in one area where while i push the whole set up by using amplify push, it is throwing me an error named @connection & @key are from old version migrate this to new version. Like this i am getting an error. Please help me to resolve this. Thanks in advance

[@Robd515]

Great video

[@ikasumi-hu2ci]

GOOOOD😁

[@Taka-tg8zq]

Hey I ran into an issue... 1. When I ran amplify push I got that runtime need to be node16x. and not node10. so I changed it to version 16. 2. I run amplify push again and what I got was that S3 bucket name is taken. I tired to remove the s3 bucket and running it again but it didn't work

[@evenlauvsnes7658]

I had the same issue, did you manage to resolve the issue?

[@Taka-tg8zq]

@@evenlauvsnes7658 I think using the latest version of amplify and then cleaning the errors afterwards solved this problem

[@bubblTea01]

​@@Taka-tg8zqcan you please help with my errors as I'm doing this for my project

[@JaLegendsDance]

Hey can you build a tutorial on Building a membership with AWS Amplify, Cognito, and Stripe Billing Portal. . So after you rap your app with aws withauthenticator user will sign up and after success sign up they will redirect to pricing plan then to stripe checkout then user will be directed to protect content after paid signing user logout and signing back in they will be directed straight to protected content

[@LilYashy]

I Love This Python Coding!

[@RaulGlasgow]

AWS updated their schema language... New updated video? @connection is gone

[@Meem_irq]

Do you know how to write it in the update

[@anniejain1728]

how much was your bill after this project?

[@SrujanS-lp4gh]

I followed all the steps till 30:00 of your video ,but when it comes to amplify push I'm not able to push it to the aws cloud.. this is the error that i got--"An error occurred during the push operation: Resource is not in the state stackUpdateComplete" can you help me to over come this error and continue furthur..... pls do reply ASAP..........

[@swarangivedpathak4232]

same here, were you able to resolve it?

[@opinionated1944]

What should I know about AWS? I am a complete noob in cloud, can someone guide me?

[@aixoxa]

It's a cloud server for website/web application hosting ✌

[@pranaysinghparihar4738]

Aws is a public cloud computing provider. If you wanna know more you should definitely try getting an AWS certification which will really help you understand different services offered by AWS and importance of each one.

[@aixoxa]

@@pranaysinghparihar4738 yeah awesome but for now am uploading tutorials

[@pranaysinghparihar4738]

@@aixoxa I checked out your channel pretty cool stuff. Keep up.

[@opinionated1944]

@Aixoxa Ik it's for hosting I just wanted to know what I need to study for knowing AWS. Thanks @Pranay !

[@techexplored]

🟥🟥🟥🟥 URGENT HELPPP !!!! I'm getting the following error while instantiating AWS Lambda through AWS Amplify. The runtime parameter of nodejs10.x is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (nodejs14.x) while creating or updating functions. Which file should I edit and what exactly I must do??? Anyone, please guide.

[@aditilal7340]

Did you clear it? I am stuck there

[@aditilal7340]

@@techexplored thanks but it didn't work 😭. I'm so done -.-

[@techexplored]

@@aditilal7340 I have initial log of what I did. If you want, I can share it with you. Give me your email address or any platform to share like LinkedIn, etc. Edit: I recovered the entire log and uploaded it on GitHub. I'll share the file....

[@praveenkumar-ub4ni]

In the start of the video he said install @aws-amplify/cli@4.24 but instead just do @aws-amplify/cli and follow the rest as explained. And you might encounter some GraphQL error after u push with the @aws-amplify/cli installed, so, just go to the cli.json file in the amplify folder and change the value of "useexperimentalpipelinedtransformer" to true and "transformerversion" to 1. Save and amplify push again. It will work.

[@the-fantabulous-g]

Yeah what Praveen said, and also do "amplify pull" and start again from roughly the 13 minute mark when you do that.

[@TheManishwild]

hello guys. There is error when i try to amplify push. did somebody found the way to fix it?

[@chrisr2063]

you must remove all @auth settings in graphql schema then run "amplify update api" then add the @auth back and push again.

[@saileesalunke6560]

@@chrisr2063 can you please explain what i need to do? I am facing resource is not in state stackupdatecomplete error

[@lautarob]

Excellent video! Thanks for sharing your knowledge. Now, for an app to be successful in the world, it is very important the UI. I understand the one you show is just a sample of what can be done, and I also understand that your main purpose is to illustrate the use of AWS. But I am wondering if there is any framework to quick develop sophisticated interfaces while using AWS (something similar to the variety of frameworks for develop UI while using WordPress. I know Wordpress is a whole different thing. As a matter of fact, there are E2 instances in AWS prepared to run WordPress, but from a high level perspective, my simil can apply).

[@chrisr2063]

ridiculous. tried everything i could to get the push to work but STILL it keeps reverting back to "Runtime": "nodejs10.x". I even uploaded the file with updated version to AWS and it still reverts back! Should be a new rule that if you provide content it must be version controlled and updated regularly or it gets archived and marked as inconsistent.

[@praveenkumar-ub4ni]

In the start of the video he said install @aws-amplify/cli@4.24 but instead just do @aws-amplify/cli and follow the rest as explained. And you might encounter some GraphQL error after u push with the @aws-amplify/cli installed, so, just go to the cli.json file in the amplify folder and change the value of "useexperimentalpipelinedtransformer" to true and "transformerversion" to 1. Save and amplify push again. It will work.

[@richard92105]

How would you add the lambda function to email invoice?

[@Bozo---]

thanks

[@vidadeingeniero3350]

Is this tutorial still valid and working after 3 years? I'd like to start it :)

[@fassoyangce1075]

How much do these services cost per month all together?

[@mohjolife]

niece stuff, what aboout backend ?????

[@muchimi]

I'd like to do a similar project of VOD, using Cloudfront for a CDN, storing my vids in S3. using stripe for payments to access the vids, and a UI with a short video embedded to explain the system service method. I was thinking cognito for sign ups and auth and to create the user pool that has access to the VOD. DynamoDB to keep track of all records for each client. and I don't know what else. however, I don't know any code. Thanks for all you've don't btw!! even though I did earn an aws solutions arch assoc level cert, I still am very knowledge deficient on how to accomplish this project. can you make a vid?

[@locokidschannel2676]

Your amazing, thanks for sharing this,

[@mks5988]

👏👏👏👏👏👏👏 thanks for free code Camp

[@briananyanwu101]

I can't connect to the aws cloud I get error OptInRequired: The AWS Access Key Id needs a subscription for the service. I already became a member

[@simonaoo]

hello! How could give access to create read update and delete books to all the members but only logged users could see the description of the book ? thank you in advance for your answer!

[@ThesniperScythe]

I've never used aws before thus I want to ask approximately/roughly how much will aws charge for all those services per month?

[@johncerpa3782]

It depends on what your application needs. For learning you can use some services for free, you need a credit card for that.

[@devashishbahri3353]

What is the color scheme/theme that you are using for your editor?

[@Lucho2027]

Hi @freeCodeCamp, I have followed this tutorial and I am still having an error pop up where it reads "Can't serialize value(/processOrder) : Invalid input for Enum 'OrderStatus', Unknown value "{}". On stripe dashboards the payment don't go through. Any idea what it is that I did wrong?

[@wardeuneeward3893]

hey lucho i have the same error, do you know what the problem is ?

[@alakdam3970]

Do you have course in Udemy like this? It would be awesome, if you have course like this from scratch. I would like to learn more what kind facilities AWS Amplify have , complex data model and Graphql queries? I will defiantly buy this course and promote for free 😁

[@avishgupta8898]

there is some discrepancy in coding.. in Graphql we get only todo table details however in the video book list and get books in mutation and query.ql

[@HowToMaster_tips]

bro how did you resolve this i have the same prblm

[@MrJarofflies]

I got everything working but when I try to add a book I get the following error: Not Authorized to access createBook on type Mutation I created the Admin group and added the admin user. Not sure what else to check?

[@Aditigupta-un8wm]

did u get the solution ?

[@Aditigupta-un8wm]

even i m getting same error

[@Aditigupta-un8wm]

can u help me

[@Mike37373]

need a magnifier to watch this video

[@divyakosaraju7846]

Even though giving admin access I am getting error please help me I need to submit this project in 2 days

[@stopPlannedObsolescence]

I haven't a aws account,I have neither card

[@brandongounder3632]

at 37.35 why am i not seeing any users on my amplify console. Thanks for the help guys

[@eliaskaram1485]

hi brandon dod u get it done

[@robloxgaming7436]

See my description

[@SakshiSingh-ri5ry]

I want to create a book store app using react native , AWS but I m confused that just like here you go to admin url and post a book, so how can we do the same in app, like where I need to go to post a book? Please anyone help me in this

[@motivestreams]

create a route for an order creation page, router.push to that page, let the fields be filled in thatv page, call the mutation function onPress

[@brandongounder3632]

Hi all. Please could someone help. Im getting the "unathorised" error when i try to add a book on the the admin page?

[@praveenkumar-ub4ni]

Any updates?

[@thegamedevclub]

hey how does this work with BlackBlaze?

[@tsaicharan]

const {featured} = useContext(ItemContext); if (!featured.length) { return No Featured Items } These lines of code don't work in the file: home.js This is the error: TypeError: Cannot destructure property 'featured' of 'Object(...)(...)' as it is undefined.

[@gomolemosibiya1065]

Hey, I got the same error. Did you manage to resolve the issue?

[@vinceokorie7953]

Any time i run npm run start like in the video i get a "localhost:3000 local host refused to connect " I think I have tried everything form disabling my fire wall to making sure my browser allows websites with javascript. Pls someone help PS: This is about 33:36 into the video

[@conorsegreti1150]

Vince, i am getting this same issue, did you ever figure it out?

[@kevinpaz3142]

I got to 47:40 and I see there are no Lambda functions there. That happen to anyone else? I was following along exactly, getting no errors in the terminal and local running was fine up until that point....

[@kevinpaz3142]

Whoops! They are there! Guess it took some time to load!

[@sam-qr1gf]

Hello friend, I follow along with him, I have en error when I want to submit payment "errorType: "Lambda:ResourceNotFoundException"" in 49:37. Do you success ?

[@kadorikaz]

My country doesn't accept my aws account. am from nigeria

[@DukeNguyen291]

Can anyone tell me the VS Code theme he is using? Thanks in advance 😊

[@chiu-minglam630]

Do you need to know AWS and the cloud before watching this?

[@youtubevideos415]

This is nice, but it's very far away from best practices. Like having a discrete table for many to many relations. Best practice for DynamoDB is to have a single table for your application only.

[@nikhillobo944]

Everything went well till I reached the checkout page. I got the same error as yours when you first time submitted payment request. Error is stripe module not found. I tried all possible option using both npm and yarn still getting the same error. After installing I pushed latest changes to amplify. Still no luck, if anyone faced same issue and got a solution let me know

[@bubblTea01]

Were you able to make the website?? Can you please help with my errors I need this for my project

[@bibhushankarki9194]

don't have card to make an AWS account :(

[@wp-wisdom]

Please don't dislike this tutorial🤗🤗

[@shubhamkhobragade9723]

Hello there.

[@emmanuelamaechi3786]

Even the worst algorithm can tell that you said "Hello there" just to be he first commenter 😂😂

[@space_monkey125]

Do you need to pay amazon to create aws account?

[@davedoria2251]

Space_Monkey No

[@space_monkey125]

@@davedoria2251 thanks, or need credit card for registration ?

[@davedoria2251]

@@space_monkey125 You do need a credit card. The services you'll be using when you start out will be the free services so you shouldn't get charged if you follow the recommendations.

[@ShubhamRajoria]

Hell sir please make video how to connect android studio with aws database and develop app like amazon

[@Patel1747]

Are you a Gujarati?

[@sheldonfernandes3588]

Can't you feel the south indian accent? Gujjus have a different accent.

[@VinhLe-gc8ws]

So lost with this tutorial, challenges of following along, and so many errors, when im pushing to cloud, so many ERR messages which i have no idea what it means! Can someone please help me get through this hurdle! I just want to get past the first part....

[@VinhLe-gc8ws]

I added all the auth, api, storage and now that i push it it says ✖ An error occurred when pushing the resources to the cloud Resource is not in the state stackUpdateComplete An error occurred during the push operation: Resource is not in the state stackUpdateComplete and also in my aws export js file the only shows the region.. Why wasnt this added? Im just so confused! const awsmobile = { "aws_project_region": "us-west-2" }; export default awsmobile;

[@Luislgsoto]

@@VinhLe-gc8ws did you ever solve this error, i am having the same issue ?

[@Meem_irq]

I am having the same issue

[@Meem_irq]

@@Luislgsoto did you fix it

[@the-fantabulous-g]

To help solve the problem where the resource can't be created, I updated @aws/amplify/cli@4.24 to the latest version. (Thanks Praveen Kumar for the tip!) The reason why 4.24 no longer works is because it uses NodeJS10 for one thing, and NodeJS10 is now deprecated for resource creation. However, a resource was successfully created before that crash, so now we're unable to create a resource with that exact name because it was created once already. So, if aws amplify fails to push (and you're stuck like I was), copy your version of the 2 index.js files you created for yourself, then do an "amplify pull" to overwrite all changes of AWS onto our local codebase. This will allow our console to recognize that the first resource was already created, and we can now paste back our 2 index.js files and successfully do "amplify push" when you're ready.

[@mrcastor9514]

How can I hack anyone's Facebook account Just for fun

[@grantdustinsuryawan1529]

sorry but i can't to add user how to fixed? This the error: User: arn:aws:sts::002878599432:assumed-role/voclabs/user2171191=Grant_Dustin_Suryawan is not authorized to perform: iam:* on resource: * because no identity-based policy allows the iam:* action

[@praveenkumar-ub4ni]

I got an authentication error when I tried to create an admin account... Someone please help me!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@the-fantabulous-g]

Maybe triple check that the authentication is set up correctly? It worked for me, so there might've been mistypes or a difference in the setup than what the tutorial says. Did you have both Cognito and API as authentication methods?

[@HowToMaster_tips]

i got the same error

[@HowToMaster_tips]

did it got resolved. what steps have you taken

[@the-fantabulous-g]

@@HowToMaster_tips This part is probably making double sure that everything is setup correctly; barring that, try googling the error messages to do some troubleshooting too. good luck

[@josepoktopus8924]

statuscode400: put your phone in a valid format

[@ArjunH-r3y]

Facing this error while trying to install uuid with "npm i uuid" npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-native@0.71.7 npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! peer react@"^16.7.0" from @aws-amplify/ui-react@0.2.38 npm ERR! node_modules/@aws-amplify/ui-react npm ERR! @aws-amplify/ui-react@"^0.2.9" from the root project npm ERR! peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @stripe/react-stripe-js@1.16.5 npm ERR! node_modules/@stripe/react-stripe-js npm ERR! @stripe/react-stripe-js@"^1.1.2" from the root project npm ERR! 9 more (@testing-library/react, react-dom, react-icons, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"18.2.0" from react-native@0.71.7 npm ERR! node_modules/react-native npm ERR! peer react-native@">=0.56" from react-native-get-random-values@1.8.0 npm ERR! node_modules/react-native-get-random-values npm ERR! react-native-get-random-values@"^1.4.0" from @aws-sdk/middleware-retry@3.6.1 npm ERR! node_modules/@aws-amplify/analytics/node_modules/@aws-sdk/middleware-retry npm ERR! @aws-sdk/middleware-retry@"3.6.1" from @aws-sdk/client-cognito-identity@3.6.1 npm ERR! node_modules/@aws-amplify/analytics/node_modules/@aws-sdk/client-cognito-identity npm ERR! 16 more (@aws-sdk/middleware-retry, ...) npm ERR! react-native@"^0.71.7" from the root project npm ERR! npm ERR! Conflicting peer dependency: react@18.2.0 npm ERR! node_modules/react npm ERR! peer react@"18.2.0" from react-native@0.71.7 npm ERR! node_modules/react-native npm ERR! peer react-native@">=0.56" from react-native-get-random-values@1.8.0 npm ERR! node_modules/react-native-get-random-values npm ERR! react-native-get-random-values@"^1.4.0" from @aws-sdk/middleware-retry@3.6.1 npm ERR! node_modules/@aws-amplify/analytics/node_modules/@aws-sdk/middleware-retry npm ERR! @aws-sdk/middleware-retry@"3.6.1" from @aws-sdk/client-cognito-identity@3.6.1 npm ERR! node_modules/@aws-amplify/analytics/node_modules/@aws-sdk/client-cognito-identity npm ERR! 16 more (@aws-sdk/middleware-retry, ...) npm ERR! react-native@"^0.71.7" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.