React Project – E-Commerce Application

An E-commerce website is a website that is helpful for consumers who don’t want to go outside and buy products just by clicking on “Buy Now”, and products will be delivered online through third-party platforms such as Amazon, Flipkart, etc which serves as a mediator between the seller and end user who wants to buy.

Many other platforms are there in the world that work according to geographic conditions and situations, but now the main focus of the e-commerce platform is to deliver the products in the shortest time many e-commerce platforms are moving towards fast commerce which is also the same thing but the USP is to deliver the product in the shortest time, and it’s a trending but difficult segment to conquer for the company as it is harmful to deliver partner. But for now, the main focus is on e-commerce, where we have created one platform that only does the search and shows the products, which is already defined using an array and looping it on using the “MAP” method in the react for display of the products.

About React E-Commerce Application Project

We have imported the required libraries and now defined the product in the array in the dictionary, which is not in the real world as in real API. basically, the JSON or array-like form is created using the DRF, node js, and many other technologies as per requirement. We have defined some common fruits like apples, kiwis, oranges, etc, so we will loop the product inside the array, display it on the webpage, filter the products according to the product inside the array, and connect the function with the search bar. So it will show the imputed product which we are looking for on web page.

Prerequisite For React E-Commerce Application Project:

• React
• API integration

Download React E-Commerce Application Project.

Please download the source code of React E-Commerce Application: React E-Commerce Application Project Code.

About installation steps:

Download Visual Studio

You can choose the appropriate installer for your operating system (Windows, macOS, or Linux) on the download page. Once it is installed, please follow the following steps.

For the installation of React, I have explained some of the steps as follows:

1. The first step is to download the node( as it will help to install react) from the below link:

The LTS version is recommendable:

2. Now, check the version of the node in Windows by following the command on the terminal:

node --version or node -V

Also, check the npm version using the following command as it is a tool to download the react

npm  --version

3. Now, create one folder on the desktop as react, open the terminal inside the react app, and go to the react folder using the following command as `cd react` and run the command:

npm init react-app ecommerce

4. cryptoapp is created, go inside the cryptoapp folder using the command `cd cryptoapp` and then npm starts and boom react will run the browser.

Your app react is successfully installed, let’s move towards project building.

Way to Create a React E-Commerce Application Project:

1. Imports the required libraries

import React, { useState } from 'react';
import '../App.css';

2. Data that we have to display on a web page contains the ID of the product, title the name of the product, and price and image in the JSON form.

const products = [
    { id: 1, title: 'Kiwi', price: 2.5, image: 'kiwi.jpg' },
    { id: 2, title: 'Tomato', price: 1.5, image: 'tomato.webp' },
    { id: 3, title: 'Apple', price: 3.0, image: 'apple.avif' },
    { id: 4, title: 'Banana', price: 1.0, image: 'banana.jpg' },
    { id: 5, title: 'Orange', price: 2.0, image: 'orange.jpg' },
    { id: 6, title: 'Strawberry', price: 4.0, image: 'strawberry.jpg' },
  ];

3. Now we have created an arrow function in which we have initialized the searchTerm and setSearchTerm using useState( it is helpful for initialization in the react js mainly in the function).

const Dash = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredProducts, setFilteredProducts] = useState(products);

  const handleSearch = () => {
    const updatedProducts = products.filter(product =>
      product.title.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredProducts(updatedProducts);
  };

updatedProducts is a filtered array containing products whose lowercase titles include the lowercase search term.

The state variable filteredProducts is then updated with updatedProducts.

This effectively refreshes the displayed products based on the search input in the React component

4. Previously, created handleSearch function was used in the jsx as follows in the below code:

<div className="app">
      <h1>Ecommerce app by ProjectGurukul</h1>
      <div className="search-container">
        <input
          className='search'
          type="text"
          placeholder="Search by title..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button onClick={handleSearch}>Search</button>
      </div>

On button click, the handle search function is triggered, which lowercase the characters and filters the title as it is matched with the query, then shows the only results.

5. Renders a container (div) for displaying product cards in the React component.

Maps through the filteredProducts array, generating a product card for each item with an image, title, formatted price, and a “Buy Now” button.

The product card structure includes an image sourced from /images/, the product title, price formatted to two decimal places, and a generic “Buy Now” button.

<div className="product-container">
        {filteredProducts.map(product => (
          <div key={product.id} className="product-card">
            <img src={`/images/${product.image}`} alt={product.title} />
            <h3>{product.title}</h3>
            <p>${product.price.toFixed(2)}</p>
            <button>Buy Now</button>
          </div>
        ))}
      </div>

Here is the complete which I have explained above:

Src > dashboard > ecommerce.js

import React, { useState } from 'react';
import '../App.css';

const products = [
    { id: 1, title: 'Kiwi', price: 2.5, image: 'kiwi.jpg' },
    { id: 2, title: 'Tomato', price: 1.5, image: 'tomato.webp' },
    { id: 3, title: 'Apple', price: 3.0, image: 'apple.avif' },
    { id: 4, title: 'Banana', price: 1.0, image: 'banana.jpg' },
    { id: 5, title: 'Orange', price: 2.0, image: 'orange.jpg' },
    { id: 6, title: 'Strawberry', price: 4.0, image: 'strawberry.jpg' },
  ];
  

const Dash = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredProducts, setFilteredProducts] = useState(products);

  const handleSearch = () => {
    const updatedProducts = products.filter(product =>
      product.title.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredProducts(updatedProducts);
  };

  return (
    <div className="app">
      <h1>Ecommerce app by ProjectGurukul</h1>
      <div className="search-container">
        <input
          className='search'
          type="text"
          placeholder="Search by title..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button onClick={handleSearch}>Search</button>
      </div>

      <div className="product-container">
        {filteredProducts.map(product => (
          <div key={product.id} className="product-card">
            <img src={`/images/${product.image}`} alt={product.title} />
            <h3>{product.title}</h3>
            <p>${product.price.toFixed(2)}</p>
            <button>Buy Now</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Dash;

Src > App.css

.app {
  text-align: center;
  margin: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.product-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.product-row {
  display: flex;
  margin-bottom: 20px;
}

.product-card {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
  text-align: center;
  width: 30%;
}

.product-card img {
  max-width: 100%;
  height: auto;
}

.product-card h3 {
  margin: 10px 0;
}

.product-card button {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.product-card button:hover {
  background-color: #45a049;
}

React E-Commerce Application Output

E-commerce Dashboard

Search query orange

Conclusion

This part of the code creates a space on a webpage to show different products. It goes through a list of products, showing each with an image, name, price, and a button to buy. The displayed products are filtered based on a user’s search, making it easy to find and view specific items. We have created some dummy data which is helpful for displaying the page. The product container visually organizes the information, making it neat and user-friendly. Each product is represented by a card, presenting key details for quick understanding. The search functionality enhances the experience by dynamically updating the displayed items. Users can easily explore, find, and potentially purchase products through this interactive and responsive design.