DEV Community

Frontend Bytes
Frontend Bytes

Posted on

Create an online shop using React - part 1

You can create an online shop using React. In this example we don't have a backend from where we load the data, but we have a JavaScript file with some hardcoded products.

The YouTube link where I created the project is: https://youtu.be/wEvW5wlHjEA

Here we have some products that will be used in our application:

let productList = [
    {
        "id":"2e36e6a6-21f5-46af-a16f-9b9d57fc9dcf",
        "name":"Handcrafted Fresh Towels",
        "price":"$223.00",
        "shortDescription":"Officiis ab optio consequuntur quidem et excepturi debitis.",
        "description":"Dolorem omnis qui omnis. Dolores occaecati autem aliquam nihil in non repellendus. Asperiores vel qui voluptatem qui aliquid. Vel sunt eos porro qui sed aliquam autem amet. Ea iure fugit animi est qui neque.",
        "image":"https://picsum.photos/id/1/500/500/",
        "category":"Music"
    },
    {
        "id":"30f4b1e9-4db7-4e01-8f95-f12d023e24df",
        "name":"Incredible Rubber Mouse",
        "price":"$125.00",
        "shortDescription":"Quia facere odit voluptate.",
        "description":"Necessitatibus minus repellendus quo aut voluptatem et. Et earum non sequi sed aut nulla. Sit velit ratione totam nemo qui ipsam delectus aut aut. Expedita voluptas aut dolores est fuga.",
        "image":"https://picsum.photos/id/10/500/500/",
        "category":"Garden"
    },
    {
        "id":"25164bd3-552c-402f-9b56-94306726e812",
        "name":"Handcrafted Frozen Chair",
        "price":"$133.00",
        "shortDescription":"Ex magni rerum voluptas.",
        "description":"Aliquid animi et iste eos aperiam necessitatibus est. Eum consectetur velit veritatis sequi praesentium voluptatem eum. Vel est sapiente quae. Non quas nam id adipisci hic voluptatem et. Amet nam adipisci consequatur quo molestias doloremque molestias.",
        "image":"https://picsum.photos/id/100/500/500/",
        "category":"Health"
    },
    {
        "id":"1009923d-e700-4a56-affc-6d39360547e8",
        "name":"Gorgeous Frozen Salad",
        "price":"$251.00",
        "shortDescription":"Eaque velit eum ut ad.",
        "description":"Placeat in magni recusandae velit dignissimos reprehenderit ea. Harum cumque alias enim quia consequatur et tenetur.",
        "image":"https://picsum.photos/id/1000/500/500/",
        "category":"Kids"
    },
    {
        "id":"985e78f7-371f-4d8d-9482-f35ca105403e",
        "name":"Handcrafted Cotton Ball",
        "price":"$267.00",
        "shortDescription":"Est voluptates est ex fuga et itaque.",
        "description":"Qui iusto dicta enim pariatur. Eveniet minus reprehenderit rerum occaecati quis sed rem sunt saepe. Alias sapiente officiis in. Quia necessitatibus aspernatur aut magni quasi. Est in enim mollitia est sunt officiis modi et sit. Nam necessitatibus veritatis repellendus deleniti maiores dignissimos.",
        "image":"https://picsum.photos/id/1001/500/500/",
        "category":"Movies"
    }
];
Enter fullscreen mode Exit fullscreen mode

In the App component we add the list of products, using the following code:

<section className="products">
                {productList.map(product => (
                    <div className="card">
                        <div className="card-image">
                            <img src={product.image} alt={product.name} />
                        </div>
                        <div className="card-body">
                            <h3>{product.name}</h3>
                            <p>{product.description}</p>
                            <p className="price">{product.price}</p>
                            <a href="#" className="btn">
                                Add to cart
                            </a>
                        </div>
                    </div>
                ))}
</section>
Enter fullscreen mode Exit fullscreen mode

Also, in the App component we add a random product:

const randomItem = Math.floor(Math.random() * productList.length);
    const promotedProduct = productList[randomItem];
    promotedProduct.newPrice = Math.round(parseInt(promotedProduct.price.substring(1)) / 2);
    const monthNames = ["January", "February", "March", "April", "May", "June", 
                        "July", "August", "September", "October", "November", "December"];
    const today = new Date();
    const monthName = monthNames[today.getMonth()];
    const formatedDate = `${today.getDate()} ${monthName}`;
Enter fullscreen mode Exit fullscreen mode

The HTML for the random product is:

<section className="promotion">
                <h2>Don't miss today's hot deal!</h2>

                <div className="card">
                    <div className="card-image">
                        <img src={promotedProduct.image} alt={promotedProduct.name} />
                    </div>
                    <div className="card-body">
                        <h3>{promotedProduct.name}</h3>
                        <p>{promotedProduct.shortDescription}</p>
                        <p className="old-price">{promotedProduct.price}</p>
                        <p>
                            <span>${promotedProduct.newPrice}</span> only on {" "}
                            <span>{formatedDate}</span>
                        </p>
                        <a href="#" className="btn">
                            Buy now
                        </a>
                    </div>
                </div>
</section>
Enter fullscreen mode Exit fullscreen mode

If you liked this article, you can check our website for more articles, courses and books: https://frontendbytes.com/

Discussion (0)