dylankmoore/bangazon-client

client side for Bangazon

Hi, I'm Dylan!

void Bio()
{
    string name = "Dylan Moore";
    string bootcamp = "Nashville Software School";
    string languages = "C#/.NET & React/Next.Js";
    string interests = "visual design, coding, photography, and film";
    string email = "[email protected]";

    Console.WriteLine($"Hi there! 👋 My name is {name}.");
    Console.WriteLine($"I've recently graduated from a full stack web development program at {bootcamp} 👩🏻‍💻. " +
                      $"I'm passionate about building visually pleasing, user-friendly applications.");

    Console.WriteLine($"I've spent the last year learning and honing my skills in {languages}. " +
                      $"I'm currently looking for job opportunities and to network with others in the tech community.");

    Console.WriteLine($"Some of my interests include {interests}.");
    Console.WriteLine($"It's nice to meet you! Feel free to reach out to me via 📧 {email}.");

    Console.ReadLine();
}

bangazon-client's Issues

GET products in cart & ADD products to cart

We need to add in API calls, a Cart.js file, as well as logic in the [productId].js for the button to route properly.

User Story

As a user, I want to add products to my cart.
I want to look at my cart so that I can view the products I've added to it along with the total & individual prices.

Acceptance Criteria

Title: Customers can view shopping cart
Given a user has products in their shopping cart
When viewing their cart
Then they should see the product name and price of each product they are ordering
And they should be able to see the total amount of their order

Customer can add products to a cart
Given the customer is on a product detail page
When clicking on an add to cart button
Then the product should be added to their cart

Dependecies

#3 We need to get our products & their details first, and be able to click on them in order to place an item in the cart.

Dev Notes

• We will need API calls for the front end for these requirements

// ADD PRODUCT TO CART
const addProductToCart = (productId, customerId) => {
  const url = `${endpoint}/api/cart`;
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ productId, customerId }),
  };

  return fetch(url, options)
    .then((response) => {
      if (!response.ok) {
        throw new Error('Failed to add product to cart');
      }
      return response.json();
    });
};

// GET CART DETAILS/PRODUCTS
const getCartDetails = (customerId) => {
  const url = `${endpoint}/api/cart?customerId=${customerId}`; // Include customerId in the endpoint URL
  return fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Failed to fetch cart details');
      }
      return response.json();
    });
};

We need a Cart.js page where we setup how our Cart will look and we need to make sure our click event in [productId].js is set up correctly.

GET Products & Products By ID

When the user is on the home page, we should make sure the latest 20 products will be displayed and that the product details will load upon clicking.

User Story

I, the user, will see a list of the latest products on my home page.
When I click on a product name, a new page will load with the product's details.

Acceptance Criteria

Title: Customer can view latest products on home page
Given a user visits the home page of Bangazon
When the page renders
Then the last 20 products that have been added to the system will be displayed as hyperlinks to their respective detail pages

Dev Notes

• We will need a BACKEND ENDPOINT that fetches the latest 20 products/all products:

app.MapGet("/api/products", (BangazonDbContext db, bool latest = false) =>
{
    if (latest)
    {
        var latestProducts = db.Products
            .OrderBy(p => p.Id)
            .Take(20)
            .Include(p => p.Seller)
            .Include(p => p.Category)
            .ToList();

        return Results.Ok(latestProducts);
    }
    else
    {
        var allProducts = db.Products
            .Include(p => p.Seller)
            .Include(p => p.Category)
            .ToList();

        return Results.Ok(allProducts);
    }
});

• We will need a BACKEND ENDPOINT that gets products by ids:

// GET PRODUCTS BY ID
app.MapGet("/api/products/{id}", (BangazonDbContext db, int id) =>
{
    var product = db.Products
                    .Include(p => p.Seller)
                    .Include(p => p.Category)
                    .SingleOrDefault(u => u.Id == id);

    if (product == null)
    {
        return Results.NotFound();
    }

    return Results.Ok(product);
});

• We will need to update our index.js file to load hyperlinks of our latest 20 products.

• We will need a ProductDetail.js file which contains that product's information (to load upon clicking on products).

• We will need a [productId].js file within a programs folder, that allows us to render individual product's information.

• We will need a ProductData.js file with out FE API calls to be able to get all products as well as products by ids:

// GET PRODUCTS
const getProducts = (latest = false) => {
  let url = `${endpoint}/api/products`;
  if (latest) {
    url += '?latest=true';
  }

  return new Promise((resolve, reject) => {
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch products');
        }
        return response.json();
      })
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
};

// GET PRODUCTS BY ID
const getProductById = (productId) => {
  const url = `${endpoint}/api/products/${productId}`;

  return new Promise((resolve, reject) => {
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch product details');
        }
        return response.json();
      })
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
};

Overall Project guidelines

These are all of the needs of the project. Laying them out here to be able to organize the progress.

Acceptance Criteria

