Next.js E-Commerce App Full Tutorial with the Best Headless Solution
Ғылым және технология
Full-stack e-commerce app project with React Next.js, Tailwind, and Wix Headless. Next.js shopping app course with server actions & headless CMS.
Wix Headless - www.wix.com/studio/developers...
Wix Headless Docs - dev.wix.com/docs/go-headless
Wix Headless Templates - www.wix.com/studio/developers...
Join the upcoming React Master Course waitlist - list.lama.dev
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Join Lama Dev groups
X / Twitter: x.com/lamawebdev
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
Source Code
Starter Branch: github.com/safak/next-ecommer...
Completed Version: github.com/safak/next-ecommer...
00:00 Introduction
07:26 Next.js Installation
09:44 Next.js App Router Creating Pages and Layout
13:32 Next.js Responsive Navbar Menu with Tailwind CSS
25:18 Next.js Search Input
32:40 Responsive Navbar Icons and Modals
42:43 Next.js E-commerce Cart Component Design
53:55 Next.js Slider Tutorial (Create Your Own Slider)
01:06:37 E-commerce App Product List Page Design
01:14:32 Sliding Category List Design
01:19:55 Next.js Footer Component Design
01:29:21 E-commerce App Product List Page with Filters UI Design
01:36:51 E-commerce App Single Page Design
02:02:43 Next.js Wix Headless E-Commerce App Tutorial
02:10:42 Wix E-Commerce Headless Javascript SDK Tutorial
02:20:09 Next.js E-commerce App Fetch Products
02:28:46 Next.js Fetch Data with React Suspense (Loading Component)
02:38:51 E-commerce App Fetch Categories
02:45:11 E-commerce App Fetch a Single Product
02:50:34 Next.js How to Filter Product Options in an E-Commerce App
03:09:57 Next.js Product Quantity and Add to Cart Button
03:15:29 Next.js E-commerce App Filter Products
03:28:30 Next.js Product Page Pagination
03:36:48 Next.js Authentication with Wix Headless
04:20:36 Next.js Wix E-commerce Cart Functionalities
04:26:45 Next.js Zustand Tutorial (E-Commerce Cart State)
04:47:57 Next.js Wix E-commerce Checkout Tutorial
05:01:45 Next.js Wix E-commerce Orders
05:16:35 Next.js Wix E-commerce User Profile Page
05:28:28 Next.js Form Handling with Server Actions
05:42:37 Next.js E-commerce App User Reviews for Products
05:59:29 Outro
Пікірлер: 169
This man beats paid courses on Udemy. Bravo!
@knowledgedose1956
27 күн бұрын
yet he does it for free🎉
@ntramu4186
23 күн бұрын
Is udemy courses that bad? I want dig dive more than just projects like this, does udemy course is good option?
@jarencefeliciano
23 күн бұрын
@@ntramu4186 I don't criticize Udemy because I have many courses that I've bought there. It's just so happen that other courses there are outdated and not teaching the best practices led me to experience multiple refunds. So, be careful of buying courses there and make some research before buying the course.
@endrixhukellari3256
22 күн бұрын
@@ntramu4186 dude, go for John Smilga, I promise you will not be disappointed, every course has projects.
@deanwinchester8943
16 күн бұрын
@@ntramu4186so so and the problem is some of these courses of Udemy are late behind and need to be updated
Lema...honestly i am addicted with your explanation..you job is always amazed me..I think only if finish all your project that I ll be a confident software engineer...I am software engineering student..if you aren't here i have no idea what am gonna do with my life..really reallly your job is amazing your explanation is killing too..i have no words thank so much
this channel deserves 1M subscribers. I am so grateful to have found it last year.
I can’t believe that you made such a site in 6 hours, with explanations too)) Very cool! Thank you very much for the material, I will definitely study it!)
@gamingdas396
13 күн бұрын
This whole project may took him to build more than a month it's a 6 hour video but it also took him more than a month to implement successfully
this is one of the best tutorials in this world. Thank you, man. Love from Vietnam
Lama Dev, I subscribed because your videos are super cool!
Best fullstack projects channel on youtube for sure!
I just want to say thank you, Lama for the precious tutorial ❤ Thanks
I was waiting for Next JS project. Thank you
You just beat all the paid courses hehe. Welcome back lama after long time but you came with a bang. Cant wait to finish this course
This is the complete and best e-commerce project I've ever come across!! Thank you so much ❤
Lama you are the most amazing teacher i have ever seen, please let me touch your feet master, i just can't thank you enough, you are the only reason web development is fun for me and i can create any complex website, thanks to you, forever grateful lovely lama🙏
Splendid work, kudus. Thank you so much. ❤
Lama Dev, happy you're back!
Like always this man is done the brilliant job again.
Thanks Lama Dev! Automatic thumbs up!
Thanks for the video I was looking to make an e-commerce app to add to my portfolio You are precise dont waste time repeating things over like most do in udemy
Wow Lama dev just unlock 🔓 another level !! 🎉🎉
Your tutorial really awesome. Thanks for the masterpieces🎉
Dear Lama you are a great explainer and teacher ❤❤❤ Please keep providing with such quality content ❤
This is amazing. Thanks from Uzbekistan 🇺🇿
Very nice and impressive , best wishes for such a great job ❤
I hope, you will create a video for our own cms in prisma postgres 😊
Lama dev all I can say is thank you
Such a amzaing project and thats also for free !! Amazing work
First time I completed your video tutorial successfully. Thank you bro!
Amazing quality content as usual! So excited for the paid master course, hoping it includes shipping label api config. creation (such as DHL/USPS) or even employee management facilitation (logging hours, actions log, etc.) it will be the most supreme course I will have to recommend to peers.
Congrats me You are Officially the KZreadrs of the Year
From Iran ... thanks dear lama dev . Safak
I can't tell how much this guy is intelligent 4 real
Nice to see you again
Protect LamaDev at all cost! 👊🏼💻
bruh this project of yours includes all there is about e-commerce apps lol. thanks a lot !!!!
Rhank you lama dev so much for this video
@hamennicheharoune6879
27 күн бұрын
Thanks
Amazing detail ^^ Thanx
Wonderful your are always amazing ❤❤❤
thanks a lot bro, keep going
Great job man, Thank you very much
this is really helpful thank you! are you able to do this with shopify aswel? sorry im new to all this.
Thank you so much for this video. Please make a video with Medusajs for backend. I think medusa also a powerful headless backend.
Amazing course
Awesome project!!! Please can you recreate this in MERN
nailed it brother
Which VSCode extensions are you using. Awesome tutorials 🙏🏻
Que impresionante!!!!!! Muy bueno!!!
Please make a video on the full process , like how to get the idea, which database to choose, what framework to choose, how you design schemas and UI and then writing the code
Thank you very much ❤❤
Welcome back ❤
Very cool! Thank you for this class. One question, do you know how to use the Facebook pixel in the project? It would be even better. Thanks.
That's amazing ❤❤
thanks you for best lecture❤
Abi sen nasıl bi' kralsın ya :)
Thanks , We want React because nextjs is very heavy on browser
Amazing project and big thanks. It will be also great if you could add Stripe payment on this project
amazing as alwaya ❤🎉
Excellent course 💯👍👌😃😸😄
that was amazing i hope u will add admin panel rather than using wix
Hello, I am from india. Bro thank you.
lama is the goat
Best of the best 😃
Clean and great
Hey Lama dev,you are doing great.More than great and thanks for this awesome tutorial.But we will really appreciate if you can build this project on Mern and Nextjs by creating separate folder of frontend and backend.Nobody on yt has done this except one guys, plzz take my comment into consideration
Can you start doing with React Native too for some of us who are Mobile Developers.
thank you sir
very nice!
amazing broooo....next a video calling app 😌😌🤤
Amazing 😍 😍
it is amazing..
can you make a video where when we chose a color variant to change image by th e color variant?
Lama, please, what do u think about "Strapi"?
Didn’t you consider using payload cms in next projects?
After an order is placed, how is shipping for the product handeled? For example with shopify, the store owner would be able to see the product ordered, and simply print out the shipping label on their system.
Great why not deployed it to vercel?
Thx teacher
can you make this using MERN? Thank you !
Hello sir, can you make similar kind of video using nests js as a backend
Wonderfull.
Lama can you also use some payment gateway that works in Africa because stripe does not work in our countries
Could you possibly create tutorial video on MERN e-commerce app ?
Make tutorial on Next JS templatefor Shopify template to integrate for their headless CMS
Sir please make a deployment video for MERN real estate project of yours
Hi Lama, Why don't you use TypeScript for projects? Next tutorial with typescript please.
Can you please make more videos with .JS extension please. Thanks
Please build the backend admin panel for this without using the wix
awesome tutorial! but.. wouldnt be better to use mongodb?
can you create a tutorial like this for shopify headless there in no in the internet
please llama, any ata on the react course?
Can you do a headless CMS with WordPress?
Which Extensions are installed to get the compt shortcut?
hey Lama can you show us how to load next 14 js projects on hostinger
i m tring to get a tech intership, should i add it in my resume ?, please somebody share your experiences
do we have to buy premium for using any of the services given above
I like the video.... I had one request though...Would you do another one with Medusa-JS CMS
Well deserved bro #
Great tutorial... again! I have an issue on the profile page when running the build command which gives me an error of: "message": "Missing site member id: UNKNOWN", and "Permission denied"... Anyone else get this and any solutions?
First always for.you.
Why u not using nestjs
Sir plz make ur own dashboard so will get to know how to make both of them
I can't see any projects anywhere regarding whether it is possible to use next.js with node.js.
@LamaDev, please make betway clone