Which approach should I use to make a frontend react e-commerce website?

would like to do an e-commerce website from scratch for my portfolio using react. But before I start, I would like to get some opinions from more experienced ones (you ;-)).

I know, that there are some tutorials on yt on this subject, but they all are using their own databases to show the products. I wonder, if I could use a free API for this? Our should I build my own database? Like, from where should I get the price?

An e-commerce page looks very similar to a recipe page. Would this be a good alternative?

I was using for all of my project create-react-app, but noticed, that Next.js is a good choice. I am a beginner to react. Should I stick to c-r-a or should I get to know Next.js?

I have already done a project (a bigger one) with react-redux and would like to use this time useReducer with useContext. Is there anything speaking against this way?

That’s it for now. Maybe it ain’t much, but for me or will be very helpful, to decide on, how I should move on.

Thanks in advance for all the answers!

It would probably be time well spent, but it’s a very large subject. The front end is “just” a way to interact with some [often DB-backed] application running on a server, and tbh most of the work needed in any situation is generally to do with that application. Your aim is to produce a front end here. So I would say use something like:

Or there’s the hosted version here:

They’ll give you a fake backend that will work effectively the same as a REST API. Program against that.

CRA is just a way of scaffolding a React app, and it’s purely frontend (it’s all JS code that is downloaded and runs in the browser). Next.js is a framework, it renders on a server and the way you program against it is slightly different. Both are fine, but Next is often used to build static web sites. It works fine for dynamic sites and applications though. I would tentatively say use CRA for this: it’s easier to build web applications with it.

Yeah, it’s fine. The way you normally use the context API is that you write lots of providers each holding a small bit of state, whereas with Redux there’s only one that contains all the state. If you have lots of complex state you want in one place, then you’re likely to just end up writing a version of Redux anyway, so might as well use Redux (and redux-toolkit is very good, there’s now far far less boilerplate to write). If you have state that you can easily split into smaller parts (or you don’t have a lot of state), then context works fine. You can also use the two together, there’s no issue with that.

2 Likes