Shopify ECommerce Store with React & Next JS | BuilderIO

Knowing how to build a webshop is an important skill to have for every web developer. With 2021 being, well, how it is, most of the shopping is now being done online. You, as a developer can contribute to the world by creating amazing web experiences.
If you are an E-Commerce Freelancer, a person with a non-development background that wants to run their own shop, or a developer that wants to extend their skills and learn how to build webshops - this video is for you.
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special KZbin discount code is automatically applied!
⭐Builder - builder.io/
📚 Materials/References:
GitHub Starter - github.com/BuilderIO/nextjs-s...
Deployment: bit.ly/vercel_deployment
💼 Business Inquiries:
E-mail: [e-mail]
❤️ Support JavaScript Mastery
BuyMeACoffe: www.buymeacoffee.com/JSMastery
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / js_mastery
Time Stamps 👇
00:00 Intro
03:06 Setup
08:21 Getting Started
13:42 Code Components
22:18 Generic Collections
29:55 Other Models
34:11 Countdown Timer
41:57 Deployment

[@raphaelleveque9163]

It is good to show us such productive tool exists and teach us quickly how to implement it, in a way that you follow the current trend of new technologies being used. Your channel definitely offers great mix of videos for either deeper insight on MERN and Javascript or for other frameworks like this current video. Thanks again.

[@javascriptmastery]

Thank you Raph!

[@troypeng8722]

OMG another one to add into my portfolio. This channel has been blessed.

[@javascriptmastery]

That's what I'm here for! 😊

[@yadneshkhode3091]

If possible try to design and develop projects from scratch instead of copy pasting youtube videos

[@troypeng8722]

Yadnesh Khode Long term right👍 But this video is awesome for student like me

[@ilsalvatore9191]

Really appreciating what you are doing in this channel! Dont stop and keep it up!

[@javascriptmastery]

Thank you GianLuca! 😊

[@ramonsilva385]

mano, era essa playlist que eu tava precisando!

[@Fatima-ie5kj]

Omg m learning next js n looking for a project then suddenly this video popup I have no words to say thank you to u . U just amazing

[@javascriptmastery]

Thank you! 🙌

[@karendoran3692]

Really appreciate your content...you provide excellent real world projects that we can build from!!! I would appreciate more Next JS tutorials as I think this is the way to go for production websites.

[@javascriptmastery]

I agree, definitely coming in the future!

[@Abhishek-uf5qp]

I was exactly looking for shopify website build. Thanks ❤️❤️

[@javascriptmastery]

Amazing, here it is! ❤️

[@RianY2K]

Thank you so much . We always waiting new video from you, great explanation with real world example.

[@javascriptmastery]

Thank you, enjoy! 😊

[@sonybutola3826]

I have only one thing to say thank you so much. Looking forward for the next.

[@javascriptmastery]

Thank you Sony!

[@rahulnag9582]

I just love JS mastery... Much more love ❤️💕 from INDIA

[@javascriptmastery]

Thank you! ❤️

[@shakil-the-coding-monster]

Excellent tutorial what I was looking for

[@vikasni95]

Tquu soo much sir.. Ihave been waiting for your next js tutorial.. The way u teach is just amazing... Lots of love and support from india🇮🇳😍❤️ Sir plz make videos on next js projects

[@javascriptmastery]

Glad you like the content! 😊

[@gbrachetta]

I'm personally not a fan of tools like shopify. It's like creating a website with Wix. The important thing should be to know how and why, in my opinion. On that note, I really miss your old-style videos with fully fledged tutorials. They were great!

[@stills2359]

The cool thing is shopify has its own javascript SDK so you can build a custom storefront using react and have all the backend be done through the shopify dashboard

[@rambosweat]

keep in mind that on the job you will more likely need to familiarize with things like the shopify sdk or the square sdk instead of reinventing the wheel.

[@vishsingh7235]

@@stills2359 Have you seen any tutorials covering this process online? I have a Next.js website that I'd like to add a shop to. I've been looking over Shopify's Storefront API but haven't found a clear process that steps through how to integrate Storefront capabilities into an existing React or Next.js site.

[@stills2359]

@@vishsingh7235 Your looking for the shopify javascript SDK: github.com/Shopify/js-buy-sdk#shopify-javascript-buy-sdk

[@flo615]

Well it's all about not reinventing the wheel everytime. Once you've made 20 shops from scratch, you start thinking differently I think. People used to say the same thing about CMS like WordPress or Wix at the beginning (long time ago).

[@rayhanrahat103]

Aww yeah.. A new video from JS Mastery,,!!!! Thank you soo much..!!

