community-content
community-content copied to clipboard
strapi
[REQUEST] HOW TO SET UP AN ECOMMERCE FOR REACT
@jamesaduke are you looking to work on this tutorial or requesting our community to work on it?
Hi, @ShadaW11 I'm willing to work on this tutorial.
How to set up a complete ECommerce store in React.Js. This is a React and Node tutorial for creating a fully functional e-commerce website. Open your code editor and follow along as we develop an e-commerce website using React and Node.JS.
What the reader will take away CSS3 and HTML5: CSS Grid, Flexbox, Semantic Elements Axios Redux: Store, Reducers, Actions, React: Components, Props, Events, Hooks, Router Web API, Body Parser, File Upload, Node & Express ESLint, Babel, Git, Github, and JWT Development
Introduction It provides an overview of the guide for creating an Amazon-style eCommerce website.
Demo Create a web template for the eCommerce website in this section.
Installing the Tools To get started with web development, you'll need to download a code editor and a web browser. We'll set up the environment for coding in this section.
Products List As static HTML elements, we'll make a list of products.
Create Sidebar We'll make a hamburger menu that allows you to show and remove the sidebar. In addition, we create the product details page.
Make a React App The frontend is the focus of this section. The UI elements are built using the React library.
Product Rendering This is the e-commerce homepage. It displays a product list.
Product Specifications A page with details about that product should appear when a user clicks on a product. You will learn how to create a details page with beautiful UI/UX.
Make a Node Server This section covers Node and Express. They're a popular framework for creating a web server with the JavaScript programming language. We'll make a MongoDB database and save and retrieve the admin user's information.
Get Data from the Server We'll utilize React Hooks to get data from the server in this lecture. To achieve this in a modern async/await approach, we use the Axios library.
Redux state management tool. Nothing beats state management when it comes to managing several forms and their data. In this tutorial, we'll utilize Redux to manage complicated states and keep the app's behavior consistent.
To Details, Add Redux The state of the details page is moved to Redux in this section. We start by defining reducers, then actions, and finally connecting them to the details component.
Shopping Cart Screen The heart of any e-commerce website is the shopping cart. We use React and Redux to create a user-friendly shopping cart.
User Sign-In Before redirecting the person to the checkout, we need to register them. In this section, we'll develop forms to collect user information and save it in the database.
Product Management Admins should be able to define goods and alter stock counts at any time. This page is about ECommerce product management.
Wizard of Checkout This section implements the checkout wizard, which includes sign-in, shipping information, payment method, and order placement.
@Dmuasya sorry for late response, I took over some of Shada's duties recently and been catching up with all issue submission. Let me know if you are still interested in doing this.
@Dmuasya sorry for supper late response. Based on your outline it looks like it will mostly cover the front-end portion where Strapi is used as a basic API. For the time being, we have plenty of frontend articles that cover how to use framework x with Strapi. So at the moment, we are looking for articles that are more specific to Strapi backend customizations and use cases.
For the time being, I will be closing this issue. Let me know if you have any additional questions.