This is Group work

Start: Feb 22

Due: April 26 @ START OF CLASS

Points: 170 points (see rubric on Canvas for Evaluation GUIDELINES ---NOTE THERE WILL BE PEER REVIEWS FOR THIS EVALUATION) + 20 points for Peer Review (to be discussed later)

******Peer Evaluated--how to do this******* (rubric on Canvas)

 

 

 

 

 

 

 

 

Your group is going to continue from Project 1 to create different dynamic and data components listed below. As with Project 1 design is important. Take cues from commericial websites for common looks (for shopping carts, etc)

• Create a MongoDB database on Atlas with Google with Collections called : users and orders.
• createAccount.html - will invoke a NodeJS + Express to dynamically recieve the form information (after client-sideJavaScript validation) and the NodeJS+Express code should:
  • validate all information given is good
  • check to see if the login or email provided does not currently exist in the users collection and if so respond appropriate
  • if the login and email are unique (it is a new account) create a new user document in the users collection of your ModgoDB database and respond appropriately--specifically ask them to log in. Note: I will not ask you to verify the email address)
• account.html - has a login form, if the user uses this form you must verify that the password provided corresponding to a account in the users collection with that login and password.
• product pages + shopping - have the ability to add a product to a shopping cart. For this your group will need to find some existing (and its out there) shopping cart NodeJS + Express code that I will allow you to reuse to store in Session data a current shopping cart. This is part of the work, to find and understand this work. Part of this project is to explain this code. You should visually show the user that the product is added to the cart (think about how this is done in common shopping sites ---like the cart has a count of products in it that is increased and is displayed on the main navigation bar). shopping = will invoke NodeJS + Express to store the requested item for purchase in the NodeJS Sessions variable
• cart (link on icon in navigation) = will invoke NodeJS + Express and with the information stored in the NodeJS Sessions variable show the current content of the cart. From this interface the user should be able to change the cart to remove, add more quantity or reduce quantity of any item in the cart from the view cart option (has a form inside it).
  
  
• shopping cart check out = the user when checking out you must check the cart is not empty,create an order in the orders collection that takes either the address information form the users account (if exists) or collects this info. Billing information should also be collected and be part of this order. ALL of the order information should be stored in the orders MongoDB collection AND there should be a reference to the user collection document of the user who ordered it. Regarding the collowing of information in checkout, you can do this as a series of forms OR a single form. The design is up to you but, in either case the form needs to be WELL designed and organized. The result of shopping should include: DISPLAY the following:
  
  • ALL User Information
  • ALL Payment Information & Shipping Information
  • ALL Products in Shopping Cart along with details (name,productid, quantity, etc as appropriate) AND total COST including tax
  • 

 

 

CODE STYLING: IMPORTANT: Specifically you should:

• Code should be sufficiently commented (above any functions, variables, in each file) and sufficiently understandable

• Naming of functions, classes and variables is appropriate/descriptive and uses consitent styling.

 

 

 

 

 

 

 

 

All of the NodeJS + Express +XXX code should be located on the cloud service of either Heroku or Google CloudRun. Below is a screenshot of the PARTIAL File Structure of your project.

 

 

 

your NodeJS+Express project will contain a mapping of the URL /storeOrder to the invokation of the function storeOrder that will take a POST request to it. Your routes/index.js will contain code that looks like:

• router.post("/storeOrder", ControllerDatabase.storeOrder); //note sometimes the router object in sample code & in book is called app
  //note you will have had to define the ControllerDatabase before this to point to the Controller code located in controllers/database

 

 

create a controller file called database.js inside a controllers directory and this code will have a module.export.storeOrder function that will do the following: (TIP: both of the previous exercises will help you do this)

• Read in ALL the POST data comming from your HTML form to complete the order (from the shopping cart) into this as a POST request
• Open up a connection to your mLab MognoDB database that you created (see ITEM 5)
• Write to the ORDERS, BILLING, USERS, SHIPPING collections-the corresponding information you read in from the POST request data
• Close the connection to your database
• will render a storeOrder.ejs(in views directory) that will return the content of the order with a "THANK YOU FOR YOUR SUBMITTED ORDER" MESSAGE ON THE TOP that is NICELY formatted. Note: the storeOrder.ejs will be a formatted output (html with ejs) that displays the Order summary.

 

 

 

GITHUB

1. Create a new group Github repository and share your NodeJS+Express project to this repository
2. Create a docs directory and publish to Github pages documentation to teach others about your project and code in the repository.
3. PROJECT MANAGEMENT: Create a Issues Board for your Github respository and for EVERY ITEM listed above under project details you are to create MULTIPLE cards per item (there are multiple pieces to most of the items listed above). Assign people (not everyone to every card) to the cards AND set due dates for each card. During every group meeting working on this project you need to update your issues board.
4. Create a Wiki in your Github repository that contains

• home page = link to the website
• create Account demo = video showing the before and after of the MongoDB AND a user using the website to create a new account.
• shopping + viewcart = video showing the shopping cart demo where the user goes to different product pages, adds them to a cart and at different times during shopping views the cart which shows a listing of all of the current items in the cart (view cart)
• checkout demo= show the before and after screenshots of any forms used to collect user information of address and billing as well as the before and after of the conent in the orders collection.

 

 

 

 

• April 26, @ START OF CLASS

   

  • Turn in BOTH URL to the Github AND the URL to the csweb01 website to Post to Canvas->Assignments->Project 2

    WILL Present work April 26 in class (continuing as necessary next class) + Peer Reviews

    
    
    Regarding peer reviews, the instructor will review the peer reviews, if appropriate the group will maintain the average of the peer reviews given (only a subset of students will review your work) ---however, the instructor WILL alter the review score as necessary to reflect properly the work performed (and this can be to increase OR descrease the score). Also, points are awarded for doing peer reviews and if improper reviews are done or poor quality reviews are done, a student doing so will loose those points. ******Peer Evaluated--how to do this******* (rubric on Canvas)