School of Computer Science and Software Engineering

CITS3403 Agile Web Development — Projects

Unit Coordinator

Dr Tim French

Phone: 64882794

Lab Facilitator

Mr Tom Smoker, Mr Haolin Wu

 

Consultation Time

Where: CSSE rm 2.14
Time: Wednesday 12-2pm
No appointment needed.

 

Project FAQs

Can I use jQuery, React, Bootstrap, or Angular for UIs in Project Part 1

JQuery, AJAX and bootstrap are ok, but Angular, VUE.js, React etc are not. We would like to see a demonstrated confidence in using raw HTML for structure, CSS for formatting and JavaScript for interactions in Part 1. Having said that, you are encouraged to learn these UI libraries and front-end frameworks in your spare time.

Can I use advanced CSS3 that are not necessarily supported by certain browsers

Yes in this case, but you will need to clearly state the browsers that supported and ensure that your page is still functioning on the browsers installed on the CSSE/EECE lab machines. So the bottom line is, if the pages work on the browsers in the labs, then it would be considered as acceptable.

What Flask modules can I use

Typically the flask modules mentioned in lectures will be ok. Otherwise, post a question to the help forum. The basic ones to use are: Flask, Flask-Babel, Flask-Bootstrap, Flask-HTTPAuth, Flask-Login, Flask-Migrate, Flask-SQLAlchemy, Flask-WTF, Jinja2, PyJWT, requests, Werkzeug.

Can I do cross-unit registration

The answer is No in general. If there are special circumstances, please email Tim for permission.

News:

  • [14 Feb 2020] This unit currently has 190 CITS3403 students and 40 CITS5505 students enrolled. Almost twice as many as last year!
  • [14 Feb 2020] Labs, lectures and workshops all start in week 1.
  • [24 Feb 2020] Update: Labs will be starting in week 2.
  • [24 Feb 2020] Welcome to the first day of semester. The first class will be the lecture on Wednesday at 2.

Web Project Specification: Social Choice

Due 6pm, May 18, 2020

This project is worth 30% of your final grade in the unit must be done in pairs, for CITS3403 students. For CITS5505 students, it may be optionally done in pairs.

The Project description will be released by March 11. The outcomes will be similar to last years project which is described below.

Project Description

For this project you are required to build a multi-user web application. The application should be written using HTML, CSS, Flask, AJAX, JQuery, and Bootstrap. The application should perform some kind of voting or ranking activity (social choice), based on the inputs from users. The context and the type of social choice mechanism is up to you.

Example contexts you could use are:

  • Music/Movie Polls (e.g. find the best anime movie of the 21st century)
  • Ranking recipes (e.g. find the best lassangne recipe on the web).
  • Ranking the best fishing/surfing spots in Perth
  • Find the best units at UWA.

The types of social choice mechanism you could use are

  • First past the post voting
  • Preferential voting
  • Elo rankings (as used in chess leaderboards)
  • Page rank type graph algorithms

