Final Project

Final Project, Due FRI, April 27th at 11pm

Overview

Create a small web application using Express and MongoDB. Build the application incrementally over the course of 4 weeks.

Project Requirements

Requirements

You must use Express and MongoDB (or other server-side framework and database with permission)
You must write your own code, with annotations/references added for any code sourced from books, online tutorials, etc.

Grading Rubric

Completing the milestones leading up to the due date is required! Milestones 1 - 3 are worth over half of your final project grade.

(20 points) Milestone #1 - requirements, draft data model, and a skeleton application
(20 points) Milestone #2 - deployment attempt and a single working form (You cannot change your idea for your final project after this, but you can still make minor modifications)
(20 points) Milestone #3 - two working forms and proof of work on research topics
(40 points total) Completed project
- (12 points) minimum 3 x forms or ajax interactions (excluding login)
- (6 points) minimum 3 x any of the following (can be the same):
  - es6 classes that you've written yourself (using the class keyword)
  - Object.create (where prototype matters)
  - original higher order functions that you've written yourself
  - or use any of these built-in higher order functions found in Array.prototype: map, reduce, filter
- (2 points) minimum 2 x mongoose schemas
- (8 points) stability / security
  - simple validation on user input to prevent application from crashing
  - doesn't allow user input to be displayed unescaped directly on page
  - pages that require authentication cannot be accessed without authentication
  - data specified as private to a user cannot be viewed by another user
  - etc.
- (4 points) originality
  - is not mostly based on existing homework
  - majority of code is not from online tutorial
- (8 points) worth of research topics; see below

Additional Requirements, Your Choice

Choose at least 8 points worth of these following topics (research and implementation). This list may change slightly (added items, adjustments to points) as project ideas come in.

