Objectives
- Demonstrate mastery of many of the skills learned during the semester
- Extend the student's depth of understanding of web-based applications
- Gain experience in constructing and presenting a moderately large project
Introduction
This is a project for you to demonstrate what you've learned over the semester. You will be working in groups of two or three students. Each group should come up with an idea of a web application that is of practical use to you and potentially many other users sharing the same interest.
To help you with ideas, you can either borrow ideas from existing web applications. Also, using ideas from existing mobile applications may be helpful since most companies/businesses keep both mobile and web presence of their products.
Important
- Please understand that you are building a web application, NOT a web page.
- The objective of this semester project to demonstrate your mastery of the topics covered in the class throughout the semester. The web app you develop must demonstrate originality in design and contents. It is relatively easy to find online tutorials for developing web apps, and you are encouraged to learn from such tutorials. However, it is not acceptable to submit the app developed in the tutorial to be graded as the semester project.
- Each person in the group must actively participate in contributing to the share code base. Active participation will be verified from the log data of the Git code repository
Overall Specification
In general, your web application should include the following features
- Allow users to login using personalized userid and password (or some other standard mechanism for login)
- Allow multiple authenticated users to use the application at the same time.
- Allow users to manipulate and use a centralized cloud database to store both personalized data (accessible only to individual user) and also data accessible to public or authenticated users using the application
Basic Application Architecture (80%)
Regardless of the specific topic selected by your group, your web application should include the following:
(15%) The overall features implemented by your web app should be complete and realistic enough so it mimics important features found in the real-world app that your web app is modeled after. For instance,
- a movie rental app is not complete without a feature to return rented movies
- a typical shopping app is not complete without the checkout and payment step
(10%) User authentication system (login/logout) to allow multiple users to use the webapp concurrently with other users.
(5%) The data of your web app should be stored on Firebase Cloud Firestore using at least two/three "collections", depending on your group size
TIP
If your group has three members, your app must use at least three Firestore collections so each group member has a chance to work on both the frontend and the backend.
(10%) Your Firebase collections should include at least the following two types:
- Private per-user data accessible only to its authenticated owner
- Shared data accessible to all users of your web app
The web app should be designed (using menu or other technique) that will take your users to a screen to see only their private information (something like browsing order history on Amazon)
(10%) You web app must demonstrate the four basic CRUD operations to the Cloud Firestore
(15 %) Use modern JavaScript front-end framework/libraries (VueJS or React) or other similar frameworks
(10%) Incorporate 2D or 3D charts to display your data
(5%) Use CSS to customize the visual styles of your web app
(-10% if missing) The project source files must be maintained as a git repository. There are several options to host git projects: BitBucket, GitHub, GitLab
IMPORTANT
Everyone in the group is expected to contribute equally to the project. The git commit log will be used to determine the individual grade of each group member. Based on the statistics calculated from the commit log, students who contribute less will receive a lower grade than the other students in the group.
Extra Credits
(5%) incorporate a 3rd party web service (relevant to your problem) into your web app to obtain "external" real-data (weather data, stock market, movie database, etc.). There are several portals that provide a directory of web services, such as
(5%) Incorporate a server component as the middleware between your web app and the multiple web services accessed by your app.
(5%) Use Firebase Cloud Messaging to send notifications to your users for important updates in your app. gistry.
Weekly Git Repository Progress (12%)
The semester project is designed to demonstrate various topics covered in the semester and its scope should be significantly larger than individual programming assignments which usually take 7-10 days to complete. In past semesters, students tend to push back working on the semester project only within the last week (or two weeks) of the class. Many of them did not turn out well, and were able to deliver only a bare minimum and unusable product.
To mitigate issue, you are encouraged to spread the total workload of the semester project by continuously making weekly progress. The git-log of your project will be inspected and used in calculating this portion of project grade.
Recorded Video Presentation (8%)
In place of a written final report, your group is required to prepare a video presentation of the project. If working in the group, also identify the group members and description of each member responsibilities and individual contributions to the overall project.
The overall purpose of the video presentation is to convince your instructor that your project satisfies all the criteria required above and it deserves to earn full credits. Since your instructor will not be able to engage in face-to-face communication when watching the video, be sure your video presentation is complete and clear so it would be easy for your instructor to try the features of your app.
Deliverables
Part I: The Proposal
Submit a one-page proposal your group is planning to develop. How much to include in the proposal? As a general guideline, imagine you are about to sell your web app idea to potential donors/investors. What important details you would include to convince these investors to finance your project? In addition, it should address all the bullet points mentioned in the "Application Architecture" section, such as:
The overview of the web application, what problems/tasks being addressed, what is unique about your web app, who are the potential users, and any other relevant information.
Describe how the work will be distributed among the members of your group.
Important
Each group member must demonstrate involvement in all aspects of the app development. It is not acceptable to have a member who, spend most of the time, for instance, on UI design only or final report only but not for the other aspects.
Rough design of your database "tables" and the details of each table. For now, describe the details of your DB design as if you would implement them using relational databases (similar to what you learn in CIS333 or CIS353). In reality, these "tables" will be implemented as Cloud Firestore collections/documents
Additional third party web-services that you plan to incorporate into the project (if any)
Part II: Application Development and Deployment
Deploy your web app on a publicly accessible web site
Upload your video presentation as a YouTube video (preferred) or keep the video in your Git repository
Upload the following information to Bb
- The publicly accessible URL of your web app
- If your web app requires special accounts (for instance, admin account) include the userid(s) and password(s)
- The URL of your Git repository
- The URL of your YouTube video presentation (preferrred)