1. You should update the database every time the user clicks on the add button, and update the cart at the database.
2. You can use different user authentication methods like using the google sign-in method or you can create a custom user authentication using JWT(JSON Web Token).
3. Having user cart info at local storage until the user places the order wouldn't be a good idea, cart info is critical user data, and you can't update the user cart to all the other devices where the user has logged in, and the cart data will also get vanished once user deletes the browser data, which could be a signification loss to the business.
4. Instead of redux you can use react reducer with react context.

Very interesting question, I will answer only one part of it, otherwise it will get too long to read :)

Whether you need to make an API call to persist the cart server-side or just do it only once the order has been placed is a question regarding the business logic of your app itself.

Ask a question, "Do I want my users to be able to add items to the cart and watch/update/edit its' content even if they log in from a different machine/browser?"

If the answer is yes then for sure you have to synchronize your cart with the server so it can be consistent always. For this purpose I would suggest having sort of a queue, which will have the last version of the locally modified cart, once the user did no action for 2000ms to your cart, you can safely make an API call and persist the information of the cart in your DB.

This will reduce the load to your server, because people can increment the number of items you have in the cart by clicking 20 times on the add button, in this case, instead of sending 20 requests to the server one at a time, it simply delays the process of persistent the cart, until the user stops interacting with your app for some X amount of milliseconds.

to begin with, I want to say I really liked your CSS :).

You don't have to use a database or redux for making a cart system, but as you can guess they have good opportunities.

DATABASE ADVANTAGES:

1. You can show the user's cart on all his devices.
2. User's cart will be always here as long as he did not delete it.
3. You can reach the data on all components. (hard)
4. It's very good practice for learning.

DATABASE DISADVANTAGES:

1. You need an API so, it's hard to set up.
2. Your code will be more complicated than other choices.

REDUX ADVANTAGES

1. It's kinda easy to set up. You don't need a new project.
2. You can reach the data on all components. (medium)

REDUX DISADVANTAGES

1. Actually I really don't know any disadvantages of redux :) (pls tell me if you know)

LOCALSTORAGE ADVANTAGES

1. Very easy
2. You can reach the data on all components. (easy)

LOCALSTORAGE DISADVANTAGES

1. You can't show a user's cart on another device

I didn't separate session storage because it's the same as local storage. The only difference is session storage is per-tab.

In my opinion, you should use a database. I know it's a basic app but you can learn a lot of things by doing it this way.

And these are my recommendations:

1. cookies vs local vs session storage

2. ECommerce site with backend