Build Ecommerce site from scratch using React,Node&Bootstrap

Install node and Visual Studio Code to prepare your development environment for the ecommerce project. Confirm node installation with node -v, launch Visual Studio Code, and set up project folder.

Create a new react project named my e-commerce, install dependencies, and start the development server to boot a boilerplate, then remove the default logo and unused assets.

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.

Download the free font awesome library, extract the zip, and copy its fonts into your react project, then link the css and js assets in your jsx.

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.

Learn how JSX works in React, including proper closing of tags, using className instead of class, camelCase attributes, and inline styling with double curly braces.

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.

Learn how function-based components in React return JSX, contrast with class components, and enable building a scalable e-commerce app.

Learn how to build a reusable ecommerce UI by converting a functional component to a class-based component in React, using the render method and exporting the default class.

Organize your React project by creating a components folder and structuring header, body, and footer components. Import, compose, and export these components with consistent names to keep the code clear.

Discover how Bootstrap serves as a CSS framework with predefined classes, containers, rows, and columns, plus margin and padding utilities, to speed up building responsive ecommerce interfaces.

explore bootstrap margin and padding in react by using m- and p- classes for top, bottom, left, right, and x or y axes, with sizes 0–5, plus list-inline and list-unstyled.

Develop a responsive React navbar using Bootstrap concepts learned, including logo, menu items, and a sign-in form, and convert an existing navbar for our ecommerce site.

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.

Continue building the ecommerce navbar in React by creating three equal columns, making links clickable, and adding Font Awesome icons with Bootstrap styling for cart and wishlist indicators.

Create a responsive navbar with dropdowns in React using Bootstrap, including a login/signup form inside the dropdown, and implement mobile collapse to keep the ecommerce interface clean.

Learn to implement React Router in a React app using functional components, with BrowserRouter, routes for home, about, and contact, and navigation via links without page refresh.

Explore converting components to class-based components and wire routing with react router, including browser router, switch, and link components to create home, about, and contact pages for an ecommerce site.

Restructure the react project to fit the ecommerce app, reorganize folders and components, remove unused pages like about and contact, and rename components in preparation for the footer sidebar.

Create a responsive ecommerce site footer using React links, covering routing, grid layout, social icons, and fixed bottom styling with white text and centered alignment.

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

Understand how the parent component uses a child (shared) component, with import and export to connect them, and see how a navigation bar is included on the home page.

Build the homepage first section by implementing a Bootstrap carousel inside a responsive grid, converting Bootstrap markup to React JSX, and wiring three asset images into a styled card carousel.

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.

Develop a reusable sidebar component for all category pages, convert copy cards to JSX, add a carousel image, and organize home assets for the homepage.

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.

Create a node server from scratch by setting up the project directory, initializing npm, installing express, and building a basic hello world route on port 4000.

Install and configure axios and cors to enable data fetching from a Node server into a React client, overcoming cross-origin restrictions and linking the server to the React project.

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.

Discover how to use React props to pass data from a shared component to its parent, create reusable card components, and customize content like name, color, and image.

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.

Learn how to fetch data from a Node server using a class-based approach, wiring a reusable API service to a React app and preventing repetition in component data calls.

Explore how the React app context solves prop drilling by using a context provider to share data across multiple components and automatically update consumers.

Populate the homepage section three with actual products by creating product data on the Node server, wiring it to React components, and rendering mapped product cards with images and details.

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.

Create the cart and cartItem components in a React ecommerce site, populate product data from local storage, map to cards, and pass quantity and price as props.

Create and wire remove from cart and clear cart functions in a React ecommerce app, using context to update state and local storage, while calculating the total price.