Full Stack Ecommerce Store With Admin Dashboard From Scratch - Next.js, Prisma, Stripe, Tailwind
HTML-код
- Опубликовано: 14 июн 2024
- Join the Slack Developer Program for exclusive access to beta features, sandboxes, resources, and more: api.slack.com/developer-progr...
Next.js Simplified Course: reactsimplified.com/#next-js-...
Creating an ecommerce site is not easy. There are so many different things that go into even a simple ecommerce site from an admin dashboard, to payment processing, to account management, and so much more. In this video I will go through everything you need to do in order to get up and running with your very first ecommerce shop entirely from scratch with Next.js, Tailwind, Prisma, and TypeScript.
📚 Materials/References:
Next.js Simplified Course: reactsimplified.com/#next-js-...
GitHub Code: github.com/WebDevSimplified/n...
Intl Number Formatter Video: • Formatting Is So Easy ...
Zod Crash Course Video: • Learn Zod In 30 Minutes
Next.js Caching Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00:00 - Introduction
00:00:52 - Sponsor
00:02:10 - Database Setup
00:12:05 - Admin Dashboard Page
00:37:24 - Admin Product Pages
01:34:36 - Admin Authentication
01:45:22 - Customer Home Page
02:00:58 - Customer Products Page
02:03:32 - Next.js Caching
02:10:08 - Customer Product Purchase Page
03:02:28 - Admin Customers Page
03:04:18 - Admin Sales Page
03:06:48 - Purchase Receipt Email
03:24:38 - Customer My Orders Page
#Ecommerce #WDS #NextJS
Join the Slack Developer Program for exclusive access to beta features, sandboxes, resources, and more: api.slack.com/developer-program?AMER_US_EN_Q1_SLKAW_Developer_Program_Web_Dev_Simplified&
its free?
@@klkiessertggksmsmsjfldd It sure is!
I've been looking for this project for a long time. Thank Kyle for awesome project!
This video omits a lot of details for those just starting out, but it's great for those who already have worked with most of these tools in the past. Thanks!
Thank you for your feedback which I find useful. Please can you highlight what he omitted so I can review them or suggest an alternative prerequisite video.
I have never seen or used next before but i learnt its like Django which I am very used to. I also have experience with ExprezsJS and React
We've been waiting for something like this so long bro thanks for everything you do on the channel ♥
Thank GOD. I have a Next JS project in my job and your video came up. Damn.
this is going to be the best video on this channel
A wholesome project with almost a lot of best practices covered , definetly recommend to watch this ❤
thanks for this amazing video. So many key concepts are covered here, like redirects from api route to pages, prisma, server actions. Thanks!
Thank you Kyle. Much Appreciated. I'm an hour into the tutorial and i must say, "I'm learning some real full stack here".
man mad respect..this is what I was searching for
This is most useful tutorial on nextjs i have ever seen as senior react node developer
This looks like a fun project. Looking forward to it. Thanks!
Amazing video!!! Thank you so much! You're the best teacher!!!!
Incredible tutorial on building an efficient eCommerce site with minimal code! Leveraging tools like Next.js and Prisma not only streamlines development but also enhances scalability and maintenance 👍.
About time. Thank you for this. Now you should try other backends like python. Your breakdowns are amazing
Thank you very much Kyle! I learned a lot from this video, ❤.
I'm glad I could help!
thank you so much for this amazing course!
I really admire your speed from thought to implementation and iteratively moving forward while not spending too much time considering different options in each crossroads you hit
I usually get stuck on these mini decisions along the way while working. Perfectionism harms my velocity quite a lot!
Maybe you can talk about how you manage the need for perfectionism! (if you do face it of course 😅)
Thank you very much for the video, this type of content is appreciated.
Awesome tutorial 😁 need more nextjs project 😊😊😊
You are one of the best on RUclips
AMAZING tutorial!!!
EXELENT! 👍 I wish there was a shopping cart so can purchase multiple products, but of course you intended this to be basic! Do you have any other videos where can be upgraded to a shopping card? ☺
i love the way you shake your head left and right like an aggressive crocodile trying to rip off a flesh from a dear
haha deme deme ayıp
Wow, wow wow excellect. Mater of Everything, Next, React, Typescript, Tailwind, Css, Sass, ..... and with such a Speed. God Bless You. Very Informative..
wish you all the besttt 🔥🔥🔥
Great video. Thank you 🎉
Awesome!!! Thank you very much!!!
Thank You sir..This is really really helpful..
thats amazing! Thank you
Gem video to bookmark, thx
Thanks a lot! You're so kind...
Kyle drops another hit
Great content!
Thank you very much for doing this.
How would you perform client-side validation, e.g. similar to react-hook-form?
Something I would greatly appreciate is that you create another version of this for solid items shipped with a popular shipping calculator included. Thus would be cool and would help plenty of people selling actual items vs. digital downloads. Thx in advance!
WOW ALMOST 4 HOURS OF MY FAVORITE WOBBLY HEAD TALKING! WOHOOOOOOOO!1111
Great video, thanks! How about making a follow-up video on comparing the different state management approaches with regard to component tests? :) I think this could be an important factor and another way to highlight the differences.
Sounds great
This is a great project!!
Thanks🙏
You talk as fast as Ben Shapiro...no doubt you would be the Fastest Rapper on Earth if you switch jobs!!!
Have you considered doing any tutorials on building some kind of shipping integration? I looked into it recently and found it very intimidating.
Dev please do more videos on Next-js and TypeScript especially on Ecommerce-Site and other complex projects
thanks for really nice video.
can you create a video for i18n in app router? it's too complicated in app router
my only concern for this tutorial is that
the middleware for admin auth was done in dev mode.
i'm not sure it's gonna really work in production mode because everything is cached by default.
Thank you ❤
Thanks a lot!
When I finish this, I'll try adding product attributes, more fields, etc.
Great content, thank you. Imagine we are planning a React Native app for this shop, utilizing the same API/database. What are the best practices in Next.js 14 for exposing the API to external users? Is it feasible for Next.js 14 to handle both scenarios, or should we opt for a dedicated backend?
Hey kyle thanks for this one , can you guide us how to improve our css as a full stack dev because we focus on logic more than ui
Hi, thanks for this. Stupid question - any particular reason why you aren't using arrow functions for components, i.e. ?
Thank you Sir! Really appreciate the time you put into this tutorial, it saved me a lot of time from navigating best practices. I tried the Gen AI tools but they are not doing nearly as well as this because of new paradigms like App Router.
Thank you so much for the support! I am glad I could help.
@WebDevSimplified on top of what you have shown us here, i'd love to see what's the best way to integrate with i18n. The particular part i am exploring is the server side actions where you addProduct or updateProduct, which redirects back to the Product dashboard, wondering what's the cleanest way to retrieve the locale from server side and include in the redirects. Looking forward to your suggestions or another video 😊
Next.js has a bunch of documentation on including i18n in an application. I have considered making a video on i18n, but it is hard since it is something that is very particular to the app you are building.
I tried a few approaches ended up using paraglide.
Thank you!!!
No hate, just suggestion. I appreciate this video, but just as js mastery, you should also upload that kind of videos, just as this one! Nice video :)
That white Jackson is awesome 🥰
You might think Kyle is ELISA with his robotic head movement and fast-pace speech
So, am I missing something or upon successful purchase no record is made in Order table of the database?
Thanks bro🎉🎉🎉
wow that was so fast for me , guess im a noob afterall , right now studied and coded almos till 43 min , will take this forward tomorrow , thanks for this video , wanted to start my own ecom site
checking in again today , completed till 51:33 , was trying to load till 1:20:00 but it was way too much for me so instead tried coding and ended till 51 min , thank you so much for packing a lot of stuff , i have a newfound respect for u
i tried a lot to complete this in one go from 51 min but ending giving up at 2hr:15min~:, atleast this i coded till that point , alot of things seem more clear when we code it out , thanks again for all ur effort , u really made it simple, true to ur word , gn
Ok today its finally done , i gave up to code along when u started web hooks 🙃 but scanned fro there till the end as it was mostly react email and a bit of same which was done with admin products page but finally i completed this whole video feels so nice to be able to check this of the list
So it took me 10 days to actually complete it 😂 and u did it in 4~5 hrs 😮 glad i found this video learnt a lot from this video , really appreciate it from bottom of my heart
Fuuuuck me this is what we've all been waiting for in years
I would love to.
when caching the calls to the db, why not use memo as a simpler way to cache the fetched data till the user either exists the website or manually reloads?
are there alternatives to stripe I could use if it is not supported in my country?
Great work, can you do it with mern stack, redux and redux toolkit ?
hey man while you were making the add new product form, i tried to it my own way using the form component by shadcn just as it says in the docs and it was imposible.i even posted a question in stackoverflow and people had a hard time finding the issue. could you maybe make a video about the proper way to make forms with shadcn with form and react hook form? Would be a gem of a video. thanks anyway great tutorial.
Hey, Kyle! So, I'm not sure this question has been asked yet in the comments. You're using the "use server" directive in /src/app/admin/_actions/products.ts, but then you're using the client-side `File` type in the `fileSchema` validation. I'm not sure if I missed something earlier in the video that would prevent the "File is not defined" error due to referencing `File` in a server component ...?
stuck here as well
const fileSchema = (typeof File !== "undefined")
? z.instanceof(File, { message: "Required" })
: z.any(); // Provide a fallback schema or handle appropriately
Try this out, worked for me
❤ love you Kyle
finished this. You should extend this sample with user login, purchases and cart. PEACE
Appreciate your granularity, you did not even skip a damn skeleton. Thanks Kyle. A host of topics covered
Hi Kyle or anyone,
do you guys know how to get the billing address to show up with PaymentElement? I have added an AddressElement and it does add the cehckbox that says
'Billing is same as shipping information'
but it only gives country and ZIP code. do we not need also the billing address?
Some relevant timestamps for me
5:15 price in cents
9:17 restrict
9:40 download verification
12:30 shad config
whats with the PascalCase styling on elements? lol
also you should try and make your cam 3x smaller when coding
@WebDevSimplified
I have a question for if this project can be deployed in AWS Amplify?????
Thank you for the awesome project! 💯❤
how do you santize the data before putting into the database ?
The npm run email command is not working in my terminal. Do I need to install any CLI?
@webdev with the picture uploaded is it possible that I can use api that give me the product image if I type product name or sku
Why you use react caching and next unstable_cache. It is looks like they do the same thing.
I decided to just download the project because it's been taking too long to write it while following the video and it just doesn't run... great... I love webdevving Edit: nvm I forgot to run prisma migrate to make the database... I'm such a goof. Now I can toy with this like I originally wanted to
Email service bookmark 2:57:00
Is processing possible to upload a video playlist?
What do you use for auth
Hello Walker 🤠, can you add life simplification to your work...🤓.You make it easier
Hi, may i know what database used in this project? thank you
Is this a production ready app?
How do I store images Images [ url ]... sizes, colour, quantity etc ...
well done, can i re-design and deploy for business use ??
no
@@klkiessertggksmsmsjfldd why not ??? so how do i get it business ready ??
How would you deploy this on a hosting vps site
How page loading function works well? It seems that there is no particular code that implements this function but it works well without any states
i agree you. How does loading.tsx work we didin't import it anywhere
could u use nextauth in this course thanks
I need to do a project for school, and it's important to complete it because the teacher got a real client. The client wants a sales page, but nobody knows how to program a web page.
🔥🔥🔥
Brother I need to know some thing. I am currently in singapore and no time to do self learning things.
1. can you tell use to your daily life how going ?
2. How you manage your time , also you doing job ?
If you guys using yarn and encounter error ERR_ESM_REQUIRED when running the react-email like bellow:
[your_nextjs_app_path]/node_modules\ora\index.js:65
if (process.platform === 'win32') {
^
Error [ERR_REQUIRE_ESM]: require() of ES Module ...
You might have to delete your node_modules directory and then reinstall all the dependencies USING NPM (npm install), and DON'T use YARN (yarn). And then try to run the react-email script as in the video (npm run email).
Hope this helps you well.
20:18 How do you split the string into multiple lines within the cn() function? I get an unterminated string literal error 1002 when I try that.
If you notice it happen when he saves the changes - he has prettier extension enabled to ‘format on save’
Could anyone explain what's happening here in terms of database? I normally use mongodb but in the bits of the video I have watched so far there are no calls to a database.
he use prisma sql database, which setup locally
Is anybody else having trouble with the webhooks part? i just get back 404 errors from them and aside from variable name changes it is letter by letter a copy of the lesson.
text-muted-forehand is tailwind classes ?
I couldn't find that in tailwind css doc
Didn't find either.
They are classes that are generated due to the tailwind config file. When you setup shadcn/ui, some variables for colors, animation, etc. are added there and therefore you have access to these generated classes
@@kyriakosbekas Thank you!!
Can somebody help me please to add multiple images in product?
is using next auth?
Is this project available in GitHub please?
❤❤❤
Can someone provide me .env file format for this project
Navlink text wont even show for me.
I have the same layout as you do, however, the layout.tsx in (customerFacing) does not work, I have to remove the parenthesis for it to work, it seems like a conflict between the root layout and the layout inside (customerFacing), anyone facing the same issue?
I figured it out, just forgot to delete the page.tsx file in the app root