Skip to content
This repository has been archived by the owner on Oct 28, 2024. It is now read-only.

SWIC-Web-Dev/8-2-ecommerce-elements

Repository files navigation

E-Commerce Elements

As the name implies, we will create some functional elements of an 'e-commerce' website.

Function Components

We will create the following components:

  • Product Card: A card that shows the product image, name, price, and a button to add the product to the cart.
  • User Table: A table of users, with their name, email, and a button to delete the user.

These will contained in src/components folder. These will be function components. Here's a suggested architecture:

src/
  components/
    product/
        card.js
    user/
        table.js

In this architecture 🏗️, we create a separate directory 📁 for each component. We keep an index.js for each one. Now, within these files, since they are function components, we will name them like: export default function ProductCard() { ... }. Note that we will only export one component per file, hence we will use default export.

This means that for the import side of things, we do not destructure with {}. We will import like this: import ProductCard from '.components/product/card';.

If you check the, the product card component README, it is already done for you, as an example. Feel free to modify it as you see fit, and use it as a basis for completing the other components.

You can also reference index.js to see how I have implemented that component and used it render the catalog.

Utility Functions

We will create some utility functions that could be useful for an e-commerce application. You may use ESM named exports and keep all of the functions in a single file, src/utils.js.

Here are the functions we will create:

  • formatPrice: A function that takes a number and returns a string formatted as a price. For example, formatPrice(10) should return "$10.00".
  • calcPriceWithTax: A function that takes a price and a tax rate, and returns the price with tax included. For example, calcPriceWithTax(10, 0.1) should return 11.

Stretch Goals (Optional - maybe some Extra Credit?)

  • getCustomers: In our 'users database', each use has a role property. This function should return an array of users that have a role of 'Customer', not 'Admin'. Referencing the 'database', there are currently 4️⃣ customers. Note: This is a difficult task given the limited amount of topics that we have covered, so it's fine if it's not perfect.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published