Project 2: Chatterbox

Released Thursday, July 12
Due Tuesday, July 24 at 6pm EST

Objectives

Getting Help

If you need help while working on the project, feel free to take advantage of any or all of the following resources:

Grading

This project will be evaluated along the axes of correctness, design, and style, with the project’s overall score computed as (3 × correctness) + (2 × design) + (1 × style). These axes, to be more clear, are defined thusly:

We are not as concerned with your site’s aesthetics, except to the extent that a poor visual design actually inhibits the user from fully interacting with the page.

Overview

In this project, you’ll build a single-page application which is an online messaging service using Flask, similar in spirit to Slack. Users will be able to sign into your site with a display name, create channels (i.e. chatrooms) to communicate in, as well as see and join existing channels. Once a channel is selected, users will be able to send and receive messages with one another in real time. Finally, you’ll add a personal touch to your chat application of your choosing!

Milestones

The project is due on July 24, but to avoid saving too much for the last minute and getting stressed out, allow us to strongly encourage that you try to meet the following milestones:

Milestone 1 complete by July 16 Display Name, Channel Creation, Channel List
Milestone 2 complete by July 20 Messages View, Sending Messages
Milestone 3 complete by July 24 Remembering the Channel, Personal Touch

Getting Ready

First, log into CS50 IDE and ensure everything is up to date:

$ update50

Then, after that finishes executing, download the distribution code for this assignment.

$ cd
$ wget http://cdn.cs50.net/web/2018/summer/projects/2/project2.zip
$ unzip project2.zip
$ rm -rf project2.zip
$ cd project2

You should see that the directory contains three files initially. You’ll add several more as you proceed through this project.

README.md   application.py   requirements.txt

Getting Started

Python and Flask

To run this Flask application:

  1. In a terminal window, navigate into your project2 directory.
  2. Run pip3 install -r requirements.txt in your terminal window to make sure that all of the necessary Python packages (SocketIO, for instance) are installed.
  3. Set the environment variables of FLASK_APP to be application.py and, optionally, FLASK_DEBUG to 1, which will activate Flask’s debugger and will automatically reload your web application whenever you save a change to a file.
  4. Run flask run to start up your Flask application.
  5. If you navigate to the URL provided by flask in the terminal (look for a line in your output of the form Running on: ), you should see the text "Project 2: TODO"!
    • If you don’t see a URL (which can sometimes happen if the gevent package commandeers the terminal output, click on CS50 IDE at top left, and then Web Server to be brought to the right address!)

Requirements

Alright, it’s time to actually build your web application! Here are the requirements:


Beyond these requirements, the design, look, and feel of the website are up to you! You’re also welcome to add additional features to your website, so long as you meet the requirements laid out in the above specification!

Hints

FAQs

Refresh this page periodically for answers to FAQs!

How to Submit

Execute the below steps on or after July 18.

Step 1 of 2

  1. Log into CS50 IDE and open a terminal window, if not open already.
  2. Submit your project by executing:
$ cd ~/workspace/project2
$ submit50 web50/2018/summer/project2

Step 3 of 3

Fill out this form!

Congratulations! You’ve completed Project 2.