Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe
Рет қаралды 359,875
Күн бұрынLearn how to build an incredible e-commerce webshop with an admin dashboard and CMS using Next 14, Stripe, TypeScript, and Payload CMS.
⭐ Payload CMS: payloadcms.com/new?...
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
📚 Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/ecomm...
Payload is open-source (give them a star too ⭐): github.com/payloadcms/payload
Code and Assets: github.com/adrianhajdin/ecomm...
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:03:33 - Payload Setup
00:08:05 - Code Setup
00:16:55 - Folder Structure
00:27:41 - Header
00:43:37 - Footer
01:04:41 - Login Page
01:10:53 - Create Account Page
01:14:32 - Recover Password
01:19:58 - Hero Section
01:34:30 - Categories Section
01:56:47 - Promotion Section
02:03:51 - Products
02:13:16 - Filters
02:25:53 - Product Card
02:38:42 - Product Details Page
02:45:58 - Related Products
02:55:36 - Cart Page
03:20:00 - Stripe
03:25:15 - Checkout
03:29:11 - Order Confirmation Page
03:31:00 - Challenge
03:33:56 - Deployment
@rademilijasevic4313 3 ай бұрын
Adrian you are an amazing coder as well as presenter/teacher. Without previous typescript or React or NextJS knowledge, I was actually able to follow you in real time. This is one of the rare videos that actually work top to bottom and is excellent place to start coding. Following this video I will take Next.JS tutorial to have all this sink in and continue learning. All the tech stack used in this video is awesome, I am sold for it. I spent days searching for a good tutorial on building an ecommerce site and I hit a jackpot finding this video. I designed and built an e-store using Elementor and WP but I wanted to learn the code and start customizing. Many many thanks. Keep up your great work.
@Mohammadr_m 5 ай бұрын
Thank you so much, Mr. Adrian! I'm a developer who'sbeen stuck with wordpress for ages. Ive been looking to transition to Next.js but time was always an issue. This video is exactly what I needed to make this shift happen. Really thankful for this! 🙏🏻
@javascriptmastery 5 ай бұрын
That's amazing, enjoy it!
@AzizbekMamatqulov-kf8ld 3 ай бұрын
maybe I should change environment variables ??? I tried but not helped
@volumetwoooo 5 ай бұрын
The amount of ultra quality this channel has been putting out is pure blessing from Adrian to all of us who keep studying this. Thank you so much, as always.
@javascriptmastery 5 ай бұрын
Enjoy!
@thedonner7746 4 ай бұрын
OOh im so excited for this one! i recently found your old e-commerce tutorial and the old versions of everything made it deprecated, i was so sad, time to work again!
@kazi7935 15 күн бұрын
This is the best video on e-commerce project I’ve ever seen on KZfaq. I was able to start and finish it without any complications. Thank you so much Adrian.
@viallymboma9874 5 ай бұрын
Damn...the speed at which you do this is just mind-blowing... you're a power dynamic to this js generation 🎉
@josecentenodev 4 ай бұрын
Wow, I'm really impressed by how you handle debugging on the fly as you code! It's amazing to see your problem-solving skills in action. Your ability to troubleshoot and fix issues on the spot is truly inspiring. Keep up the great work!
@MotivateSphereOfficials 4 ай бұрын
yes he's talented ,
@bigjoe100 5 ай бұрын
This guy is just killing it ever since I found your channel I have fallen in love with Front-end development. Just started the social media App with Tailwind and Appwrite project and I must say it is fantastic.Thanks, Adrian for bringing real web development to us.
@javascriptmastery 5 ай бұрын
Thank you Joe!
@anidkhan6796 4 ай бұрын
Damn this must be the most functional and best e-commerce next js project available on KZfaq.
@besttheprogrammer 2 ай бұрын
yeah bro
@codemantis5986 5 ай бұрын
Was on the lookout to start my own e-commerce store, this came just in time!
@manjeshrv3269 5 ай бұрын
Dude you're killing it when it comes to react and next. How are you rolling out things so fast with such an amazing quality.
@nomen385 5 ай бұрын
He's an alien
@guitarhero69 5 ай бұрын
bro has a separate team working on new projects. and then he presents them in a video
@manjeshrv3269 5 ай бұрын
@@guitarhero69 makes sense
@javascriptmastery 5 ай бұрын
Thank you so much! ♥️
@DS-AIArvinkritik 5 ай бұрын
@@javascriptmasterybro make us a devoloper with angular and vue also !!!
@kohzor 4 ай бұрын
thanks for the tutorial. now its time to try to integrate more ecommerce functionality. things like tracking order shipments, order cancellations/refunds and etc. appreciate your comprehensive approach to building this app.
@HannanShah-el5cr 3 ай бұрын
I never comment on videos, but I must say you are a talented teacher. I wish you all the best with your channel!
@Tapadar.Monsur 5 ай бұрын
Absolutely phenomenal, Adrian! Thank you for another project video.
@javascriptmastery 5 ай бұрын
Thank you so much!
@muhamedmouzoun Ай бұрын
The way you explain is amazing. It keeps you focused ! Thanks!
@adrianmaull1242 5 ай бұрын
Excellent course. It would be nice to see how to include shipping details in the Cart/Checkout process.
@mahtabvariyani 5 ай бұрын
This guy is a savior for all those who are learning JavaScript. He is the best on KZfaq, and, most importantly, he never says 'follow me,' 'subscribe,' or 'like.' Because everyone, after seeing his talent, perfect work, and effort, which he puts into his content, will like, comment, and subscribe automatically. This guy is the best JavaScript teacher on KZfaq
@javascriptmastery 5 ай бұрын
Thank you! It means a lot!
@KolaToyin-wf6vb 5 ай бұрын
For real. Anytime I see a notification that he has drop a new video I'm always ready to check it out
@moalaoudi9411 5 ай бұрын
@@javascriptmastery Yes Good content. However, I want to see more of these full stack and MERN projects and more deployments on AWS. More projects of Full stack Applications with AWS.
@preciousbanigo 2 ай бұрын
@@KolaToyin-wf6vb same here Bro. Amazing content everytime.
@vaporizor92 5 ай бұрын
I am up to 50:08 and having a difficult time finding the correct .scss referenced at 50:08 for the grid. Therefore, I manually wrote it up and here it is for anyone who needs it: .inclusions{ display: grid; justify-content: center; gap: 30px; padding: 0; grid-template-columns: repeat(4, 1fr); margin: 100px 0; @include large-break { grid-template-columns: repeat(2, 1fr); } @include mid-break { margin: 60px 0; } @include extra-small-break { grid-template-columns: 1fr; } }
@user-yc3pb1ij7g 5 ай бұрын
That section of code was missing and was giving me errors. Thank you so much!!
@someoneyouknow2440 Ай бұрын
You're a life saver, thanks!
@GoodbyeMrX Ай бұрын
Thanks. At the end there is still missing: .icon { margin-bottom: 16px; }
@mazeedsalvador8578 5 ай бұрын
Wow! I haven't started but just the demo is blowing my mind 🤯
@barbararajic3610 5 ай бұрын
Adrian, you are a lifesaver. I have been looking for a quality course like this for weeks. Hvala ti puno ❤
@javascriptmastery 5 ай бұрын
Happy to hear that!
@R0VERKAI 5 ай бұрын
OMG, I just asked for this in another Video. Is this magic?!🤩 Thank you so much😭
@sukunademonking07 5 ай бұрын
Hey! Can you please upload a MERN video showcasing google oauth and also 2FA? Please don't use Next.js and Typescript. Your way of teaching is really great. It would mean a lot❤I know you guys must be getting a lot of request. Please show how oauth2 is now being implemented in production. Thank you!
@shreyxnsh.14 4 ай бұрын
+1
@miloshayk1724 2 ай бұрын
Man your the best. This guy is super crazy . No one is near him on youtube superb content
@KayodeVictor 5 ай бұрын
Sir you the best on youtube. No doubt!!!
@ahmedhaidda526 4 ай бұрын
Adrian! Thank you for another project video .. js master ❤
@lhm9068 5 ай бұрын
this is what i was looking for. I know the video will be absolutely amazing. Thank you so much jsm!!!
@javascriptmastery 5 ай бұрын
Enjoy!
@khaledlkurdi 2 ай бұрын
That is one of the best videos on the internet now 🔥 because it is solving and explaining a looooooot, thanks!!
@freeion2023 5 ай бұрын
Just Amazing. Exactly what I was waiting for.
@robertotieno7414 5 ай бұрын
Thank you so much sir! I love these tutorials. Learning so much.
@torahfelix7820 5 ай бұрын
Your content is just so awesome. I just started learning js and I have already built 2 react projects and learning really good practices. I can't thank you enough Adrian. 😭
@javascriptmastery 5 ай бұрын
Thank you!
@yousufhossain9768 5 ай бұрын
When i get a job im gonna surely buy all of courses you provided .. thank you Adrian for teaching us the best quality content about Web development. You teaching us prod quality project that can actually increase the value of resume.
@javascriptmastery 5 ай бұрын
Thank you!
@devanshsinghparmar 4 ай бұрын
this is an amazing one, but there is one thing still missing I would love to suggest that please add Size feature in this e-commerce or reference us. It will be helpful for many of us!
@WiLDeveD 5 ай бұрын
You are the Best bro by far in Full Stack App Tutorials in KZfaq. Thanks and God speed ❤
@javascriptmastery 5 ай бұрын
You're welcome! ❤
@emericfokouong5243 5 ай бұрын
I sooo needed this. Thanks, bro. You are the best⭐⭐⭐
@adenkaine 4 ай бұрын
It would be cool to see how to incorporate the Printful API (which is free to start) into this for the products maybe on a future video! Good Job though, awesome stuff!
@GoodbyeMrX Ай бұрын
By far the best channel for coding. Very good explanation, I learned alot. Coding is on point. Great mic, voice of an angel. Ty for this great tutorial!
@RoadTrip-and-Music 5 ай бұрын
In case someone face errors when deploying this nice project I can share my trick which helped me deploy it finally )) maybe it's not good way, but my goal was to deploy it in anyway! )) some rows should be added in .eslintrc js file... plugins: ['prettier'], rules: {'prettier/prettier': 0} to avoid a lot of prettier errors during building logs and also need install 'simple-import-sort' plugin and add few rows to the same .eslintrc js file... plugins: ['simple-import-sort'], rules: { 'simple-import-sort/imports: error} to avoid a lot of errors with saying to run autofix to sort imports... Somehow it helps! Ha ha! ;)
@RoadTrip-and-Music 5 ай бұрын
That was funny )) --- ESLint: Cannot read config file: /workspace/.eslintrc.js Error: error is not defined --- the trick was not in that rows should be added, but in that way that it couldn't be read and just passed through, so no errors anymore and build was done! :D
@BhuvaneshM 5 ай бұрын
We all accept that the quality is extremely good but in most of the videos you are building FRONT-END based projects. In this video you are using a CMS to handle back-end. All we want is a REAL FULL STACK project with Backend code. Like a MERN STACK PROJECT 🔥🔥🔥🔥🔥
@mimcris8481 5 ай бұрын
E-Commerce app! Great, I'll definitely try this one out!
@ishaanrawat9846 5 ай бұрын
Definitely a project that will standout and look good on my portfolio have to learn next js and typescript first :X
@valentinote71 4 ай бұрын
Thank you so much, Mr. Adrian! You provide knowledge about There really are a lot of these things.😁😁😁
@ahmeddalhalabi 5 ай бұрын
This is what we've been waiting for After the excellent course on next.js14 I think you are in this lesson You will expand further on next.js It touches on new points that have not been touched upon before This will make people follow your lessons It reaches a very advanced stage in next.js Thank you from my heart I promise you a nice surprise after a week My son who followed your course on next.js 14 Near the end of the project But after he added a lot of wonderful things to it You will be surprised by it He is still 14 years old and we are waiting for you to translate the video into Arabic
@javascriptmastery 5 ай бұрын
Thank you!
@ProjectsMastery82 5 ай бұрын
This is a great video Adrian 🎉 I love the CMS part 😊
@javascriptmastery 5 ай бұрын
Thanks!
@marcosmandamba3296 5 ай бұрын
Thank you so much for the content you have shared with us!
@javascriptmastery 5 ай бұрын
Sure thing!
@programmerslife01 5 ай бұрын
Awesome of the awesomeness!!! As always, thank youu so much, Adrian! 😁😍😍
@javascriptmastery 5 ай бұрын
Thank you!
@youthfactfactory7877 5 ай бұрын
Amazing video Adrian your explanations are awesome brother when it comes to react and nextjs ❣❣💖💖
@vamsikrishnanouluri972 5 ай бұрын
Thanks for the great content adrian
@gamerzchoices 5 ай бұрын
Wow, this is exactly what I needed for my current semester, e-commerce website. Thank you alot you saved me ❤❤❤
@javascriptmastery 5 ай бұрын
You're very welcome! ❤
@peakyblinderzz 3 ай бұрын
How did you deploy it?
@Jayant_k89 Ай бұрын
hello brother did u made this project ?
@ralphrosael 5 ай бұрын
Wow! Thanks Sir for this awesome project! 🤩
@javascriptmastery 5 ай бұрын
Most welcome 😊
@aymensettey8975 5 ай бұрын
Wow one of the best excited to start coding it along❤
@javascriptmastery 5 ай бұрын
Enjoy ♥️
@belloyahaya9854 5 ай бұрын
Wow bro. Awesome project, quick suggestion; build a school portal for your next project ❤
@devanshsinghparmar 5 ай бұрын
THIS IS OUTSTANDING FOR SURE
@javascriptmastery 5 ай бұрын
THANK YOU!
@youthfactfactory7877 5 ай бұрын
Also I wanted to build this along with you so I can understand that in particular company how codebases are understood and how to contribute in them
@nisarshinwari3854 5 ай бұрын
something i am looking for thank u adrian huge shout🎉😍
@javascriptmastery 5 ай бұрын
Thank you!
@anonymousftw6386 5 ай бұрын
I would love to watch ,tutorial videos of teck stacks along with projects from you
@judao1383 2 ай бұрын
Thanks for the exellent content! Is there a guide for Deploying on the free tier in Vercel?
@webunveilers 5 ай бұрын
Thank you andrian. Love from East
@rahulgoswami7503 5 ай бұрын
Thank you so much Adrian ❤
@javascriptmastery 5 ай бұрын
Any time! ❤
@ahmettarkbostan4681 5 ай бұрын
Maaaan this one and only content in entire youtube❤ Thanks brother
@javascriptmastery 5 ай бұрын
Thank you!! ♥️
@dattebaayo 5 ай бұрын
Tomorrow i was serching for a course to build ecommerce using next js with stripe payment i didn't find any good. Now here you uploaded today
@javascriptmastery 5 ай бұрын
Great to hear!
@michaelanthony4750 5 ай бұрын
You read my mind. I was just wondering how to use Payload. Thanks!
@javascriptmastery 5 ай бұрын
Glad I could help!
@programmershams 5 ай бұрын
Bro you are the best developer i knew so far You are amazing 👏 ❤️
@javascriptmastery 5 ай бұрын
Thank you so much 😀
@tks5182 5 ай бұрын
Please JSM I love your content, will you create a zero to hero course in Javascript / Web Development!
@G_O_J_O_S_A_T_O_R_U 5 ай бұрын
Amazing stuff as always, everything looks smooth , cant wait to build this
@javascriptmastery 5 ай бұрын
Hope you enjoy it!
@tatanjer 5 ай бұрын
Woow me encanta tu trabajo felicidades por lo que haces ❤
@javascriptmastery 5 ай бұрын
Gracias! ♥️
@suryakantasinha 5 ай бұрын
Finally😌 Thanks Adrian❤
@javascriptmastery 5 ай бұрын
Enjoy ❤
@muhammedoganay 5 ай бұрын
Very useful content indeed thanks. it would be also good if there had been a favorite section in the system too 👏
@javascriptmastery 5 ай бұрын
Great suggestion!
@sarhan_104 5 ай бұрын
Bro I was not following you since a long, as I heard about tutorial hell stuff and copying one line to line But this one is to must follow Definitely gonna make it
@javascriptmastery 5 ай бұрын
Enjoy!
@General_Q_A 4 ай бұрын
Nice , i tried this. But can you share how to add slider filter for price range, more products photos and if want how to add another payment provider.
@Dizedev 5 ай бұрын
Ya te extrañaba exelente proyecto para comenzar el 2024
@javascriptmastery 5 ай бұрын
Thanks!
@krateskim4169 4 ай бұрын
My favourite full stack channel
@melcrafter 5 ай бұрын
Teacher Adrian, in the Filters section the Checkbox component from PayloadCMS only need to change the name of the property Label to Name like indicate the Error message, but the checkBox is ugly so Thumb ups for the Custom Checkbox. Thank you for the Class
@vaibhavchauhan3741 5 ай бұрын
You are Great 👍🏻👍🏻 Thanks for keeping this type of High quality content for free ❤❤
@javascriptmastery 5 ай бұрын
My pleasure 😊
@memaimu 5 ай бұрын
Incredible stack. A word of warning to newbies: You will not learn much without attempting to implement any of the functionality yourself. Therefore, you need to understand what needs to be implemented, and attempt to implement it, before watching on. If you are just coding along with the video, you might remember some syntax, but you won't retain any of the most important information. If you need an app for your portfolio, at that point, you might as well just clone the repository. :)
@javascriptmastery 5 ай бұрын
I always recommend coding along, as well as trying to code some features before watching the video, and then while watching, and then re-doing it after watching. A combination helps
@HSGG_ 5 ай бұрын
yeah, ill just clone it thx for the tip
@ZachCortez 5 ай бұрын
🎉yes! New weekend project! 😁
@javascriptmastery 5 ай бұрын
Enjoy! 😊
@krateskim4169 4 ай бұрын
Happy new year I hope you reach new heights
@pungushe 5 ай бұрын
It's amazing. Thanks for the video
@javascriptmastery 5 ай бұрын
Thank you! ♥️
@Showmatic 5 ай бұрын
Payload sure is growing, I love using it
@javascriptmastery 5 ай бұрын
Exactly!
@peakyblinderzz 3 ай бұрын
Can I deploy this in vercel or netlify?
@Pierrot24382 5 ай бұрын
Thank you Adrian!
@user-jk8bo2px1l 5 ай бұрын
BRO! you're the best! thank u!
@javascriptmastery 5 ай бұрын
You are!
@nikhilranka9660 3 ай бұрын
*Looks like a good combination to explore. I am waiting with my wallet for the day when you launch a course to build UI prototypes. Rapidly build UIs using React.
@edulynczm 5 ай бұрын
This is insane!!!! You are the G.O.A.T💯
@javascriptmastery 5 ай бұрын
Glad you like it!
@toomgbebu164 7 күн бұрын
Appreciate the decication you give into what you do..keep it up. Want to also ask about the websites you normally use for your images and icons pls?
@yugal8627 5 ай бұрын
You are just waooo as always Adrian👌. Just a humble request please bring a video on Figma and GraphQL.
@EmmanuelNgwandu 5 ай бұрын
It will be great
@javascriptmastery 5 ай бұрын
Noted!
@judevector 5 ай бұрын
Wow this is mind blowing 🤯, please can you also do backend projects
@javascriptmastery 5 ай бұрын
Will do!
@nitishkafle8470 4 ай бұрын
This is great, thanks for making these videos. Any plans on creating a blog based project with Next 14 & MDX ?
@antareephasan 4 ай бұрын
Hey, were you able to deploy it? Payload Cloud Storage is working? I am getting "access denied"
@asaiahhenson 5 ай бұрын
am happy you did it this time with normal Css
@javascriptmastery 5 ай бұрын
Thanks :)
@nullpointer7809 2 ай бұрын
Somebody give this man an Oscar. Or whatever is equivalent for a web developer!
@edenmaimon6983 5 ай бұрын
I've been following you for a year and half and really enjoy your videos, you make them just great! Just for understanding - is this project paid after the 30 day trial? Thanks!! ❤
@javascriptmastery 5 ай бұрын
You can always deploy it on your own for free, but even better, soon enough, a Vercel deployment will be within their free tier :)
@red8599 5 ай бұрын
amazing as always 😊😊
@javascriptmastery 5 ай бұрын
You are! ♥️
@saadabdussami412 5 ай бұрын
Thanks man keep it up
@javascriptmastery 5 ай бұрын
No problem 👍
@cesarmejias9008 5 ай бұрын
nice videos, thank you! you are a great creator!
@javascriptmastery 5 ай бұрын
Glad you like them!
@samkwomo6030 5 ай бұрын
Hi Adrian! Are we locked in with stripe? Or can we use other payment gateways if we want?
@MegaCh7 5 ай бұрын
Can you recommend a site where can we find decent PNG images for our projects? Great work, thank you for the project ^^
@pulkitmethaniya6471 5 ай бұрын
You. Killed me 😢 I started your old ecommerce project today and make it half and you uploaded this 😢
@javascriptmastery 5 ай бұрын
No worries, you'l llearn more that way if you combine the two! :)
@kennedyfreitas7548 4 ай бұрын
Sanity has a pretty neat competitor... Payload seems really cool
@alamarnissi529 5 ай бұрын
Really awesome bruh ❤ Thanks a lot
@javascriptmastery 5 ай бұрын
Appreciate it ♥️
@kunalss9314 5 ай бұрын
I was waiting for this one
@javascriptmastery 5 ай бұрын
Well, it's here
@umairulislam9048 5 ай бұрын
What an incredible Project 😮😊😮
@javascriptmastery 5 ай бұрын
Thanks!±
@muzamilfootballer5682 5 ай бұрын
Adrian u are amazing bro 😍
@javascriptmastery 5 ай бұрын
Thanks!
Tips Workshop
Рет қаралды 46 МЛН
HighLoad Channel
Рет қаралды 10 М.
Theoretically Media
Рет қаралды 29 М.
Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More
JavaScript Mastery
Рет қаралды 1,6 МЛН
Tips Workshop
Рет қаралды 46 МЛН