Project Overview

Purpose: This project allows you to use your creativity, apply web development concepts and usability theories to develop a dynamic web application. To help you prepare for your career and build your profile, you will choose what you want to build, with the project requirements constraining the features that must be used.

Description

In practice, a web application is usually developed by teams of developers with diverse expertise. A web application can be developed from and consist of multiple diverse, distributed, and dynamically generated web components. They implement different parts of the application’s functionality and interact with each other to provide services to the users. To have experience in web software development, you will work in team and implement web components using several languages and technologies (full-stack).

Over the semester, you will learn how to use both client facing and backend languages and technologies to make a web application. You will work on each project sprint with a partner, and over the course of the semester, build a dynamic web application piece by piece. To maintain some cohesion between each sprint–and leave you with a final, portfolio-worthy deliverable–you will decide on your project’s concept. You and your partner will define your own project based on something that is interesting to your team. (Be creative!)

To give you an overview, the following diagram shows the order of components in which you will be working on, which follows our overall class discussions. Details and submission information will be provided on the assignment pages as each sprint approaches.

It is important to note that the following image simply shows the order and the specific technologies you will implement. It does not show the architecture of the system. You may design your system using any software architectural styles (discussed in class) as long as your system consists of web components implemented with all the required languages and technologies.

Sprints

• (40 points) Sprint 1: Project proposal and UI design
  • Form a team of 2
  • Decide on a project concept (be creative!)
  • Define at least 3 functionalities, services, or scenarios your project will provide. Later, you will have the opportunity to implement each of these functionalities using client-side and server-side components
  • For each functionality, service, or scenario:
    • Write a brief description explaining its purpose, what it does, how the users will use it, and what the users can expect from using it
    • Design a user interface, including all necessary elements, and justify your design decision
• (100 points) Sprint 2: Client-side Design (HTML/CSS)
  • Transform your UI design (from Assignment 1) into web pages
  • Create web pages using HTML, CSS, bootstrap that will be part of your project
  • Host your app on our CS4640 server
  • Optional: Host your app on Google Cloud Platform (GCP)
• (160 points) Sprint 3: Server-side Components (PHP/SQL)
  • Implement at least one server-side web component written in PHP that interacts with the client-side to perform at least one functionality of your project.
  • Implement state handling to support multiple users
  • Manipulate and persist data (using a database) to support multiple sessions and thus returning users can access and modify their existing information
  • Host your app on our CS4640 server
  • Optional: Host your app on Google Cloud Platform (GCP)
• (160 points) Sprint 4: Client-side Scripting and Server-side integration
  • Add Javascript to your web pages
  • Include dynamic behavior, client-side input validation, and DOM manipulation to modify the pages according to the user’s inputs or the application’s current states
  • Modify or enhance server-side functionality to add JSON responses along with HTML
  • Perform AJAX queries in the client to improve interaction and usability
  • Host your app on our CS4640 server
  • Optional: Host your app on Google Cloud Platform (GCP)
• (180 points) Sprint 5: Final deliverable
  • Fulfill the project requirements
  • Implement at least one Angular component to serve as a front-end component that interacts with at least one of the back-end components (consumes JSON from Sprint 4)
  • Host your app on our CS4640 server
  • Optional: Host your app on Google Cloud Platform (GCP)

At the end of the semester, we will have project presentations before the class and vote for a few titles: “best usable” project and “coolest” project

Remember to be creative and have fun! Use this opportunity, within the constraints of the project requirements, to format your project as you’d like and add any additional elements you feel should be included.

Note: it is wise to use version control, such as git, to keep your project backed up

A note about the project

Common questions about a project such as ours are:

• “Why do we design the project this way?”
• “Can’t we use a single technology or language?”
• “Can’t we do a single page application, with frontend only, no backend?”

In real life, yes – this is possible and very common. Many phone-based applications are single-page apps. However, in this class, no – our goal is to experience multiple languages, different design patterns (front-end, back-end), and build a foundation for web development.

We want students to learn the underlying concepts of web development, be exposed to as many technologies and languages as possible, experience both frontend and backend components, and be able to integrate diverse web components to create a system. Several companies have visited our department and pointed out that they preferred the ability to apply fundamental knowledge and work with several new technologies they might use. To response to the job market, this class intentionally designs an overview of the project under the above constraints. The ultimate goal of this project is that students have hands-on experience with several technologies and are able to make these components interact with each other to provide services.

Special Helper Extra Credit

1 point for each project helped, up to 10 (total) extra project points

For each sprint, if you get help from your classmates (excluding your project partner), when you submit yoru assignment, please make a note (helper.txt) that:

• clearly specifies the name(s) and computing id(s) of your special helper(s), and
• clearly and briefly describe what and how you were helped. If you had multiple helpers, please specify their names and what/how they helped you explicitly. If you do not acknowledge and report your special helper(s), they will not receive extra credit.

Note: Extra points will not be awarded if any of the above information is missing.