React - Build a Complete E-Commerce Application Step by Step

Organize React components in a components folder, export with default or named exports, import them, and create footer and navbar as separate files.

Explore two methods to style a React app: using a CSS file and inline CSS, demonstrated via a hero component with centered text and Bootstrap buttons.

Learn how JavaScript objects compare to JSON and how to use object literals with optional quoted property names. Practice reading, destructuring, and spreading to copy, update, and extend objects.

Learn to render product items dynamically from a products array of objects, building a product elements array with for loops or map, and ensure unique keys in JSX.

Build a counter component in React that reads quantity from props, uses the useState hook to manage state, and updates the UI via onClick handlers for increment and decrement.

Convert the counter to a controlled component that relies on the parent state to update quantity and total price, using increment and decrement callbacks passed via props.

Store and persist application data in the browser using local storage, with setItem, getItem, removeItem, and JSON.stringify/parse to save, read, update, and delete products across sessions.

Create a React to-do list component with a bootstrap form, including an input named task and a submit handler that reads, alerts, and resets the form.

Initialize the todos from local storage using getItem and JSON.parse, then save updates with useEffect and JSON.stringify to localStorage.setItem for each change in a React app.

Create a new react project named Best Store, clean up index.js, build an app component, and display a welcome title, then add bootstrap via cdn and run npm start.

Create and customize a navbar and footer in a React app using Bootstrap, exporting named components, updating styles, and integrating them into the home page.

Replace anchor tags with React Router Link components and update the navbar and dropdown items to use routes like /, /contact, /products, /profile, and /logout.

Set up a json-server backend to enable product CRUD while focusing on the frontend. Create db.json with products (including image paths) and run the server on port 4000.

Learn to read products from the server by building a product list component under admin/products, with create and refresh actions, a bootstrap table, and react-router links for navigation.

Learn to fetch products from a server using the fetch API, store them in state, and render a table with edit, delete, images, and created dates.

Configure a json server to support image uploads for new products using multer, implement post handling, image storage in public/images, and server-side validation for name, brand, category, price, and description.

Create a product form component in the admin panel, with fields for name, brand, category, price, description, and image, wired to /admin/products/create.

Show inline server-side validation errors in a React e-commerce app by replacing alerts with under-field messages, using a validationErrors state to display name, brand, category, price, description, and image errors.

Delete a product by wiring an onClick handler to a delete method, sending a fetch request to /products/{id} with http delete, and refreshing the product list on success.

Learn how to add pagination to the home component by defining page and limit states, updating the URL with _page and _limit, and rendering pagination buttons to navigate pages.

Learn to filter products by brand and category in a React home component using json server, by managing a filter params state and updating the url with nonempty parameters.

Learn to implement authentication and authorization with JSON web tokens, enable user registration and login, and manage profiles, passwords, and admin capabilities for products and users.

Read the user credentials from local storage by parsing JSON and returning null if missing; then persist updates with useEffect by stringifying to the credentials key.

Update the navbar to reflect authentication state and user role. Show register and login for guests, admin or client dropdowns for authenticated users, and note that users default to client.

Protect the product service with jwt-based authorization and a bearer token in the authorization header, using three digits to distinguish resource owner, authenticated users, and visitors for read and write.

Create a user profile update password form with new password and confirm password fields, validate on submit, and send a patch request to update the password on the server.

Deploy the web API on Glitch, configure the .env file with react_app_web_api_url, and update components to use process.env; test, build, and deploy the app to GitHub.