SWEN-344 Client (Final) Practicum

Make sure you have completed the initial setup instructions for the Practicum.
Reminder: The gitlab project will still be named react-final-abc123, where ‘abc123’ is your student username.

All your code must go in the repo you created. Once your repo is ready, implement the code (client and server) as instructed below, using python, RESTful APIs and SQL with the provided data-set. Pay attention to the output formats specified.
The DB is initialized from the server (see server.py). Your client code (any code in tests) should not call the DB directly. Server side DB code must make proper use of SQL for full credit. Client code must properly use RESTful APIs for full credit.
You are NOT allowed to add any new APIs or modify the provided APIs as set up in server.py. You need to use the provided API and intelligently use parameters within the existing definition in server.py
Your implementation of the apis will be in vend*.py files. Read the comments for each method and implement as specified. (You are allowed to add helper files. You are NOT allowed to modify the API or DB structure)
No assertions are required for this exam (beyond what is already implemented).
Client code does not know about PRIMARY or FOREIGN keys, so don’t hard code that information into the client. The server has to deal with those details.
You are required to use Nodejs, Flask and React with Reactstrap components to implement this exam.
Push all code to your repo per instructions.

Overview

You are implementing a network enabled vending machine. The display presents the user with the items stocked in the vending machine.
Use a Reactstrap Card for the display of each item.

  • The information displayed is:
    • The name of the item
    • The quantity (that is the number in parentheses after the name)
    • The price
    • The button to select to get an item
      There is a keypad which presents a button for each item in the vending machine.
      When you press a button, a single item corresponding to the button pressed is dispensed, and the available quantity goes down by one.
      This is a mini vending machine, so it only holds a total of 8 items (A-H), in 2 rows of 4 items per row.

Tech Stack:

Since this is full-stack, you will need to implement client code (Node/ React/ JS) and server code (python), same as the course projects.

Requirements:

Part 1: (Tag as ‘part-1’ in gitlab)

  1. Display all products:
    • Retrieve and display the products in the vending machine. There are more items in the item table than fit in the machine, which can hold only 2 rows of four items. The vending_machine table tells you what is actually in the vending machine display and tells you which row and position in the vending machine the item is located. The display must match that positioning. Implement the API needed to retrieve and display the machine contents. Your display should be (very) similar to this:
      ../vending1.png
    • You will use the get endpoint for vend
    • The colour scheme for the items display is based on the quantity
      • The display is color coded such that:
      • Qty >=7: Green
      • Qty >= 4 and < 7: Yellow
      • Qty <= 3: Grey
    • The .css file supplied can help you with the colourization (modify as needed)
    • Use css selectors to help you with colourization. Review vend.css. There are placeholders for the colors - you will need to add the correct attributes to match the colors described in the requirements (and shown in the picture).
      Note that proper colorization requires background and font colour to be correctly paired for readability
    • Make sure currency is correctly formatted.
  2. Make the buttons work:
    • You are already provided a convenient display for the keys used to select a product for purchase.
    • Finish implementing the feature so that when a button/ key is pressed, the quantity of the selected item goes down by 1. Quantity cannot go negative.
      • You have to change the quantity in the DB, and then retrieve the new data to update the display including the colourization (as previously described)

Part 2: (tag as ‘part-2’ in gitlab)

  • When you implement Part-2, make sure all your Part-1 features still work! Details will be released at the final exam

Grading:

  • 100 points total
  • Correct setup, CI works, all instructions followed: 10 pts
  • Requirement 1: 25 pts
  • Requirement 2: 20 pts
  • Full credit will require:
    • Correct functional behaviour and UI behaviour. This includes matching the display behaviour and layout
    • Correct implementation of both the client code and the server code
    • Proper use of JS, React, Reactstrap components and REST & SQL
  • Deductions:
    • Student repo not visible to instructor (added as reporter) by end of class 12/9 (-10pts)