Build & Deploy Full Stack E-Commerce Website + Admin Dashboard
Using Next.js, Stripe, Tailwind, and MongoDB
Building an e-commerce website from scratch can be a daunting task, but with the right tools and technologies, you can create a professional and fully functional online store in no time. In this tutorial, we will be using Next.js as our frontend framework, Stripe for payment processing, Tailwind CSS for styling, and MongoDB for our database.
Getting Started with Next.js
Next.js is a popular React framework that makes it easy to build fast and dynamic web applications. It provides features such as server-side rendering, static site generation, and automatic code splitting, which can help improve the performance and SEO of your website. To get started, you can install Next.js by running the following command:
npm install next react react-dom
Integrating Stripe for Payment Processing
Stripe is a secure and easy-to-use payment processing platform that allows you to accept credit card payments on your website. To integrate Stripe into your Next.js project, you will need to sign up for a Stripe account and obtain your API keys. You can then install the Stripe package by running the following command:
npm install stripe
Styling with Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom designs without writing any CSS code. It provides a set of pre-built classes that you can use to style your website, such as colors, margins, padding, and typography. To add Tailwind CSS to your project, you can install it via npm:
npm install tailwindcss postcss autoprefixer
Using MongoDB as the Database
MongoDB is a NoSQL database that allows you to store and retrieve data in a flexible and scalable way. You can use MongoDB to store product information, user data, and orders for your e-commerce website. To get started with MongoDB, you will need to create a free account on MongoDB Atlas and obtain your connection string.
Deployment
Once you have built your e-commerce website and admin dashboard, you can deploy it to a hosting provider such as Vercel or Netlify. These platforms offer easy deployment options for Next.js applications and provide features such as automatic SSL certificates, serverless functions, and continuous integration.
Conclusion
By following this tutorial, you can build and deploy a full-stack e-commerce website with an admin dashboard using Next.js, Stripe, Tailwind CSS, and MongoDB. With these technologies, you can create a modern and user-friendly online store that is secure and scalable. Happy coding!
Hello everyone i know that some might be facing issue in multiSeletc for products new section, after a spending 5 hours i got it, shadcn updated and now command Item is disabled so,to fix the isssue
First wrap the commandGroup inside the commandList ,
the click on commandItem and search disabled remove disabled from every className it will fix the issue
thanks for the update
Chị ơi, sao chị không tạo 1 kênh discord để mọi người tiện trao đổi nhỉ? Yt hạn chế bình luận quá.
Such an amazing tutorial. Love you from Vietnam
thank you my error got resolved
What an amazing tutorial. Much love from Kenya.
It gets better and better every time. You did a great job. Thank you very much. 👍
In the products page in admin dashboard,i am not able select the collections in the product/ new page.. i am getting unhandled run time error.. how to solve this error mam..i meed your help mam, please help me mam
3:55:52
Mam, i need help
Is there redux?
Hey, just an important observation, anyone can make the account on admin dashboard, is there a way to restrict it? As only the admin/staff should be able to make account. I think clerk has the allowlist on the paid plan, ant other alternative, as it would make clerk unusable. Thanks
Great job on this, looking forward to many more like this🎉🎉, I have a question though..is clerk still working? Cuz their site seems to be down
Great tutorial, warming greetings from Kazakhstan 🇰🇿
wow amazing! woman that doin tutorial with hours are super rare!, my advice is please zoom your vscode so i can see the text clearly because usually im doing dual window side by side or overlay your video with my vscode, thank you!
i am getting an error while running (npm run dev) how can i solve it and thank u
[collectionId_GET] CastError: Cast to ObjectId failed for value "undefined" (type string) at path "_id" for model "Collection"
at SchemaObjectId.cast (C:UsersELCOTmy-appnode_modulesmongooselibschemaobjectId.js:250:11)
at SchemaType.applySetters (C:UsersELCOTmy-appnode_modulesmongooselibschemaType.js:1221:12)
at SchemaType.castForQuery (C:UsersELCOTmy-appnode_modulesmongooselibschemaType.js:1636:17)
at cast (C:UsersELCOTmy-appnode_modulesmongooselibcast.js:375:32)
at Query.cast (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:4778:12)
at Query._castConditions (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:2199:10)
at model.Query._findOne (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:2513:8)
at model.Query.exec (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:4322:80)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async GET (webpack-internal:///(rsc)/./app/api/collections/[collectionId]/route.ts:21:28)
at async C:UsersELCOTmy-appnode_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:63809
at async eU.execute (C:UsersELCOTmy-appnode_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:53964)
at async eU.handle (C:UsersELCOTmy-appnode_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:65062)
at async doRender (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1315:42)
at async cacheEntry.responseCache.get.routeKind (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1525:40)
at async DevServer.renderToResponseWithComponentsImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1445:28)
at async DevServer.renderPageComponent (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1842:24) at async DevServer.renderToResponseImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1880:32)
at async DevServer.pipeImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:893:25)
at async NextNodeServer.handleCatchallRenderRequest (C:UsersELCOTmy-appnode_modulesnextdistservernext-server.js:269:17)
at async DevServer.handleRequestImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:789:17)
at async C:UsersELCOTmy-appnode_modulesnextdistserverdevnext-dev-server.js:331:20
at async Span.traceAsyncFn (C:UsersELCOTmy-appnode_modulesnextdisttracetrace.js:151:20)
at async DevServer.handleRequest (C:UsersELCOTmy-appnode_modulesnextdistserverdevnext-dev-server.js:328:24)
at async invokeRender (C:UsersELCOTmy-appnode_modulesnextdistserverlibrouter-server.js:174:21)
at async handleRequest (C:UsersELCOTmy-appnode_modulesnextdistserverlibrouter-server.js:353:24)
at async requestHandlerImpl (C:UsersELCOTmy-appnode_modulesnextdistserverlibrouter-server.js:377:13)
at async Server.requestListener (C:UsersELCOTmy-appnode_modulesnextdistserverlibstart-server.js:140:13) {
stringValue: '"undefined"',
messageFormat: undefined,
kind: 'ObjectId',
value: 'undefined',
path: '_id',
reason: BSONError: input must be a 24 character hex string, 12 byte Uint8Array, or an integer
at new ObjectId (C:UsersELCOTmy-appnode_modulesbsonlibbson.cjs:2288:23)
at castObjectId (C:UsersELCOTmy-appnode_modulesmongooselibcastobjectid.js:25:12)
at SchemaObjectId.cast (C:UsersELCOTmy-appnode_modulesmongooselibschemaobjectId.js:248:12)
at SchemaType.applySetters (C:UsersELCOTmy-appnode_modulesmongooselibschemaType.js:1221:12)
at SchemaType.castForQuery (C:UsersELCOTmy-appnode_modulesmongooselibschemaType.js:1636:17)
at cast (C:UsersELCOTmy-appnode_modulesmongooselibcast.js:375:32)
at Query.cast (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:4778:12)
at Query._castConditions (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:2199:10)
at model.Query._findOne (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:2513:8)
at model.Query.exec (C:UsersELCOTmy-appnode_modulesmongooselibquery.js:4322:80)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async GET (webpack-internal:///(rsc)/./app/api/collections/[collectionId]/route.ts:21:28)
at async C:UsersELCOTmy-appnode_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:63809
at async eU.execute (C:UsersELCOTmy-appnode_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:53964)
at async eU.handle (C:UsersELCOTmy-appnode_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:65062)
at async doRender (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1315:42)
at async cacheEntry.responseCache.get.routeKind (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1525:40)
at async DevServer.renderToResponseWithComponentsImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1445:28)
at async DevServer.renderPageComponent (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1842:24)
at async DevServer.renderToResponseImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:1880:32)
at async DevServer.pipeImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:893:25)
at async NextNodeServer.handleCatchallRenderRequest (C:UsersELCOTmy-appnode_modulesnextdistservernext-server.js:269:17)
at async DevServer.handleRequestImpl (C:UsersELCOTmy-appnode_modulesnextdistserverbase-server.js:789:17)
at async C:UsersELCOTmy-appnode_modulesnextdistserverdevnext-dev-server.js:331:20
at async Span.traceAsyncFn (C:UsersELCOTmy-appnode_modulesnextdisttracetrace.js:151:20)
at async DevServer.handleRequest (C:UsersELCOTmy-appnode_modulesnextdistserverdevnext-dev-server.js:328:24)
at async invokeRender (C:UsersELCOTmy-appnode_modulesnextdistserverlibrouter-server.js:174:21)
at async handleRequest (C:UsersELCOTmy-appnode_modulesnextdistserverlibrouter-server.js:353:24)
at async requestHandlerImpl (C:UsersELCOTmy-appnode_modulesnextdistserverlibrouter-server.js:377:13)
at async Server.requestListener (C:UsersELCOTmy-appnode_modulesnextdistserverlibstart-server.js:140:13), valueType: 'string',
model: Model { Collection }
} how to solve this error
amazing girl! thank you so much
I developed for collections with you. I closed the vs code to take a break. When I go back to work, I can't do anything I did before. Many errors are shown in the terminal. What do I do about it?😢😢
whats the solution to the clerk key?