Build Ecommerce site from scratch using React,Node&Bootstrap

Clean and prepare the React boilerplate for an ecommerce app by removing unused source and public assets, resolving loader errors, and getting the app to display in the browser.

Download bootstrap from getbootstrap.com, extract the zip, place files in the public folder, and link the bootstrap css and javascript to your React project's index.html.

Download jQuery and link it to your React project alongside Bootstrap, placing the jQuery file in the public folder and creating a script reference to the production entry point 1.2.4.1.

Verify that linked resources in the React project load correctly by running the app in the browser, inspecting the page source, and fixing broken links until changes auto-reload.

Explore React components, functional and class types, JSX basics, and state and props for reusable UI blocks.

Explore the general overview and flow of React by examining project structure (public, src, service worker), importing React, and rendering to the browser DOM with JSX.

Create the first reusable React components by building header, body, and footer as class-based components, exporting and importing them, and rendering through the index to compose the page.

Create a responsive ecommerce navbar in React using Bootstrap, linking a logo from the components folder and importing an external CSS file, with a container, row, and grid layout.

Build a four-section ecommerce homepage with React components, highlighting categories, untrusted quality, easy returns, and essential and popular products.

build a reusable React sidebar for your ecommerce homepage, featuring categorized links with icons and flex layout for sections like fashion, household appliances, phones and tablets, computers, and consumer electronics.

Create the second homepage section as a bootstrap grid of three equal columns, each with a picture icon and caption, centered with margins and padding for clean spacing.

Learn how to manage state and props in React with a class-based component, using constructor and super to initialize this.state and handle arrays and objects.

Learn to render an array of animals in React by mapping each object with the map method, showing id, name, gender, and color.

Learn to fetch data from a node server using the functional approach, binding server data to state and rendering animals by mapping the received items.

Create the add to cart function in React by using app context to share cart operations, store items in local storage, and update the cart view across home and cards.