Fall 2017 CS418/518 Project - Milestone 4

The course project will have students build a corporate collaboration website similar to Slack. The project will be broken down into four milestones, where a milestone will consist of requirements to be met by each student's implementation.

Each milestone will have a set of "Base Requirements" and possibly "Get Ahead" requirements. Students only need to be concerned with meeting the Base Requirements for the milestone's deliverables. The Get Ahead requirements must be met for the milestone after the milestone in which they are defined (e.g., Milestone 1's Get Ahead requirements will be due as part of Milestone 2), so students can opt to begin working on these if time permits.

About half way through the milestone (see the CS518 Course Homepage for due dates), a midway status report will be presented in class by each student. This report will consist of a 2-3 minute presentation (slides optional) describing the planning done by the student to meet the milestone's requirements, preliminary design strategies, the status of development, and any further information to signify that progress is being made. A demo is not necessary but screenshots are encouraged. This presentation will be worth 2 of the 25 points for the milestone. You will get 0 of 2 points if you are not present, fail to show progress, or do not attend your peers' presentations. Even beginning to think about the problem or develop design is considered progress, so long as you show it in the midway status report.

The four milestones' and midway presentation dates and deadlines will be defined on the course website.

Project Milestone 4 - Basic Operations

Requirements (Base)
All Base Requirements from Milestones 1, 2, and 3 must be met to obtain full credit on Milestone 4.

Additional User Features
  1. Allow users to upload files to the message area of a channel
  2. If the file is an image, provide a thumbnail preview
  3. Allow direct messaging between users

  1. Upon a user registering for your web site, utilize the Gravatar API to associate with the user on your system based on the e-mail address the user supplied.
  2. Allow a user to override their Gravatar image by uploading a custom avatar, per Milestone 2.
  3. Allow a user to remove their associated avatar to default to a generic avatar image within your system (for the users in the credentials file) or to default to their Gravatar image if one exists for their associated e-mail address.

  1. Integrate your site with the No CAPTCHA ReCAPTCHA API by requiring a user to fulfill the CAPTCHA requirement before proceeding with some functionality of your web site.
  2. The HTML on your website's home page, your question display page, and user profile page must be valid according to W3C's HTML validator.

GitHub (BONUS)
  1. Allow a user to log into your web site using their GitHub credentials. Validate the credentials using the GitHub API.
  2. When a user is logged in using their GitHub credentials, use their GitHub avatar as the user's avatar on your web site.
  3. This will need to be dynamic. If I am logged in with my GitHub credentials, post, then change my avatar on GitHub, my avatar on your web site ought to reflect this change retroactively.
  4. Posts by a GitHub user should always display their current avatar when the web page is accessed and not the one that existed when the user posted.

Grad student projects and extra credit
Grad student projects and undergrad extra credit (see Lecture Slides for more info) is due to be demoed and papers submitted along with this milestone.


At 3:00pm on the demo day , a script will clone the GitHub repository you specified in assignment 1.


Your project repository can contain any number of PHP, HTML, and JavaScript files to support your in-development site.

The home page for your web site must be located in a file named "index.php". In addition to the files for the web site, you should also provide a backup of your MySQL database for importing for your project demo. This can be accomplished in the phpMyAdmin Export tab. The resulting file should be a .sql file. This file will be loaded into a MySQL instance on demo day, so verification of the integrity of the dump (i.e., try to import it using phpMyAdmin) is encouraged. Include this file in the root of your project repository as milestone4dump.sql. Include enough questions, answers, and users to effectively evaluate your web site.

We will use a Docker-based deployment scheme on demo day. This system will be equipped with the latest PHP, mySQL, and Apache versions. The instance will also expect the milestone4dump.sql and index.php files to be in the root of your project repository and will assume you used the above credentials for interaction with your database.

Per the syllabus, a brief writeup detailing how each requirement was met, design decisions, programming tricks, and helpful resources consulted is required to be submitted as a hard copy on demo day. All external libraries, resources, and other utilities used by your site must be documented to receive full credit.