Design a Product List Page Template using React and Tailwind

A Product List Page is very useful in e-commerce websites as it helps the company to showcase their products to the user. This helps user to get information about the products available and make a selection. User can browse a wide variety of products and purchase the product they find useful.

Let us have a look at how the final page will look like:

Basic Feature of Product List Page:

• List: It is an interactive list using which users can see all the available products
• Image: An image which displays the user how the product will look like
• Features: A section which shows the features of the product
• Price Tag: Users can see the amount they have to pay for the product and discount they are getting
• Button: An interactive button using which the user make purchase or add product to their cart

Advantages of Product List Page:

• Provides a platform to showcase the products
• Users are provided with a wide variety of options to choose from
• Increases the sales of the company
• An organised and Interactive UI makes the business grow faster

Prerequisites:

• React
• Tailwind
• props in React

Step to create the page

Step 1: Set up the project using the command

 npx create-react-app <<Project_Name>>

Step 2: Navigate to the folder using the command

cd <<Project_Name>>

Step 3: Install the required dependencies using the command

npm install -D tailwindcss

Step 4: Create the tailwind config file using the command

npx tailwindcss init

Step 5: Rewrite the tailwind.config.js file as folllows

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 6: Import the fontawesome icons in the project by typing following code in index.html file in public folder

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

Step 7: Create a folder called components in src directory and create files Data.js, Product.js, Welcome.js inside it.

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }
"devDependencies": {
    "tailwindcss": "^3.3.3"
  }

Example: Write the following code in respective files:

• App.js: This file imports all the components and passed data as props
• Data.js: This file contains data to be rendered
• Product.js: This file render product data on the browser
• Welcome.js: This component acts as welcome slide
• index.css: Tailwind CSS is imported using this file
• index.html: Fontawesome is imported in this file

Javascript

// App.js

import './App.css';
import Product from './components/Product';
import Welcome from './components/Welcome';
import Data from './components/Data';
function App() {
    const data = Data
    return (
        <div className="App">
            <Welcome />
            {data.map((e) => {
                return <Product data={e} />
            })}
        </div>
    );
}

export default App;

Javascript

// Welcome.js

export default function Welcome() {
    return (
        <div className="h-36 w-full border-2
                        h-screen flex flex-col items-center
                        justify-center bg-emerald-500 text-white">
            <p className="text-2xl mb-4 block">
                Welcome to GeeksforGeeks Shopping Page!!!
            </p>
            <p className="text-lg">
                Select from a wide variety of GFG Goodies!!!
            </p>
        </div>
    )
}

Javascript

// Product.js

export default function Product(props) {
    return (
        <div className="w-2/3 h-48 p-2 bg-white-200
                        border-2 border-slate-200
                        rounded-lg flex flex-row
                        mx-auto mt-6" >
            <div className="w-3/12 h-full">
                <img className="pl-4 pt-2 w-72 h-32"
                    src={props.data.image} />
            </div>
            <div className="w-6/12 h-full p-2 ">
                <h3 className="pl-4 pt-2 text-2xl">{props.data.title}</h3>
                <div className="px-4">
                    {console.log(props.data.stars)}
                    {props.data.stars.map((e) => {
                        return (<i className="fa fa-star"
                                   style={{ color: "green" }}></i>)
                    })}
                    <span className="p-2">{props.data.reviewsCount}</span>
                </div>
                <div className="px-4">
                    {props.data.specs.map((e) => {
                        return (<span>{e} •</span>)
                    })}
                </div>
                <div className="px-4">
                    {props.data.features.map((e) => {
                        return (<span>{e} •</span>)
                    })}
                </div>
            </div>
            <div className="w-3/12 h-full border-l-4 p-2">
                <div className="flex flex-row items-center ">
                    <h4 className="text-lg"><span>&#8377;</span>
                        {props.data.newPrice}
                    </h4>
                    <span className="text-rose-400">
                        <s><span>&#8377;</span>
                            {props.data.oldPrice}
                        </s>
                    </span>
                </div>
                <h6 className="text-success">Free shipping</h6>
                <div className="flex flex-col mt-4">
                    <button className="text-white bg-blue-700
                                       hover:bg-blue-800 focus:outline-none
                                       focus:ring-4 focus:ring-blue-300
                                       font-medium rounded-full
                                       text-sm px-5 py-2.5
                                       text-center mr-2 mb-2"
                            type="button">
                                Buy Now
                    </button>
                    <button className="text-black border-2 border-sky-600
                                       focus:outline-none focus:ring-4
                                       focus:ring-blue-300 font-medium
                                       rounded-full text-sm px-5 py-2.5
                                       text-center mr-2 mb-2 "
                            type="button">
                        Add to wishlist
                    </button>
                </div>
            </div>
        </div>
    )
}

Javascript

// Data.js

const Data = [
    {
        title: "GFG TShirt",
        image:
"https://media.geeksforgeeks.org/wp-content/uploads/20230823165506/gfg1.png",
        specs: ["100% Cotton", "Light Weight", "Best Finish"],
        features: ["Unique Design", "For Men", "Casual" ],
        newPrice: 800,
        oldPrice: 1000,
        stars: new Array(4).fill(1),
        reviewsCount: 289,
    },
    {
        title: "GFG Hoodie",
        image:
"https://media.geeksforgeeks.org/wp-content/uploads/20230823165553/gfg2.jpg",
        specs: ["Durable", "Light Weight", "Best Finish"],
        features: ["Comfortable Straps", "Water Bottle pocket", "Weather Proof"],
        newPrice: 599,
        oldPrice: 999,
        stars: new Array(5).fill(1),
        reviewsCount: 467,
    },
    {
        title: "GFG Hoodie",
        image:
"https://media.geeksforgeeks.org/wp-content/uploads/20230823165623/gfg3.jpg",
        specs: ["Sweat Fabric", "Attached Hood", "Kangaroo Pocket"],
        features: ["Elastic Cuffs", "Light Weight", "Unisex" ],
        newPrice: 1299,
        oldPrice: 1999,
        stars: new Array(5).fill(1),
        reviewsCount: 467,
    },
]

export default Data;

CSS

/* index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
          'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
          'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css"
          integrity=
"sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm"
          crossorigin="anonymous">
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

Steps to run the application:

Step 1: Type the following command in terminal

npm run start

Step 2: Open your web browser and type the following URL

http://localhost:3000/

Output: