Paradise Nursery Shopping Application 🌱

This project was completed as a requirement for the "Developing Front-End Apps with React" course by IBM. It is a React-based e-commerce web application for buying houseplants and featuring a fully functional shopping cart.

Check out the live website: Paradise Nursery 🌐

Features

Navigation Bar

• Links to the Landing Page, Product Listing Page, and Shopping Cart Page.

Landing Page

• A welcoming page with a button that navigates to the Product Listing Page.

Product Listing Page

• Displays 6 unique houseplants with:
  • Thumbnails, names, and prices.
  • Plants grouped into categories.
  • An Add to Cart button for each plant that:
    • Updates the shopping cart icon count.
    • Becomes disabled after being clicked.
    • Adds the selected plant to the cart.

Header

• Appears on the Product Listing Page and Shopping Cart Page.
• Includes:
  • A shopping cart icon showing the total number of items in the cart.
  • Links to navigate between pages.

Shopping Cart Page

• Displays details for all items in the cart:
  • Thumbnail, name, unit price, quantity, and subtotal for each plant.
• Shows the total number of items and the total cost of all items.
• Includes:
  • A Checkout button displaying a placeholder message (“Coming Soon”).
  • A Continue Shopping button that links to the Product Listing Page.
  • Buttons for each plant to:
    • Increase the quantity.
    • Decrease the quantity.
    • Delete the item from the cart.

Learning Outcomes

This project demonstrates proficiency in:

• Building and structuring React Components.
• Managing state with Redux.
• Rendering dynamic data and handling user interactions.
• Using conditional rendering effectively.