Project IDB

Phase I
Due: Wed, 21 Febrauray 2024, 10pm
100 pts, 10% of total grade.

Phase II
Due: Wed, 27 March 2024, 10pm
100 pts, 10% of total grade.

Phase III
Due: Wed, 10 April 2024, 10pm
100 pts, 10% of total grade.

Specification

Create a Web application that emulates IMDB to track a useful topic.

IMDB has two major kinds of pages: movies/shows and people. Movies/shows link to people and people link back to movies/shows. We will define each of these major pages as models. We will define relevant information about each model as attributes. In this project, you need to have at least three models, each with at least five attributes.

The models chosen must have a relationship with each other in order to link pages together. A simple example: Food Items, Recipes, Cuisines. The Food Items model could have the following attributes: item name, item picture, description, nutritional information, recipes that make use of the food item, and cuisines that make use of the food item. The latter two attributes can be linked to the model pages of specific recipes and cuisines, respectively.

For clarity, we will refer to the navigation between model pages via their attributes as model navigation (ex: Apple, a food item, to Apple Pie, a recipe). We will refer to the general navigation between all website pages as website navigation (ex: Landing Page to About Page).

This is a group project with three phases and only one PUBLIC repo will be used across all of the three phases.

The group must collaborate using Slack or Discord and it must be integrated with the GitLab repo.

For the purposes of grading, do not change the production website between the time that you submit it and the time that it is graded.

Phase I

  • create static pages hosted on Amazon Web Services (AWS) or Google Cloud Platform (GCP).
    • It is your responsibility to not outspend the free credits on either of those systems
  • collect at least three instances (data points) for each model using a RESTful API. Each model must have at least five columns of attributes.
  • derive the stats on the About page dynamically from GitLab or update them manually.
  • intuitive website navigation.
  • Write an initial technical report with at least 800 words using the GitLab Wiki.
  • use Bootstrap as a CSS framework.

Phase II

  • collect data on many instances of each model from sources with a RESTful API.
  • create a dynamic website with many pages hosted on Amazon Web Services (AWS) or Google Cloud Platform (GCP).
  • use MySQL or PostgreSQL as a DB.
  • use Python, Flask, SQLAlchemy as a Web framework for the backend server. For each model, create a database model to represent the data.
  • add pagination to the model pages.
  • create at least three unit tests for each model using Python unittest.
  • create a Postman collection for your preliminary API design.
  • add a link to your Postman collection from the About page.
  • refine the technical report to have at least 1,600 words by adding documentation of the DB.
  • create a UML class diagram of the models using yUML.
  • refine the splash page and the navigation.
    • Optional
  • use React as a GUI framework for the frontend server.
  • the backend server must provide a RESTful API and the frontend server must consume that RESTful API.

Phase III

  • add searching and sorting to the model pages (filtering is recommended but not required).
  • searching must be Google-like and handle many terms.
  • the search results must highlight the search terms and be categorized by model.
  • refine the technical report to have at least 2,400 words.
  • implement the API in your website. Test and document the API using Postman.
  • obtain a pretty URL from a hostname provider (e.g. Namecheap).
  • create a presentation using any software (PowerPoint, Prezi and Slides), host it on SpeakDeck and proivde a link to it on the About page (this is not required until you present).

Tutorials

Pages

Page Features
Navbar every page

  • Splash
  • About
  • Model #1
  • Model #2
  • Model #3
Splash one page

  • make it beautiful
  • with a way to navigate among the pages
About one page

  • the group name
  • the group members
  • for each member:
    • name
    • photo
    • bio
    • major responsibilities
    • no. of commits
    • no. of issues
    • no. of unit tests
  • stats:
    • total no. of commits
    • total no. of issues
    • total no. of unit tests
    • a link to the Postman API
    • a link to the GitLab Issue Tracker
    • a link to the GitLab Repo
    • a link to the GitLab Wiki
  • data:
    • links to the data sources
    • a link to your published postman collection
    • description of how each was scraped
  • tools:
    • tools used
Models for each model, a page that contains a
table (or cards) of all of the instances of that model
with at least five columns of attributes of that model
Ultimately with the ability to sort the table using any of the columns
in ascending or descending order. Each instance of the model should have a unique model page and have links to other instances of other models via its attributes. Eventually these instances should span many rows with pagination.
Model #1 many pages
one for each instance

  • data
  • external links
  • embedded images (e.g. Bing, Flickr, Google)
  • embedded videos (e.g. Bing, Google, Vimeo)
  • embedded maps (e.g. Google Maps)
  • embedded social network feeds (e.g. Facebook, Twitter)
  • links to Model #2
  • links to Model #3