[@javascriptmastery]

Enjoy! 😊

[@sittingonthebeach]

Commerce.js + Builder.io tutorial would be amazing!

[@javascriptmastery]

Interesting idea!

[@RD-jr8nv]

Super easy to incorporate based on this tutorial. Check the commerce.js docs for Next JS

[@user-yi4mt4hp8u]

Can you make a ‘build and deploy’ tutorial video for next js react UI/UX one page website with Shopify like you do with your other React website tutorials? This is good but it’ll so cool to build a UX/UI one page website because that’s what most shopify brands/companies are into lately. Thank you!

[@unknownman1]

Adrian is a gem. Thanks man.

[@javascriptmastery]

Thank you!!

[@NERO-ez1mn]

this is the reason why i like this channel

[@javascriptmastery]

Thank you!

[@olcaykaplan1647]

Each video is amazing which you upload.

[@javascriptmastery]

Thank you Olcay! 😊

[@giorgidzirkvelishvili7150]

really good video as always. I think it will be good if next video will be about hosting and domain names. thank you so much

[@javascriptmastery]

Great idea!

[@petrozabila7298]

great video as usual! Could you please expand it and make the tutorial on how to link thst ecommerce web-site to shopify

[@Geomaverick124]

I actually would love to see you build out a full Shopify APP with Nextjs

[@ixtiyorsharobiddinov244]

thank you so much, it would be really great if you develop full project with next js

[@javascriptmastery]

Thank you!

[@scorpion32]

Wow this is serious, thank you. I'm currently learning this

[@javascriptmastery]

Serious is what we do here! 😊

[@scorpion32]

@@javascriptmastery everyone is moving towards platform development these days. You're really ahead of the curve with this.

[@javascriptmastery]

Thank you! Builder.io made it happen! 😊

[@strawhat1583]

Thank you so much, waiting for more tutorials ❤ ❤ ❤

[@javascriptmastery]

Coming soon! 🔜

[@strawhat1583]

@@gaurav8113 Yes, I am

[@changdaejung8411]

Thanks a lot!! Awesome tutorial 🔥

[@javascriptmastery]

Thank you! 🙌

[@arnabbiswas8414]

Your tutorials are amazing!! Btw what is the vscode extension you use to beautify your code. Can you tell the extensions you use?

[@johnvepope]

This is going to save me so much time!!!

[@abubakardev3066]

Best content ever on KZbin

[@javascriptmastery]

Thank you man!

[@abubakardev3066]

@@javascriptmastery its my pleasure

[@kirant9339]

Thank you so much for this video it's very useful

[@javascriptmastery]

Thank you!

[@ajaykumar-nx7kb]

I love your videos and teaching style ❤. Thank you... Please also make a react project on movie clone.

[@javascriptmastery]

Great idea! 😊

[@sumukhakb2701]

Great video, make a full next js course from easy to advanced

[@javascriptmastery]

Great idea!

[@rayhanrahat103]

Awesome tutorial man.!!! Can you make an in-depth video of authentication with Firebase and React..?? It would be a lifesaver for many of us, beginners. Please!!

[@javascriptmastery]

I did authentication with MERN in my project tutorial. If you haven't make sure to check it out. 👌 I'm planning kn doing firebasr as well.

[@rayhanrahat103]

@@javascriptmastery Yes I have fully watched that video, and it was awesome. waiting for part 4 of that series.

[@noahperez9631]

Amazing tutorial!! Wow can I still add shopify apps example currency switcher?

[@biswanathdeyrosted7702]

Very nice video. I have a question. If we use nextjs and build api using nextjs, then how we can use that api in react native ? or it will be good to make a server like we create for mern and use the api both in nextjs and react native.

[@rangabharath4253]

Awesome as always 👍😀

[@javascriptmastery]

Thank you! 🙌

[@midhatahir8104]

Thanks for the video, but I am still confused with deployment procedure. How vercel is creating a repo and pushing all my code. Vercel pushed some of my changes but not all especially the counter. Now what I have to do in this case? Either I have to force push to my current repo or what? Any guide would be meaningful. TIA

[@ramadanmobarak-so8oh]

Thanks a lot brother god bless you

[@shivanshutiwari5646]

best video in best time (for me)

[@javascriptmastery]

I'm glad! 😊

[@akcoder974]

Best ever video 😍😍

[@javascriptmastery]

Thank you!! 👌

[@pramilaniroshan572]

Thank you so much ❤ ❤ ❤

[@javascriptmastery]

Thank you! 😊

[@souravraodora6671]

One of the best.

[@javascriptmastery]

Thank you! 🙌

[@364679493]

