Project

Overview

The goal of this project is to apply the material we have covered throughout the semester to design and implement a working web application. The application area of your web application is up to your team to decide, but must adhere to the requirements defined below.

Core Requirements

Your web application must include the following three core areas of web application development:

• HTML - Your application must use HTML. In particular, HTML must be used to render your application in a web browser dynamically. Your project may not be a simple website - it must be an application where the user is able to interact with the application (e.g., forms) to dynamically change what is rendered on the screen. You are also allowed to use template languages such as Pug that is translated into HTML. Your HTML must be more than just displaying static text. It must demonstrate a level of sophistication that has been covered in this course.

• CSS - Your application must use CSS to render a user interface in the browser that improves the viewing experience of the user. You are welcome to use core CSS or any number of CSS frameworks (e.g., Bootstrap). Your CSS must be more than just changing the size and color of text. It must demonstrate a level of sophistication that has been covered in this course.

• JavaScript - Your application must use JavaScript. JavaScript must at least appear in the browser and possibly on the server (see below). Your JavaScript must be more than just changing the size and color of text. It must demonstrate a level of sophistication that has been covered in this course. In particular, it should be capable of handling events and dynamically change what is rendered on the screen.

Topic Requirements

Your web application must include at least 2 out of the following additional topics that we have covered in this course:

1. Data Storage - Your application will use a persistent storage mechanism as part of its implementation. You are welcome to use any data store of your choice (e.g., MongoDB, MySQL, PostgreSQL, browser local storage).
2. Server-Side - Your application will implement an HTTP application server. We have seen how to use the Express framework, but there are others. You are welcome to choose alternate languages and frameworks. Your HTTP server must interact with the core areas mentioned above.
3. Ajax - Your application will use ajax to communicate to your own HTTP server or a 3rd party API. Your implementation must demonstrate a significant level of interaction with an API over ajax. That is, you can’t simply grab the weather for today and render it in the browser.
4. Websockets - Your application will use websockets to communicate to your own HTTP server or a 3rd party service. Your implementation must demonstrate a significant level of interaction over websockets. That is, you can’t simply grab the weather for today and render it in the browser.
5. Authentication - Your application will implement an authentication mechanism. You are welcome to use web tokens as covered in this course. There are other aspects of authentication that we have not covered - you are welcome to use alternate approaches.
6. Password Hashing - Your application will implement a password hashing mechanism. You are welcome to use the approach covered in this course. There are other approaches to handle secure passwords that we have not covered - you are welcome to use alternate techniques.
7. Mobile - Your application will implement techniques to render properly in both a traditional desktop browser as well as on mobile devices. Your application must be demonstrated in both the mobile and desktop platforms and reach a level of sophistication that is expected in this course.

Project Version Control Requirements

Your project will require a public Github repository that is easily shared with the course staff. If you are not familiar with Git you should spend a little time learning how to use it to help coordinate development efforts. You should review this supplementary material to help guide you. Your team must setup a Github repository that is shared amongst the team members.

Your team Github repository must include a README.md file (written in Markdown format). The README must include a list of the team members as well as links to each member’s Github profile page, a description of the project, and instructions on how to install and run the project. You should also note any third-party requirements and any other important information that would help someone fork your repository and extend your work. The end result should be suitable to present to a potential employer.

Integrative Experience Requirements

This is an Integrative Experience (IE) course:

“Integrative learning comes in many varieties: connecting skills and knowledge from multiple sources and experiences; applying theory to practice in various settings; utilizing diverse and even contradictory points of view; and, understanding issues and positions contextually.”

There are three areas of the IE that must be covered in this project:

1. Providing a structured, credited context for students to reflect on and to integrate their learning and experience from the broad exposure in their General Education courses and the focus in their major.
2. Providing students with the opportunity to practice General Education learning objectives such as oral communication, collaboration, critical thinking and interdisciplinary perspective-taking, at a more advanced level.
3. Offering students a shared learning experience for applying their prior learning to new situations, challenging questions, and real-world problems.

The first (1) area will be covered both as part of working on a team as well meeting with an assigned UCA to conduct brief weekly stand-up meetings and in class status reports. As part of these meetings you will be asked a series of questions to reflect on your teams progress and how the work you are doing on this project related to your broad exposure to general education courses that you have taken previously.

The second (2) area is covered directly through team activities including collaborative work, oral communication, and critical thinking. Team work will also give you the opportunity to interact with other people with different perspectives and how those perspectives integrate into the project.

The third (3) area is met by having your team develop an idea for a web application that relates to studies that you have completed in prior coursework or other real-world scenarios. In particular, your application must address:

1. Challenging questions - both as part of the technical work as well as in the context of the problem domain the application is trying to solve. For example, if your application is helping bridging the salary gap for women in the workplace, what are the difficult questions that arise as part of developing a web application.
2. Real-World problems - your application must address a real-world problem. That is, you can’t simply design and implement a card game, it must address a real-world issue that could have potential real-world impact.

Project Demonstration

All teams will provide a demonstration of their application on the last day of class. Everyone in class will have the opportunity to walk around to each demonstration and have a brief (2 minute) opportunity to see the work that your team has accomplished. You will be required to fill out a short survey reflecting on each project. Your demonstration will include a 8.5 x 11 mini-poster that will allow visitors to understand the context of your project. A template will be provided before the demo day.

Project Scoring

This project will be scored across several dimensions including:

• In class team attendance and observed team work.
• In class team status reports.
• Adherence to the core technical requirements of the project.
• Adherence to the topic technical requirements of the project.
• Organized Github repository containing a README.md describing your project.
• Adherence to the integrative experience requirements of the project.
• Weekly stand-up meetings recorded with an assigned UCA.
• Technical demonstration and presentation during demo day.