Skip to content

Latest commit

 

History

History
96 lines (79 loc) · 6.49 KB

README.md

File metadata and controls

96 lines (79 loc) · 6.49 KB

Design and develop an ecommerce store using Next.js. It should have the following:

  • A Products page (where all the products are listed)
    • Minimum of 4 different products
    • The page should have a relevant h1 element
    • Each product needs to be contained in an anchor element (a link) with an attribute of data-test-id="product-<product id>"
      • This link will lead to its single product page
    • The header (described below) needs to have a link to the products page with the HTML attribute data-test-id="products-link"
  • A page for each single product (when you click on the product it goes to this page) with ability to add a quantity to the cart
    • The single product URL needs to contain the id (eg. /products/<product id>)
    • The product name needs to be directly inside an h1 element (it should be the only h1)
    • The product image needs to be in an img element with the HTML attribute data-test-id="product-image"
    • The product price (without any currency symbol or thousands separator) needs to be directly inside an element with the HTML attribute data-test-id="product-price"
    • The quantity input needs to have the HTML attribute data-test-id="product-quantity"
      • The starting quantity should be 1
    • The add to cart button needs to have the HTML attribute data-test-id="product-add-to-cart"
      • Clicking this button will add the amount from the product quantity input to any quantity of this product already in the cart
        • For example, if the amount in the product quantity input is 2 and the existing quantity of this product in the cart is 3, then after clicking the button, the quantity of this product in the cart will become 5
    • Negative quantity values should not be possible
  • A Cart page (containing a list where products appear when you click on the "Add to cart" button on the single product page), which also shows the total price of all products
    • Each product needs to be contained in an element with the HTML attribute data-test-id="cart-product-<product id>"
      • Inside the product element, the product name and price need to be be visible
      • Inside the product element, the quantity needs to be visible, as the only content in an element with the HTML attribute data-test-id="cart-product-quantity-<product id>"
      • Inside the product element, the remove button needs to have the HTML attribute data-test-id="cart-product-remove-<product id>"
    • The total price (the number without any currency symbol) needs to be directly inside an element with the HTML attribute data-test-id="cart-total"
    • The checkout button needs to have the HTML attribute data-test-id="cart-checkout"
    • Negative quantity values should not be possible
  • A Checkout page which shows the total and asks for shipping and payment information (when you click on the "Checkout" button on the Cart page it navigates to the checkout page)
    • The first name input needs to have the HTML attribute data-test-id="checkout-first-name"
    • The last name input needs to have the HTML attribute data-test-id="checkout-last-name"
    • The email input needs to have the HTML attribute data-test-id="checkout-email"
    • The address input needs to have the HTML attribute data-test-id="checkout-address"
    • The city input needs to have the HTML attribute data-test-id="checkout-city"
    • The postal code input needs to have the HTML attribute data-test-id="checkout-postal-code"
    • The country input needs to have the HTML attribute data-test-id="checkout-country"
    • The credit card input needs to have the HTML attribute data-test-id="checkout-credit-card"
    • The expiration date input needs to have the HTML attribute data-test-id="checkout-expiration-date"
    • The security code input needs to have the HTML attribute data-test-id="checkout-security-code"
    • The form should prevent submission with any of the above fields being empty
    • The Confirm Order button needs to have the HTML attribute data-test-id="checkout-confirm-order"
    • Privacy: don't save user information (payment or other personal information) anywhere (unless you have a privacy policy and are creating a real ecommerce store)
  • A Thank You page after a checkout has been completed
    • The page title should include Thank you for your order
  • A header with a link to the Cart, showing the number of items in the cart
    • This header needs to appear on all pages
    • The header needs to use the HTML <header> element
    • The number of items is the sum of the quantity of all products (eg. if you have 2 apples and 3 bananas in your cart, the number of items is 5)
    • The number of items needs to update when you add or remove items from the cart
    • The link needs to have an HTML attribute data-test-id="cart-link"
    • The count needs to be contained in an element with the HTML attribute data-test-id="cart-count"

This project is to build an Ecommerce store on your own - don't use an all-in-one solution like Next.js Commerce.

Cookies

  • Use a cookie called cart to store information about what the user has added to their cart
    • Security: Prevent the user from making changes to cart data they shouldn't be able to (eg. prices). Remember: users can edit any information that is in the cookie.

Database

  • Create a PostgreSQL database and table(s)
  • Connect to and query information from this database

TypeScript / JSDoc

  • Write at least 2 pages with props and 4 other non-migration, non-database files in TypeScript (type the React props like in the cheatsheet)

Tests

This project should also include tests written for the following functionality:

  • E2E: Add to cart, change quantity and remove from cart
  • E2E: Checkout flow, payment page, thank you page
  • Unit: Test function that combines the product data from the database with the product quantity data from your cookie
  • Unit: Test function for updating quantity in item of cookie (eg. adding an item to the cart that already exists)
  • Unit: Test cart sum function
  • Set up GitHub Actions to automatically test your code

SEO

  • Add titles to all pages
  • Add meta descriptions to all pages

Deploying

Documentation

  • Create a readme with:
    • Title
    • Description
    • List of all technologies used
    • 1 or 2 screenshots
    • Setup instructions
    • Deployment instructions