thank you very much. :D

[@javascriptmastery]

Thank you!

[@Noah-vm8id]

Thid is such a useful way, building with php would be so annoying😁

[@noahperez9631]

hello, can I add any shopify apps even if it is frontend app? Or those it need it needs to be only a backend app?

[@bernicelam5650]

Please make a tutorial of this topic but use commercejs 🙏🏻🙏🏻🙏🏻🙏🏻 I worked through the one use commercejs but that video does not have product description page🙏🏻🙏🏻please🙏🏻🙏🏻🙏🏻

[@Bill0102]

I'm infatuated with this. I recently enjoyed a similar book, and I was truly infatuated with it. "The Hidden Empire: Inside the Private Worlds of Elite CEOs" by Adam Skylight

[@tinotaylor]

What is that first website with the bottle called? Is it live 🙂

[@rjchhetri2370]

Javascript mastery please make content on vuejs. I loved vuejs now after working lot with react. It is simple, elegant and clean code structure

[@javascriptmastery]

Great idea!

[@ripplesr5655]

Does the payment gatweay takes care of the payment process without requiring any pedantic setup here?

[@babastuka2214]

This gave me an idea to work with commerce.js instead with Shopify 🙂

[@javascriptmastery]

Both platforms are great! 👌

[@babastuka2214]

Yes of course! but with shopify you have free trial of 14 days

[@innocentonyemaenu6353]

Wonderful tutorial, but can you create something using Reactjs and typescript? It will be much appreciated

[@javascriptmastery]

Thank you, great idea!

[@mostafamahamuudmoallimupm6242]

i keep facing error when i try to run builder creat line of code at 6:40 could you please help me understand why?

[@ayushthakur733]

Thank you

[@javascriptmastery]

No problem!

[@ayushthakur733]

@@javascriptmastery you not only make these awesome videos you also reply to every comment and this is I love ❤️

[@rahulsingh-sx6sn]

Hi Adrian please make a video on react-testing library..

[@javascriptmastery]

Great idea!

[@rahulsingh-sx6sn]

@@javascriptmastery thanks for considering... looking forward for it..

[@jayakishore1234]

Javascript mastery, great video as always. However, I have some trouble while starting the builder app on my machine. I was able to run npm install and install builder. But, when I run the builder create command, it says builder command is not found.

[@elijahohiwerei19]

You may have to install builder globally to make use of its cli

[@radityakrisnhamurti1810]

Please do Vue JS tutorials for fully animated websites

[@lifeslittleescapes]

I have learned a lot with these channels providing free contents, but i don't know how to earn money with them, cz i am in university i can't apply for a full time job...if you have any ideas please let me know guys 🥺

[@javascriptmastery]

Apply for jobs and internships

[@hecdeveloper852]

is there a modern version of this tutorial?

[@manmaaze]

Plz make another mern stack project

[@waelahmed7078]

i love you man

[@zachpreston341]

What happens when someone purchases an item from the demo store?

[@shivanshusharma6918]

Request for the next video: Working with blobs in mongodb

[@zacharywong5632]

How do you install builder. Cause I keep getting this error, zsh: command not found: builder.

[@girapatel928]

Hey Can you design Multilevel Level Marketing Application in React??

[@SUNYBOI]

Make part 2 of the chat application.....

[@javascriptmastery]

Soon! 🔜

[@Joe-od3td]

How can I acess the shopify dashboard for the site.

[@babybarndiscounts7423]

Is there anything similar for bigcommerce

[@sundeeppeethala312]

Hi Bro, Is there any React with Typescript Projects coming??

[@javascriptmastery]

You can use TypeScript with this project! But yeah, more coming soon! 🔜

[@sundeeppeethala312]

@@javascriptmastery we are waiting React with Typescript Projects from you?? Because you teach too good that we can understand easily, so please do some projects on REACT with Typescript bro... Seriously we are waiting

[@tanny3080]

What is going to happen when someone actually buy the product from the website ? Are they going to send the notifications to the seller to send the product ?

[@javascriptmastery]

Exactly. Shopify will do everything else!

[@abubakardev3066]

Sir plz if possible make projects on react native

[@javascriptmastery]

Great idea!

[@abubakardev3066]

@@javascriptmastery yes it will be very beneficial for everyone

[@karaoudriadh7419]

you are fucking AWESOME

[@javascriptmastery]

Thank you! 😊

[@huzaifaaslam5266]

waiting for Express js series

[@soumadip_skyy_banerjee]

❤️

[@javascriptmastery]

❤️

[@xjerk526]

when I run "npm i" i get like 53 vulnerabilities and my server does not load anyone else have this issue?