(3 points) Unit testing with JavaScript
- Jasmine
- Mocha
- Any others found through research
- Minimally 4 tests
- You'll have to link to testing code in repository
- … and show a screen capture of tests
(5 points) Automated functional testing for all of your routes using any of the following:
- Selenium
- Headless Chrome - headless browser testing
- Minimally 4 tests
- You'll have to link to testing code in repository
- … and show a screen capture of tests
(3 points) Configuration management
- nconf
- Node convict
- Any others found through research
(3 points) Use grunt, gulp, webpack or even make (!) to automate any of the following … must be used in combination with one or more of the other requirements, such as:
- (2 points) Integrate ESLint / JSHint / JSLint into your workflow
  - Must be used with build tool (see above requirement on Grunt or Gulp
  - Must have have configuration file in repository
  - Must run on entire codebase outside of node_modules automatically on file change (watch for changes to the file system)
  - Must link to relevant lines in build configuration and lint configuration
  - Must show screen capture / animated gif of running on save
- (2 points) Concatenation and minification of CSS and JavaScript files
  - Must be used with build tool (see above requirement on Grunt or Gulp
  - (Only client side files!)
  - Only minify and concatenate client side JavaScript
  - Must link to relevant lines in build configuration and mark-up (to show included css)
  - Must run automatically on fille change
  - Must show screen capture / animated gif of running on save
- (2 points) Use a CSS preprocesser
  - Sass
  - Less
  - Myth
  - Must link to relevant lines in build configuration and directory of unprocessed CSS source
  - Must run automatically on fille change
  - Must show screen capture / animated gif of running on save
(3 points) Perform client side form validation using custom JavaScript or JavaScript library
- errors must be integrated into the DOM
- the following will not receive full credit:
  - using form elements with attributes as constraints
  - displaying errors with alert
(2 points) Use a CSS framework throughout your site, use a reasonable of customization of the framework (don't just use stock Bootstrap - minimally configure a theme):
- Bootstrap
- Foundation
(1 - 6 points) Use a server-side JavaScript library or module that we did not cover in class (not including any from other requirements)
- assign a point value to the library or module that you're using based on amount of effort and/or code required for integration
- Must link to source code relevant to implementation and evidence of working implementation on site
(1 - 6 points) Use a client-side JavaScript library or module that we did not cover in class (not including any from other requirements)
- assign a point value to the library or module that you're using based on amount of effort and/or code required for integration
- for example, angular 2 or d3 might be 6 points, while google maps might be 1 point
- Must link to source code relevant to implementation and evidence of working implementation on site
(1 - 6 points) Per external API used
- assign a point value to the library or module that you're using based on amount of effort and/or code required for integration
- for example, angular 2 might be 6 points, while google maps might be 1 point
- Must link to source code relevant to implementation and API documentation

Milestones

4/4 at 11PM - Milestone 1 - Requirements / Specifications, Draft Data Model, Skeleton Application (20 points)

Check out sample documentation

Documentation
- Submit electronically through a supplied GitHub repository
- Write everything up in your README.md
  - Drop the images into your repository (either under a separate branch or in a folder called documentation)
  - Link to it based on this SO article
- A one-paragraph description of your project
- Requirements
  - Sample documents (JSON / JavaScript literal objects will be fine, or your actualy Schemas) that you will store in your database, and a description of what each document represents
  - Enumerate any references from one document to another
- Wireframes (like this one)
  - a great article on wireframes
  - some possible tools
    - Hand-drawn
    - Balsamiq
    - Google drawings
    - Omnigraffle
    - Adobe tools such Photoshop (psds), Illustrator (ai) etc.
- A Site Map (see examples)
- One of the following to represent what your application will actually do:
  - A list of user stories (simply a list of sentences in the form of as a <type of user>, I want <some goal> so that <some reason>)
  - A list/spreadsheet of use cases (see the end of this article)
  - A Use Case Diagram
- Which modules / concept will you research?
  - List of research topics
  - A brief description of concept (3 or 4 sentence each)
    - What is it?
    - Why use it?
    - List of possible candidate modules or solutions
    - Points for research topic (based on specifications above)
Code
- A skeleton express app
  - Start populating your package.json with required modules
- A 1st draft mongoose schema

4/12 at 11pm - Milestone 2 - Initial Deployment and First Form (20 points)

attempt to deploy your code to Courant's compute and assignment servers by following instructions
use this form to submit your deployed site
your submission won't be graded unless the form above is sent with urls to your deployed site
your deployed site should contain the following progress:
- one working form (that is not login or registration)
  - …that should allow data to be modified or deleted
  - the results of submitting this form should be apparent/viewable
- show some progress on at least 1 of your research topics, it doesn't have to be fully working… stub code from documentation or pseudocode is adequate
  - consequently, a link to the github repository / line no that shows any proof of work is sufficient
  - or, if it's something that's already visible, a link to the a page on your site that's deployed to the server

4/20 at 11pm - Milestone 3 - 2nd Form and More Progress on Research (20 points)

make at least 3 additional commits to add:
- your 2nd form / ajax interaction
- make more progress on your research topics
redeploy your code to Courant's server by running git pull and restarting forever (do not do this until you receive your milestone #2 grades)
1. ssh into linserv1 or linserv2 (remember, you have to go to access.cims.nyu.edu first)
2. cd into your project directory (should be in ~/opt/NETID-final-project)
3. run forever stopall and forever start bin/www
  - you'll have to use the full path to forever, likely ~/usr/local/node_modules/bin/forever
  - and perhaps the full bath to bin/www
fill out form to submit assignment; it will contain:
- both working forms or ajax interactions (that are not login or registration)
- a link to show code changes since milestone #2:
  - start with the url to your repository: https://github.com/nyu-csci-ua-0480-008-spring-2018/NETID-final-project/
  - and append the following to the url: compare/master@%7B04-13-18%7D...master
  - for example: https://github.com/nyu-csci-ua-0480-008-spring-2018/NETID-final-project/compare/master@%7B04-13-18%7D...master

4/27 11PM - Final Project Complete and Code is fully Deployed

all commits must be in by Friday, April 27th
project must be deployed on cims servers (or other platform, such as Heroku, gomix, zeit, etc.)
- if your application needs to be restarted while being graded; I will contact you
- you will not receive a penalty for restarting after the due date
the final project form submission must be filled out (if a form is not submitted, you will receive a 0 for your project)
Research Topic Notes
- if you require a specific user to be logged in, please add the username and password in the form submission above
- if you used unit testing or functional testing, upload a screen shot or an animated gif of your tests running to the documentation folder of your project; link to it in your form submission
- if you used grunt, gulp, or webpack … or some if you used a pre-processor like babel, sass, etc. … link to the relevant configuration file in your form submission
- if you are using facebook login, and your application is in testing mode, add this user: Eef Aqua so that graders can test your application

Applied Internet Technology