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

  • @jarencefeliciano
    @jarencefeliciano27 күн бұрын

    This man beats paid courses on Udemy. Bravo!

  • @knowledgedose1956

    @knowledgedose1956

    27 күн бұрын

    yet he does it for free🎉

  • @ntramu4186

    @ntramu4186

    23 күн бұрын

    Is udemy courses that bad? I want dig dive more than just projects like this, does udemy course is good option?

  • @jarencefeliciano

    @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

    @endrixhukellari3256

    22 күн бұрын

    @@ntramu4186 dude, go for John Smilga, I promise you will not be disappointed, every course has projects.

  • @deanwinchester8943

    @deanwinchester8943

    16 күн бұрын

    @@ntramu4186so so and the problem is some of these courses of Udemy are late behind and need to be updated

  • @mengistutadese4858
    @mengistutadese485827 күн бұрын

    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

  • @ismaeltinta6118
    @ismaeltinta611826 күн бұрын

    this channel deserves 1M subscribers. I am so grateful to have found it last year.

  • @PETERFILM
    @PETERFILM27 күн бұрын

    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

    @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

  • @hieptx1909
    @hieptx190921 күн бұрын

    this is one of the best tutorials in this world. Thank you, man. Love from Vietnam

  • @IOSARBX
    @IOSARBX27 күн бұрын

    Lama Dev, I subscribed because your videos are super cool!

  • @abdulrafayakber3798
    @abdulrafayakber379821 күн бұрын

    Best fullstack projects channel on youtube for sure!

  • @bilimlink
    @bilimlink23 күн бұрын

    I just want to say thank you, Lama for the precious tutorial ❤ Thanks

  • @satyapalsrajpoot5469
    @satyapalsrajpoot546924 күн бұрын

    I was waiting for Next JS project. Thank you

  • @gamingcave4386
    @gamingcave438627 күн бұрын

    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

  • @zzzzz6668
    @zzzzz66684 күн бұрын

    This is the complete and best e-commerce project I've ever come across!! Thank you so much ❤

  • @kunaldhuria3935
    @kunaldhuria393527 күн бұрын

    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🙏

  • @The-sound-of-silence
    @The-sound-of-silence21 күн бұрын

    Splendid work, kudus. Thank you so much. ❤

  • @giovannidjuric2321
    @giovannidjuric232126 күн бұрын

    Lama Dev, happy you're back!

  • @ashiqrahman4858
    @ashiqrahman485826 күн бұрын

    Like always this man is done the brilliant job again.

  • @sonoftroy8572
    @sonoftroy857227 күн бұрын

    Thanks Lama Dev! Automatic thumbs up!

  • @MrStarba3
    @MrStarba321 күн бұрын

    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

  • @PattyBeautCode
    @PattyBeautCode27 күн бұрын

    Wow Lama dev just unlock 🔓 another level !! 🎉🎉

  • @smartdriver2990
    @smartdriver299026 күн бұрын

    Your tutorial really awesome. Thanks for the masterpieces🎉

  • @usamarazaaq7266
    @usamarazaaq726625 күн бұрын

    Dear Lama you are a great explainer and teacher ❤❤❤ Please keep providing with such quality content ❤

  • @magrur5266
    @magrur526620 күн бұрын

    This is amazing. Thanks from Uzbekistan 🇺🇿

  • @Aamironline125
    @Aamironline12527 күн бұрын

    Very nice and impressive , best wishes for such a great job ❤

  • @Aamironline125
    @Aamironline12527 күн бұрын

    I hope, you will create a video for our own cms in prisma postgres 😊

  • @martinonic6625
    @martinonic662525 күн бұрын

    Lama dev all I can say is thank you

  • @Dinesh-jt1tb
    @Dinesh-jt1tb27 күн бұрын

    Such a amzaing project and thats also for free !! Amazing work

  • @magrur5266
    @magrur5266Күн бұрын

    First time I completed your video tutorial successfully. Thank you bro!

  • @BrutalInsights
    @BrutalInsights26 күн бұрын

    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.

  • @Fistonw
    @Fistonw21 күн бұрын

    Congrats me You are Officially the KZreadrs of the Year

  • @AirOfFreshBlue
    @AirOfFreshBlue27 күн бұрын

    From Iran ... thanks dear lama dev . Safak

  • @IamDarkAngeL1
    @IamDarkAngeL127 күн бұрын

    I can't tell how much this guy is intelligent 4 real

  • @naseemsaffy
    @naseemsaffy27 күн бұрын

    Nice to see you again

  • @elyasarkin2638
    @elyasarkin263824 күн бұрын

    Protect LamaDev at all cost! 👊🏼💻

  • @amdrx6700xt
    @amdrx6700xt27 күн бұрын

    bruh this project of yours includes all there is about e-commerce apps lol. thanks a lot !!!!

  • @hamennicheharoune6879
    @hamennicheharoune687927 күн бұрын

    Rhank you lama dev so much for this video

  • @hamennicheharoune6879

    @hamennicheharoune6879

    27 күн бұрын

    Thanks

  • @hacistein
    @hacistein27 күн бұрын

    Amazing detail ^^ Thanx

  • @KenatoHat-rg9mb
    @KenatoHat-rg9mb27 күн бұрын

    Wonderful your are always amazing ❤❤❤

  • @simo_64
    @simo_6427 күн бұрын

    thanks a lot bro, keep going

  • @bilelazizi5700
    @bilelazizi570025 күн бұрын

    Great job man, Thank you very much

  • @shanishere4308
    @shanishere430825 күн бұрын

    this is really helpful thank you! are you able to do this with shopify aswel? sorry im new to all this.

  • @AITS-
    @AITS-16 күн бұрын

    Thank you so much for this video. Please make a video with Medusajs for backend. I think medusa also a powerful headless backend.

  • @inamurrehman343
    @inamurrehman34327 күн бұрын

    Amazing course

  • @tobibakz387
    @tobibakz38726 күн бұрын

    Awesome project!!! Please can you recreate this in MERN

  • @hafizappu9989
    @hafizappu998926 күн бұрын

    nailed it brother

  • @rredington305
    @rredington30522 күн бұрын

    Which VSCode extensions are you using. Awesome tutorials 🙏🏻

  • @gonzalooviedo5435
    @gonzalooviedo543527 күн бұрын

    Que impresionante!!!!!! Muy bueno!!!

  • @ALLTOEXCLUSIVE
    @ALLTOEXCLUSIVE23 күн бұрын

    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

  • @ramprasadchauhan7
    @ramprasadchauhan727 күн бұрын

    Thank you very much ❤❤

  • @NaveenSinghOfficial1
    @NaveenSinghOfficial126 күн бұрын

    Welcome back ❤

  • @MatheusSilva-qm3ph
    @MatheusSilva-qm3ph25 күн бұрын

    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.

  • @user-em7kk4ku7z
    @user-em7kk4ku7z27 күн бұрын

    That's amazing ❤❤

  • @developmastery-if6si
    @developmastery-if6siКүн бұрын

    thanks you for best lecture❤

  • @fatihcan5890
    @fatihcan589027 күн бұрын

    Abi sen nasıl bi' kralsın ya :)

  • @-mohammadalakedy5417
    @-mohammadalakedy541725 күн бұрын

    Thanks , We want React because nextjs is very heavy on browser

  • @yantech.4249
    @yantech.424927 күн бұрын

    Amazing project and big thanks. It will be also great if you could add Stripe payment on this project

  • @niteshprajapat7918
    @niteshprajapat791827 күн бұрын

    amazing as alwaya ❤🎉

  • @godfreyndiritu9062
    @godfreyndiritu906216 күн бұрын

    Excellent course 💯👍👌😃😸😄

  • @nuruhussen-wo9wg
    @nuruhussen-wo9wg11 күн бұрын

    that was amazing i hope u will add admin panel rather than using wix

  • @IITHYDCSEtagore
    @IITHYDCSEtagore27 күн бұрын

    Hello, I am from india. Bro thank you.

  • @ilkerdmrc
    @ilkerdmrc27 күн бұрын

    lama is the goat

  • @snow6699
    @snow669927 күн бұрын

    Best of the best 😃

  • @gamerzchoices
    @gamerzchoices22 күн бұрын

    Clean and great

  • @pokescreation
    @pokescreation22 күн бұрын

    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

  • @ibstudiosHD
    @ibstudiosHD27 күн бұрын

    Can you start doing with React Native too for some of us who are Mobile Developers.

  • @technicalugyen
    @technicalugyen27 күн бұрын

    thank you sir

  • @BrMacs
    @BrMacs25 күн бұрын

    very nice!

  • @alik5023
    @alik502316 күн бұрын

    amazing broooo....next a video calling app 😌😌🤤

  • @amrnzzal3832
    @amrnzzal383227 күн бұрын

    Amazing 😍 😍

  • @mengistu3137
    @mengistu313727 күн бұрын

    it is amazing..

  • @auxload
    @auxload13 күн бұрын

    can you make a video where when we chose a color variant to change image by th e color variant?

  • @viniciusm.m.7822
    @viniciusm.m.782219 күн бұрын

    Lama, please, what do u think about "Strapi"?

  • @InekMarcinek
    @InekMarcinek20 күн бұрын

    Didn’t you consider using payload cms in next projects?

  • @codingguild
    @codingguild22 күн бұрын

    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.

  • @muhammaduseram9405
    @muhammaduseram940527 күн бұрын

    Great why not deployed it to vercel?

  • @arielelias2413
    @arielelias241327 күн бұрын

    Thx teacher

  • @BreadForBrain100
    @BreadForBrain10026 күн бұрын

    can you make this using MERN? Thank you !

  • @technoinfoworldwide2329
    @technoinfoworldwide232926 күн бұрын

    Hello sir, can you make similar kind of video using nests js as a backend

  • @tsegayemassawa2711
    @tsegayemassawa271127 күн бұрын

    Wonderfull.

  • @somdeliemedia3969
    @somdeliemedia396927 күн бұрын

    Lama can you also use some payment gateway that works in Africa because stripe does not work in our countries

  • @waleedsharif618
    @waleedsharif6189 күн бұрын

    Could you possibly create tutorial video on MERN e-commerce app ?

  • @muhammadfaizantariq7841
    @muhammadfaizantariq784124 күн бұрын

    Make tutorial on Next JS templatefor Shopify template to integrate for their headless CMS

  • @ReadingRecess1
    @ReadingRecess15 күн бұрын

    Sir please make a deployment video for MERN real estate project of yours

  • @Memevsmemer
    @Memevsmemer10 күн бұрын

    Hi Lama, Why don't you use TypeScript for projects? Next tutorial with typescript please.

  • @RychAhlberg
    @RychAhlberg5 күн бұрын

    Can you please make more videos with .JS extension please. Thanks

  • @saroj3483
    @saroj348323 күн бұрын

    Please build the backend admin panel for this without using the wix

  • @thatOne873
    @thatOne87327 күн бұрын

    awesome tutorial! but.. wouldnt be better to use mongodb?

  • @alfaroexclusive2542
    @alfaroexclusive254213 күн бұрын

    can you create a tutorial like this for shopify headless there in no in the internet

  • @favanzzo
    @favanzzo26 күн бұрын

    please llama, any ata on the react course?

  • @sillyorca3865
    @sillyorca386520 күн бұрын

    Can you do a headless CMS with WordPress?

  • @RonaldMommsen
    @RonaldMommsen8 күн бұрын

    Which Extensions are installed to get the compt shortcut?

  • @yousifaldossary1903
    @yousifaldossary190322 күн бұрын

    hey Lama can you show us how to load next 14 js projects on hostinger

  • @user-nf3zj6tj7x
    @user-nf3zj6tj7x26 күн бұрын

    i m tring to get a tech intership, should i add it in my resume ?, please somebody share your experiences

  • @user-up3il9wx3d
    @user-up3il9wx3d25 күн бұрын

    do we have to buy premium for using any of the services given above

  • @otisrancko
    @otisrancko27 күн бұрын

    I like the video.... I had one request though...Would you do another one with Medusa-JS CMS

  • @VICKYDEV01
    @VICKYDEV0123 күн бұрын

    Well deserved bro #

  • @im24n
    @im24n2 күн бұрын

    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?

  • @faf1469
    @faf146927 күн бұрын

    First always for.you.

  • @ayeshdev
    @ayeshdev27 күн бұрын

    Why u not using nestjs

  • @Compli1212
    @Compli121221 күн бұрын

    Sir plz make ur own dashboard so will get to know how to make both of them

  • @oktayaltunkaya9019
    @oktayaltunkaya90194 сағат бұрын

    I can't see any projects anywhere regarding whether it is possible to use next.js with node.js.

  • @razzaqmohammedali4653
    @razzaqmohammedali465326 күн бұрын

    @LamaDev, please make betway clone

Келесі