[@googleonly9963]

The builder IO for the blank template won't load even after doing all the steps in the documentation i suggest you carefully instruct people on how to avoid any upcoming errors, wasting time on this is a hassle

[@miw879]

I would have rated it 10 *'s if instead of builder.io you would have used plain CSS // Didn't mean to be rude discouraging but that's the kind of video I was looking for but anyways great work!..

[@javascriptmastery]

I understand you, but builder offers many more features besides just some css :)

[@miw879]

@@javascriptmastery it's just these companies that I apply for they give assignments and only ask us to use react with plain css not even bootstrap... So currently I'm looking for all react and plain css kind of tutorials...

[@Bedi58]

How do i create such animations like 0:03 ?

[@shivangisen9870]

can we host this site in aws?

[@trongnhanle7658]

Error creating space TypeError: Cannot read property 'start' of undefined at C:\Users\trong\AppData\Roaming pm ode_modules\@builder.io\cli\dist\admin-sdk.js:136:35 at Generator.next () at fulfilled (C:\Users\trong\AppData\Roaming pm ode_modules\@builder.io\cli\dist\admin-sdk.js:5:58) How to fix it ?

[@cryptodev2615]

Not sure what happening, but I'm getting a "Not at root" when trying to install the Builder.io CLI. Please trust me lol, when I say, I'm in the root. Not sure whats happening. I tried cloning again, and first installing all dependencies, still getting the error. I have my project open in VS in root, and I'm in the projects root in the terminal.

[@azizabbas9916]

Hey, you should be able to solve the issue if you post this on forum.builder.io

[@yanggang4587]

If you're about to do this tutorial for the first time PLEASE NOTE: This tut is outdated and causes errors. Try an up to date tutorial. Cheers

[@hecdeveloper852]

I get this error with the builder command node:internal/process/promises:289 triggerUncaughtException(err, true /* fromPromise */); ^ [Error: ENOENT: no such file or directory, open 'undefined/settings.json'] {

[@hamzaking127]

Correct this ?

[@dhruvkapoor8304]

Same … did you find any solution?

[@hecdeveloper852]

@@dhruvkapoor8304 nop this video is outdated I ended up some custom functions and and reading all the builder io docs

[@vishant898]

Please upload mern project

[@javascriptmastery]

Have you watched the MERN Project? :)

[@vishant898]

@@javascriptmastery yups but I have stuck .. please make mern stack project no use of external libraries for responsive design .. I request to you because you explain very well manner. I totally understand

[@Aborichinal]

I cant get past the global install. Looked it up online and it seems too complicated to install with package manager. Its telling me to back up my whole computer....no thanks

[@javascriptmastery]

I'm not sure if that should be the case.. Also you don't need to install it globally if you don't want to. You can install it locally.

[@Aborichinal]

@@javascriptmastery what a relief. Love your material by the way. You are the best on youtube hands down. One day I'll get a developer job and send you many coffees lol

[@Aborichinal]

@@javascriptmastery i got the install to work locally with some vulneralbilities but the builder create key install is saying command not foiund

[@javascriptmastery]

I'm not sure, feel free to reach out to them and I'm sure they'll assist you with the issue.

[@javascriptmastery]

Thank you! ❤️

[@Buffalodiak_66]

Does this still work in 2023?

[@waseyhasankhan8167]

I want to make the same thing with VueJs

[@waseyhasankhan8167]

Can you please help me Or suggest me?

[@jadekang5884]

looks like the tutorial needs some updates as the repo and builder.io have changed.

[@tifyspoondra7401]

Can anyone tell if this works now???

[@afaqahmad8918]

If you have any errors just copy the code and paste in chat gpt you'll find all the answers . It'll correct your code.

[@AminKhan-wo4ec]

listen please tell me if i say i dont know anything about js then should i learn this ????

[@ahzu7022]

None of this works. I have wasted half of my day working on a demo and none of it works. Either stick with WordPress or build from code and leave out the middle man. I have absolutely ZERO faith in the builder.io project. Seems like a great idea but adding this into my workflow would be stupid.

[@alisufiyan5133]

problem poping when trying to npm run build and also in build checking while deploying on vercel ??? Type error: Argument of type '{ query: string; sortBy: string; }' is not assignable to parameter of type 'Query'. Object literal may only specify known properties, and 'sortBy' does not exist in type 'Query'. ./lib/shopify/storefront-data-hooks/src/api/operations.ts:70:5 68 | return client.product.fetchQuery({ 69 | query: searchString ? `title:*${searchString}*` : '', > 70 | sortBy: `title`, | ^ 71 | }) 72 | }