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.

Create and render React components using function or class syntax, returning JSX elements, experimenting with open/close tags and self-closing tags, and noting the preference for function components.

Learn to include bootstrap css and javascript from a content delivery network in a React app by updating public/index.html and placing css in head and the script before body end.

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.

Master JavaScript arrays and objects for React front-end development, using destructuring, spread operator, for loops, and map; delete elements with splice and filter.

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.

Explore passing parameters to React components with props, including attribute props and content props (children), and see container, product list, and product item examples.

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.

Compare uncontrolled and controlled forms in React, learn to create a form with onSubmit, preventDefault, and read or set data, including initial values via defaultValue and an add product callback.

Create a controlled add product form two in react, binding state for name, brand, category, unit price, and quantity, preventing default submit, and sending the new product to the parent.

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 build a dynamic to-do list in React by creating and rendering tasks, managing state with useState, mapping todos, and updating task completion and deletion.

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.

Build a weather app with React and Bootstrap, accept city input, fetch current data from OpenWeatherMap, and display temperature, humidity, wind speed, and an icon.

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.

Install react-router-dom and wrap the app in BrowserRouter to enable navigation. Define routes for home, contact, and a not-found page to handle undefined paths.

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

Master full CRUD on products, including creating, reading, updating, and deleting with images and validation, plus pagination, search, and sorting by brand, id, and price.

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.

Read and submit form data using an onSubmit handler, validate required fields, post with fetch and async/await, handle server responses, and navigate to /admin/products on success.

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.

Fetch a product by id, render its details in a form, and update it with a patch request using the product id.

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 to implement pagination in a React e-commerce app by using page and limit, showing five products per page, reading x-total-count to compute total pages, and rendering bootstrap pagination buttons.

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.

Sort products by id, name, brand, category, price, and created at by clicking headers, toggling ascending and descending orders. Use _sort and _order in requests.

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.

Update the home component to fetch and render products from the json server. Implement a hero section with a bootstrap layout and hero.png image, plus brand, category, and sort filters.

Create a home component that displays products using a reusable product item. Fetch data from a json server, render product image, name, truncated description, price, and a details link.

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.

Create a product details component and route, and build a two-column bootstrap layout displaying image, name, price, add to cart, brand, category, and description.

Read the product id from the url with use params hook, fetch the product details via async request, and render its image, name, price, brand, category, and description on load.

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.

Update the nav bar to include register and login buttons, create new auth routes and components, and wire routes for /auth/register and /auth/login.

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.

Create a login component with a centered bootstrap form including email and password fields, validates inputs, and posts to the JSON server auth login endpoint; navigate to 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 routes by checking user authentication states and admin roles, using a parent authorization component to guard admin root and authenticated user root routes.

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.

Learn how to send a Json web token with bearer authorization to create and update products in a React e-commerce app, handle patch requests, and manage token expiry by re-authenticating.

Learn how to send a json web token with delete requests by updating the product list component, reading the token from app context, and handling unauthorized responses.

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 reusable user profile component in a React e-commerce app to render first name, last name, email, phone, address, and role from app context and local storage.

Learn to build a user profile update form in a React e-commerce app: populate fields from app context, validate input, and submit a patch request to update the profile.

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.

Add pagination to the user list by tracking current page and page size using json-server _page and _limit, computing total pages from x-total-count, and rendering responsive pagination controls.

Create an admin user details component, wire a details route with a user id param, and display id, first name, last name, email, phone, address, and role badges.

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 a React app on GitHub pages, configure the home page in package.json, adjust public URL references, and switch to hash router to enable proper routing on GitHub pages.

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.