Build & Deploy an Online Store with Next.js, Typescript, Redux, Sanity.io, Auth.js, MongoDB & Stripe
Building an online store can be a complex task, but with the right tools and technologies, it can be a streamlined and efficient process. In this article, we will discuss how to build and deploy an online store using Next.js, Typescript, Redux, Sanity.io, Auth.js, MongoDB, and Stripe.
Next.js
Next.js is a popular React framework that allows for server-side rendering, static site generation, and seamless client-side navigation. It is a great choice for building dynamic and performant web applications, including online stores.
Typescript
Typescript is a superset of JavaScript that adds static typing to the language. Using Typescript can help catch errors early in the development process and improve the overall code quality of your online store.
Redux
Redux is a predictable state container for JavaScript apps. It can be used to manage the state of your online store, including the user’s cart, product inventory, and more.
Sanity.io
Sanity.io is a headless CMS that can be used to manage the content of your online store. It provides a flexible and customizable way to manage and deliver content to your web application.
Auth.js
Auth.js is a modern authentication library that can be used to handle user authentication and authorization in your online store. It provides a secure and easy-to-use way to manage user accounts and permissions.
MongoDB
MongoDB is a popular NoSQL database that can be used to store and manage the data for your online store. It provides a scalable and flexible solution for storing product information, user accounts, and more.
Stripe
Stripe is a payment processing platform that can be used to handle payments in your online store. It provides a secure and seamless way to accept credit card payments, manage subscriptions, and more.
Conclusion
By using Next.js, Typescript, Redux, Sanity.io, Auth.js, MongoDB, and Stripe, you can build and deploy a feature-rich and scalable online store. These technologies provide a solid foundation for creating a successful e-commerce platform that can meet the needs of your business and customers.
Nice job overall on the project. I have been having problem connecting to stripe following the code to the lettter. 'line_items' and 'calculatedItemPrices' errors out. Thus I believe throw a 500 error everytime. Any ideals or thoughts on that? Thanks
u got a subscriber pls more on typescript projects thanks
so as i go through this, there are two major issues:
1.) items do not render on the front end as soon as they are updated in the Sanity Schema. They are not being revalidated. So after searching forever, i finally found a solution to fix this. You have to paste the following code on every page that pulls data from sanity:
export const revalidate = 60 ; (code revalidates every 60 seconds)
without this, the code wont update as you make changes to sanity. You should have told us that.Could have save me alot of time.
2.) you gave us the option to upload images from our own cpu with drag and drop, or file upload via the games schema. So why am i seeing broken links where those images are supposed to be when using a file from my machine? It looks like the only images that can be rendered are the ones from a URL. Which, in the real world, would be a hassle for your client since you cant expect them to have the image they want to use uploaded from some other website, like unsplash. They should be able to upload an image from their machine and have it rendered no problem.
Everything else is fine. Please address these issues.
Nice video dear I am learning very new things ,as I follow your project I got some error in stripe route.ts (7:00:00) at sanity client.fetch({query}) plz help me
ive been trying to fecth images from sanity for a while now but it doesnt seem to work can anyone help out
so many people start tutorials for so many hours but don't even spend 1 hour on dribble to find a design idea first, so that the product doesn't look like it was coded at the era of Windows XP , sad
Nice video Lari, i love the way you explained everything, i noticed you are still using old method of installing sanity, you can integrate your sanity inside your project now, for example instead of opening two brower tabs for localhost: 3000 and localhost:3333, you can actually integrate sanity inside next and you have one web address like localhost:3000/studio for sanity and localhost:3000 for your front end
I know html, css, react, mongodb and familiar with mongodb, express js, and node. Can I do it?
This is an awesome video, thanks for putting this together. If I wanted to add a review feature to a product page, how would I do that? For example, they could rate the item from 1 star to 5 stars and leave a comment, and then we can display those comments on the product page. How do you do this?
to avoid the alert from Sanity of the "missing _key" add another "_key" when create an order
create: {
_type: 'order',
items: games.map((game, idx) => ({
_key: `productId-${game._id}`, // first
game: {
_key: idx, // second
_type: 'reference',
_ref: game._id,
},
quantity: game.quantity,
})),
userEmail,
orderStatus: 'pending',
},
very good content, please keep these videos coming
❤ good project
But please deploy on server
Frontend and backend
Separate files
If I used the file picker? in the sanity studio? That's where we both plugged in our URL to these images. All of the other images we referenced with the array index [0] work fine except this one – i'll try to delete the .next folder and see if this works otherwise, and Will respond tomorrow. I hope to report good news, or hear back from you as responsive as you were this go round – these cms's are complicated for me in general, but need the practice, and I spend hours watching these tutorials then run into some problem that slows me down considerably. I appreciate you otherwise.
for the life of me I can't figure out why I am getting this error – Unhandled Runtime Error
Error: Cannot read properties of undefined (reading '0')
Source
src/app/page.tsx (33:29) @ eval
31 | key={game._id}
32 | gameName={game.name}
> 33 | imageUrl={game.images[0].url}
| ^
34 | slug={game.slug.current}
35 | price={game.price}
36 | />
Call Stack
map
src/app/page.tsx (29:22)
Show collapsed frames
this occurred from like 1 hour and 30 minutes to 3 hours and 30 ninutes in – can't figure it out for the life of me
Also deploy the project on vercel Please
Perfect video!
Completed the entire video thanks a lot
dear sir, i see this video… this is too much difficult ….please make easy way and simply
Pls add more timestamps also sir
You're too much! Subscribed!