Creating a Full E-Commerce Website with React JS | React JS Ecommerce Project 2024

In this tutorial, we will guide you through the process of creating a complete E-commerce website using React JS. We will cover all the steps from setting up the project to adding features like product listing, cart functionality, and user authentication. By the end of this tutorial, you will have a fully functional E-commerce website built with React JS.

Step 1: Setting up the project

1. First, make sure you have node and npm installed on your system. You can download them from the official website if you don’t have them already.
2. Create a new directory for your project and navigate to it in the terminal.
3. Run the following command to create a new React project using create-react-app:

   npx create-react-app ecommerce-website

4. Once the project is created, navigate to the project directory using:

   cd ecommerce-website

5. Start the development server by running:

   npm start

6. You should see the default React app running on http://localhost:3000 in your browser.

Step 2: Installing additional dependencies

1. We need to install additional dependencies for our E-commerce website. Run the following commands in the terminal:

   npm install react-router-dom axios

2. React Router is used for routing in React applications, while Axios is used for making API requests.

Step 3: Creating components

1. Create a new folder named components inside the src directory.
2. Inside the components folder, create the following components: Header.js, ProductList.js, Product.js, Cart.js, and Checkout.js.

Step 4: Designing the layout

1. Design the layout of your E-commerce website using CSS or a CSS framework like Bootstrap.
2. You can create a header component in the Header.js file with navigation links to the product list, cart, and checkout pages.

Step 5: Fetching product data

1. Create a new folder named services inside the src directory.
2. Inside the services folder, create a new file named api.js.
3. In the api.js file, write a function to fetch product data from a fake API like JSONPlaceholder using Axios.

   
   import axios from 'axios';

const BASE_URL = ‘https://jsonplaceholder.typicode.com‘;

export const getProducts = async () => {
try {
const response = await axios.get(${BASE_URL}/products);
return response.data;
} catch (error) {
console.error(‘Error fetching products:’, error);
}
};

Step 6: Displaying product list
1. In the `ProductList.js` component, import the `getProducts` function from the `api.js` file.
2. Call the `getProducts` function in the `useEffect` hook to fetch product data when the component is mounted.
3. Display the list of products using the `map` function and render each product using the `Product.js` component.
4. Design the product card layout in the `Product.js` component.

Step 7: Implementing cart functionality
1. Create a context for managing the cart state. Create a new file named `CartContext.js` inside the `src` directory.
```javascript
import { createContext, useState } from 'react';

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cart, setCart] = useState([]);

  const addProductToCart = (product) => {
    setCart([...cart, product]);
  };

  const removeProductFromCart = (productId) => {
    setCart(cart.filter((product) => product.id !== productId));
  };

  return (
    <CartContext.Provider value={{ cart, addProductToCart, removeProductFromCart }}>
      {children}
    </CartContext.Provider>
  );
};

1. Wrap the root component of your application with the CartProvider component in the index.js file.
2. Use the CartContext in the Product.js component to add products to the cart when the user clicks on the "Add to cart" button.
3. Display the items in the cart and implement the functionality to remove items from the cart in the Cart.js component.
4. You can update the cart total and display a checkout button in the Cart.js component.

Step 8: Implementing user authentication

1. For user authentication, you can use a service like Firebase Authentication or implement your own authentication system.
2. Create a new file named AuthService.js inside the services folder.
3. Write functions for user sign-up, sign-in, sign-out, and get current user using Firebase Authentication or a custom authentication system.
4. Implement user authentication in your application by creating login and sign-up forms and managing the user state.

Step 9: Finalizing the checkout process

1. Design the checkout form in the Checkout.js component.
2. Implement the functionality to submit the checkout form and place an order.
3. Save the order details in a database or mock data.

Congratulations! You have successfully created a complete E-commerce website using React JS. Feel free to add more features like product search, filters, and payment integration to enhance the user experience. Good luck with your React JS E-commerce project in 2024!