• Title: Customer should be able to view products that a seller is selling
  Given that a seller has a store with products available
  When a customer is viewing a seller's store
  Then they will see all the products that the seller has available
  Potential Implementation Ideas
  Potentially create a new endpoint that includes product information with the seller
  Potentially refactor the existing seller endpoint to include product information
  Potentially create a query string parameter ?include=products to optionally include product information with the seller

• Title: Allow a user to register for Bangazon
  Given that a user wants to buy or sell products and does not already have an account
  When they navigate to the app
  Then they are given the option to register a new user

• Title: Customers can view shopping cart
  Given a user has products in their shopping cart
  When viewing their cart
  Then they should see the product name and price of each product they are ordering
  And they should be able to see the total amount of their order

• Title: Allow sellers to see orders with their products on them
  Given a seller has sold items
  When a seller navigates to the order history page
  Then there should be a section dedicated to orders with their products
  And they should be able to see the customers that placed each order
  API Routes
  api/order/history/seller should return the orders where the logged-in user has a product on the order

• Title: User Can View Product Detail
  Given the user is viewing any page that contains a hyperlink for a product
  When the user clicks on the product hyperlink
  Then the user will be shown the product detail page containing the title, description, quantity available, price per unit, and a button labeled Add to Cart

• Title: Customer should be able to view product information when viewing order details
  Given a customer has purchased items
  When the customer views their order history
  Then product details should be viewable with each order

• Title: Customer should be able to view their completed orders
  Given a customer has purchased items
  When the customer navigates to the Orders view
  Then they should see a list of their completed orders
  Potential Implementation Ideas:
  Potentially create a new endpoint that includes only completed Orders
  Potentially create a query string parameter ?completed=true to optionally include completed orders

• Title: Customer can search for products
  Given sellers have items to purchase
  When the user clicks on the search input field in the navigation bar
  And the user types the name of a product
  When the enter key is pressed
  Then products matching the keyword will be shown on the page

• Title: Customer should be able to view order history
  When a user navigates to the order history page
  Then order details should be displayed
  And a user should be able to see the seller's info for a given order
  Order API Routes:
  api/orders should return the orders for the logged-in user
  api/orders/sellers should return the orders for the logged-in user, along with the seller's info for each product on each order

• Title: Seller should have a dashboard
  Given a seller has sold items
  When they navigate to the seller area
  Then they should arrive at a dashboard
  Dashboard data to display:
  Total Sales
  Total this month
  Average per item
  Total Inventory by Category
  Orders that require shipping

• Title: Customer can view latest products on home page
  Given a user visits the home page of Bangazon
  When the page renders
  Then the last 20 products that have been added to the system will be displayed as hyperlinks to their respective detail pages

• Title: Allow a user to place an order
  Given the user is authenticated
  And the user is viewing their cart
  When the user clicks the Order button
  Then the user should be presented with a view that allows them to select a payment type for the order

Given the user selects a payment option
When the user clicks the Done button
Then the payment type must be added to the order
And the user will be presented with a confirmation/thank you screen

• Title: Customer can click on a seller's name on a product page to view all products sold by that seller
  Given a customer is on a product detail page
  When clicking on a seller's name
  Then they should be taken to a Seller's store

• Title: Search for Seller by text
  Given A user is logged in
  Then they should be able to search for a seller

If the query string parameter of q is provided when querying the list of customers, then any customer that has a property value that matches the pattern should be returned.

If /customers?q=mic is requested, then any customer whose first name is Michelle, or Michael, or Domicio should be returned. Any customer whose last name is Michaelangelo, Omici, or Dibromic should be returned. Every property of the customer object should be checked for a match.

• Title: Customer can add products to a cart
  Given the customer is on a product detail page
  When clicking on an add to cart button
  Then the product should be added to their cart

• Title: Seller should be able to view their past sales
  Given a seller has sold items
  When the seller navigates to the Orders view
  Then they should see a list of their completed orders

• Title: Customer can view their profile information
  Given a customer has registered an account
  When they click on their username
  Then they can view their profile information.

• Title: Customer can delete an item from their cart
  Given that a customer has an item in their cart
  When they click the Delete button
  Then the product is removed from their cart

• Title: User Can View All Product Categories
  Given a user is viewing any page on the Bangazon site
  When the user clicks on the Product Categories hyperlink
  Then the user will see a view containing a list of all product categories
  And next to the category name, the number of products in that category will be displayed
  And the first three products in the category will be displayed beneath each category, which are hyperlinks to the product detail

Sample:
Electronics (15)
Dryer
HD Television
Sony Walkman

Sporting Goods (7)
Football
Ice skates
Basketball hoop

• Title:Customers can choose one of their payment types when purchasing their shopping cart
  Given a customer with a shopping cart with products in it
  When placing their order
  Then they should be asked for a payment type
  And they should select a payment type that they have defined

Given a customer with a shopping cart with products in it
And the customer does not have a payment method defined
When placing their order
Then they should be asked to define a payment method