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

Learn to create a react application by verifying node installation and the LTS version, bootstrapping with npx, then open in VS Code and run npm start.

Convert HTML to JSX by creating a navbar component from Bootstrap, swap class to className, and ensure self-closing tags. Then add a footer and render in the app with styling.

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

Demonstrate using named exports instead of default exports, create a layout.js to host the navbar and footer, and import them by name.

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.

Delete a product item from a React list by managing state, copying the products array, splicing out the selected index, and updating the UI with a parent-provided delete function.

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.

Use the useEffect hook in function components to run code once or when dependencies update, reading local storage, initializing the products array with setProducts, and logging the date for debugging.

Learn how to share state across multiple React components using the useContext hook, create a context provider, and access shared data like quantity in counter, cart, and navbar.

Create a to-do list using react and bootstrap, add and delete tasks, toggle completion, persist data in local storage, and set up a react app with create react app.

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.

Learn to update and delete tasks in a React todo app by toggling completion with an icon via on click handlers, using an index, copying state, and updating local storage.

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.

Build an edit product component to update product details via /admin/product/edit/:id, using useParams for the id and a patch request. Display the current image, id, and created at date.

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.

Add search functionality to the product list using a json server with a q parameter, an input field, and a submit button, updating state and pagination.

Add a sort arrow component beside sortable columns, using bootstrap icons to display an up or down arrow based on the current order by value.

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.

Implement product sorting in the home component by newest first or price ascending/descending, update url parameters _sort and _order, and reset to the first page when applying filters.

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.

Set up a jwt-based authentication server for a react e-commerce app using the json-server-auth extension, configure a users collection, integrate the auth middleware, and verify access to products.

Create a register component with a Bootstrap form for first name, last name, email, password, and confirm password; validate fields, post to json server auth /register, navigate home on success.

Store user credentials in app memory after login or registration; use a context to share them, redirect authenticated users away from login and register pages, and persist in local storage.

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.

Log out the user by deleting credentials from memory and local storage, then redirect to the home page. Use setUserCredentials(null) to clear the user state.

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 page in React by adding a new component, exporting it, and wrapping it in an authentication guard to render at /profile for authenticated users only.

Explore building a React user profile skeleton with three sections—update profile and update password—using Bootstrap grid, conditional rendering, and onClick state management to switch views.

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.

Create an admin-only UserList component in a React e-commerce app, render a users table with id, name, email, and role badges, and provide a details link per user.

Fetches the user list from the server with an async Getusers function, using the app context token in the authorization header, and redirects on unauthorized access.

Read user details from the server by creating an async getUserDetails function, fetch localhost:4000/user/{id} with a bearer token, and handle unauthorized redirects and errors.

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.