Model #2 many pages
one for each instance

  • data
  • external links
  • embedded images (e.g. Bing, Flickr, Google)
  • embedded videos (e.g. Bing, Google, Vimeo)
  • embedded maps (e.g. Google Maps)
  • embedded social network feeds (e.g. Facebook, Twitter)
  • links to Model #1
  • links to Model #3
Model #3 many pages
one for each instance

  • data
  • external links
  • embedded images (e.g. Bing, Flickr, Google)
  • embedded videos (e.g. Bing, Google, Vimeo)
  • embedded maps (e.g. Google Maps)
  • embedded social network feeds (e.g. Facebook, Twitter)
    • embedded images (e.g. Bing, Flickr, Google)
  • links to Model #2
  • links to Model #3

Technical Report

Section Features
Title
  • The group name.
  • The group members.
Introduction
  • What is the problem?
  • What are the use cases?
Design
  • RESTful API
  • DB models
  • searching and filtering capabilities
Tools
  • front-end
  • back-end
  • embedding-media services
Hosting How do you set up the AWS or GCP server?
Other
  • Proof-read your report.
  • Create diagrams with captions.
  • Create sections and subsections effectively.

Presentation

Section Features
Introdcution
  • Every member must participate.
  • Each member introduces themselves and explains what their contribution was.
Demonstration
  • Navigation.
  • Search.
  • Show visualization
Self Critique
  • What did we do well?
  • What did we learn?
  • What can we do better?
  • What puzzles us?
Other Critique
  • What did they do well?
  • What did we learn from their website?
  • What can they do better?
  • What puzzles us about their website?
Presentation, critique and visualization orders will be posted on Piazza.

Cooperation Points

  • The content of this project is worth 90 points. The remaining 10 points are Cooperation points.
  • During the submission process, each student will independently submit an evaluation form seperately from the project submission.
  • In this form, you will distribute 10 points to your group members based on their contribution to the group.
  • Your cooperation score is the sum of all cooperation points assigned to you by your teammates.
  • You cannot give points to yourself.
  • You are free to discuss the point assignments with your teammates and collectively plan a fair distribution. However, your final point assignments are up to you.
  • If you do not submit your evaluation form, you will receive 0 cooperation points.
  • Your final course grade will drop 1/3 of a letter grade if, in every phase of the project, your average score of cooperation points is 50% or less.
  • Your comments about any team member and justifications for points granted will be anonymous.

Workflow

  1. Estimate time to completion.
  2. Get a GitLab account at GitLab.
  3. Create a PUBLIC code repo at GitLab, named cs331e-idb.
  4. Invite the graders to your privatepublic code repo as maintainers
  5. Clone your PUBLIC code repo onto your local directory.
  6. Create a dev branch in git (see git branching and merging)
  7. Only merge with the main after a successful build on GitLab CI
  8. Make at least 5 commits, one for each bug or feature.
    If you cannot describe your changes in a sentence, you are not committing often enough.
    Make meaningful commit messages identifying the corresponding issue in the issue tracker (see closing issues via commit messages).
  9. Add at least 10 issues from the requirements of each phase to the issue tracker at GitLab.
    Add at least 5 more issues, one for each bug or feature, with a good description and a label.
  10. Run pydoc on models.py, which will create models.html [ make models.html], that then documents the interfaces to your functions.
    Create inline comments if you need to explain the why of a particular implementation.
    Use a consistent coding convention with good variable names, good indentation, blank lines, and blank spaces (see Google Python Style Guide).
  11. Create a log of your commits in IDBn.log, where n is 1, 2 or 3 [ make IDBn.log].
  12. Obtain the git SHA with 
    git rev-parse HEAD
  13. Fill in the Canvas form.

Submission

The following must be provided. If anything is missing it will not be graded. You will be informed within 24 hrs if it is incomplete, and you will have 24 hrs to resubmit it. You must e-mail the graders when you resubmit it, and you will receive a one-day late penalty. If the resubmission is still broken this process will repeat and you'll lose another one-day penalty.

  1. Your PUBLIC code repo, cs331e-idb, with graders invited as maintainers and with the following:
    1. .gitignore
    2. .gitlab-ci.yml
    3. makefile
    4. IDBn.log, where n is 1, 2 or 3 (output of git log with at least 5 commits)
    5. models.html (output of pydoc)
    6. The files of your project
  2. GitLab issue tracker with at least 15 issues.
  3. Canvas form, namely "Projectx.json", where x is 2, 3 or 4, with time estimate by the group Leader.
  4. Canvas evaluation form, namely "Projectxevalutaion.json", where x is 2, 3 or 4, with Cooperation points by each group member including the leader.

Rubric

The rubric will be posted on Canvas at the beginning of each phase.

Graders

Name GitLab ID
  Harshul Rao Aech3
  Pranav Venkatesh Pranav-V