Best way to implement a cart?
I've implemented a cart using jotai's atomWithStorage to save the items in lcoalStorage, but I was wondering if I should store the cart in the server instead?
In this specific app only logged in users can access the store. Are there other better ways of implementing a cart?
25 Replies
Server side is probably the better way plus you can have the user save their carts across devices and also it'll let you solve a super super common race condition in ecommerce where you sell more items than you have quantity for
If this is a project for fun you'd get a lot of clout for talking about this during an interview
Just moving to serverside isnt enough to solve the problem but its a start, i just wasn't spoiling it since its kinda fun to discover on your own
It's actually a real project 😆
I've implemented carts before but on a different framework
but I guess the requirement that only logged in users can add to cart really helps me here
Oh yeah then i'd definitely do serverside and to spill the beans you'd want some kind of way of knowing if you should proceed with the transaction or not
Something like locks in a database, using redis etc
Some ways people solve it is to hold stock for x minutes
yeah that's interesting
this specific app doesn't really care about stock so I guess I should just create a Cart model and associate it with the user
Cart in local storage works and if that meets your needs its fine. The sharing carts across device is a fluff thing but its kinda cute
there is actually an argument I don't know how to counter, which is that developers tell me - "just fetch the items on initial render and store them in a global store"
and same here - one can tell me "why send a request on each 'add to cart'"?
React Conferences by GitNation
YouTube
React Query: It’s Time to Break up with your "Global State”! –Tanne...
Find the latest React.js talks & workshops at https://portal.gitnation.org
🗓 Talk recording from React Summit Remote Edition 2020
Website - https://remote.reactsummit.com/
See other React conferences by GitNation
React Summit – https://reactsummit.com
React Advanced London – https://reactadvanced.com
React Day Berlin – https://reactday.be...
In my opinion it's a bad idea to hold items in a global store but dunno how to make the case that sending requests on each page load or 'add to cart' click isn't that bad
This is a really goooooooood talk and if you aren't familiar with it tanner is one of the people behind react-query
yeah am familiar with this wizard
ill watch it now thank you
Its just really about trade offs and how accurate you want to be
Using react query makes it a non issue honestly since the api makes it easy to refetch/render and you'll also have the most recent fetch. Networking is also cheap now so I just think they are being stingy
yeah that's a good point
thanks for the help I really appreciate it 🙂
np np gl!!
@CFKeef Oh btw one last question 😆 - say I have a Product model with all the relevant info, and I also have a Cart model now that I go with serverside Cart, I probably have to add a third CartProduct model that has a relation to a Product and a quantity property right?
we're talking Prisma sql
It'd be a 1 to many from product -> cart so you can just do something like this and you don't need to write a bridge table