Think carefully about the design of the application. It should be:

  • Useful, in that it answers an interesting question in a meaningful way
  • Reliable, so that it is not frustraing to use, and can not be easily manipulated
  • Intuitive, so that it is easy for a user to contribute and understand the results
  • Engaging, so that it looks good and presents sufficient context for the questions being asked.
  • The web application should be styled to be interesting and engaging for a user in the selected context. It should offer several views including:

    1. An adminstrator view, that can add and delete polls, delete responses, and add and delete users. (Users may be anonymous, if it suits the application, but there will still be non-anonymous admin users with some oversight).
    2. A user view that can view polls and current standings, and submit responses to polls.
    3. A general view that can just view polls

    In addition to the web application, you should create a private GitHub project that includes a readme describing

    1. the purpose of the web application, explaining both the context and the social choice mechanism used.
    2. the architecture of the web application
    3. describe how to launch the web application.
    4. describe some unit tests for the web application, and how to run them.
    5. Include commit logs, showing contributions and review from both contributing students

    Group Registration is now available.

    Getting Started: Select Website Purpose and Style

    Find a partner with (ideally with common interests) and come up with a theme for your application. Discuss styling, how the application is likely to be used, and precisely what functaionality it should offer. Partners should be from the same unit so each pair is both from CITS5505, or both from CITS3403. Criteria: Front-end (50%)

    1. The user should be able to enter all necessary data required by the application (although this need not be stored). This data should be sufficient to run the algorithm, and validatedon the client side.
    2. The webpage must be implemented using HTML5, CSS and Javascript (or a subset thereof).
    3. All resources used (inlcuding pictures, javascript libraries, css) must be full referenced.
    4. The website must use HTML5, and CSS. The HTML and CSS must pass this validator.
    5. The website must work on chrome, firefox and internet explorer
    6. The website should have at least three pages/sections: one promoting the theme (and explaining how and why the ranking is done); one collecting user data and preferences; and one displaying the result of the polls.
    7. There must be a consistent style (via css file) for all pages yet each page should be easily identifiable. There should be a navigation element, and a footer element displaying author information.
    Marking Scheme
    • HTML5 - style, maintainability, validation 10%
    • CSS -style, maintainability 10%
    • Javascript-code quality, validation of user generated data, execution 15%
    • Style - look and feel, usability 10%
    • Content - coherence, effectiveness 5%
Criteria: Backend functionality (50%)

The second part of the project criteria is the back end functionality of web application.

The web application should be implmented using Flask (any additional libraries/modules require unit coordinator approval), and provide at least the following functionality:

  1. A user account and login feature, (as a minimum for administrators)
  2. The ability to propose new votes and/or condiadtes to be "ranked".
  3. A method to vote or rank candidates.
  4. A method to see current results.

Bonus marks will be available for the following types of features:

  1. Reacting to other users events (a new task has been posted, or someone has proposed tasks to you...).
  2. Graphical representations of results (e.g. histograms, maps etc).
  3. Building a RESTful API to interact with the app (CITS3403 students)
  4. Providing automated system tests
  5. and feel free to propose other types of features I can include here...

The back functionality will be assessed via the following deliverables:

  1. A complete Flask application providing the functionality of the project. This should be submitted as a zip including
    • a full readme.md, describing the design and development of the application, and giving instructions on how to launch from local host.
    • the git log, showing commits from both partners
    • all source code, with comments and attributions for any external libraries.
    • a requirements.txt file, listing all packages used. To build the requirements.txt file for your virtual environment, use the command: pip freeze > requirements.txt while your virtual environment is active.
  • The application should include an HTML5 website with the following pages (or functions):
    • An adminstrator view, that can add and delete polls, delete responses, and add and delete users.
    • A user view that can view polls and current standings, and submit responses to polls.
    • A general view that can just view polls
    • Additionally, CITS5505 students must provide a REST interface to the system.
  • Marking Scheme
    • Codecode quality, difficulty, execution 10%
    • Persistence and User authentication 10%
    • Testing 10%
    • Design 10%
    • (CITS3403) Collaboration 10%
    • (CITS5505) REST API 10%
    • Bonus marks - 5% per element

    Demonstration Schedule

    In week 12 all members of each team must present and demonstrate their project.

    Submission

    Submit the zip including:
    1. All source code for a flask application
    2. a full readme.md, describing the design and development of the application, and giving instructions to launch the applictaion (running on localhost), and dependencies (i.e. required modules)
    3. the requirements.txt file, containing all modules used by your project
    4. the git log, showing commits from both partners
    5. a small database file (eg app.db) to demonstrate the projects functionality
    Do not include all libraries (i.e. the virtual environment folder), or the full git repository as they are large and unnecessary.
    cssubmit


    This Page

    Last Edited on:
    Friday 14th of February 2020 01:56:35 PM

    Website Feedback:
    tim.french@uwa.edu.au