Bakery E-Commerce Application

Screenshot

Video

How to Run

• Clone from Github
• Cd to Project Folder
• Run npm install
• Run npm start

Features

• Adding an item that is already in the cart, increases the quantity of the item by 1.
• Setting the quantity of an item in cart to 0 or null, removes it from cart.
• On successful transaction, going back to the shop resets the cart.
• User cannot checkout before adding at least one item to cart.

Component Descriptions

• Cart Component
  • This component renders the Cart Sidebar on the right-hand side.
• Cart Item Component
  • This component renders each item that is placed in the Cart Sidebar.
• Home Component
  • This component renders both Shop and Cart.
• Item Component
  • This renders the items that are in the Shop.
• Shop Component
  • This renders the Shop on the E-commerce application.
• Success Component
  • This renders the Success Page after a transaction has been made.

Container Descriptions

• Cart Container
  • This is the container for the Cart Component.
• Shop Container
  • This is the container for the Shop Component.
• Success Container
  • This is the container for the Success Component.

Project Structure Reasoning

• As of right now, all files are grouped based on their type (components, actions, containers, and reducers).
• This application is quite small scale, so I decided to leave it like this.
• In bigger scale projects, files should be grouped by their functionality (home, cart, shop, etc.).
  • Related files would be in those folders.

Data Source Reasoning

• Images are stored in the public/images folder.
• In a production environment, images would come from the server.
• Inventory data is hard-coded.
• In a production environment, data would be retrieved from server using AJAX.