Project IDB

Phase I
Due: Thu, 25 June 2026, 10pm
120 pts, 12% of total grade.

Phase II
Due: Thu, 9 July 2026, 10pm
120 pts, 12% of total grade.
  • Milestone 1: Backend : Due: Sat, 4 July 2026, 10pm
  • Milestone 2: Frontend: Due: Tue, 7 July 2026, 10pm

Phase III
Due: Thu, 16 July 2026, 10pm
120 pts, 12% 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.
  • design a RESTful API using Postman
  • derive the stats on the About page dynamically from GitLab
  • obtain a pretty URL from a hostname provider (e.g. Namecheap)
  • 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
  • refine and implement the RESTful API using Postman
  • 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
  • use JavaScript and React as a GUI framework for the frontend server
  • add pagination to the model pages
  • provide unit tests of the RESTful API using Postman
  • the backend server must provide a RESTful API and the frontend server must consume that RESTful API
  • create at least three unit tests for each model using Python unittest.
  • 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

Phase III

  • add filtering, searching, and sorting to the model pages
  • 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
  • create at least three visualizations of another group site using D3 or any other visualization tool (this is not required until you present)
  • create a presentation using any software (PowerPoint, Prezi and Slides), host it on SpeakDeck and provide 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
Introduction
  • 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 100 points. The remaining 20 points are Cooperation points.
  • During the submission process, each student will independently submit an evaluation form separately from the project submission.
  • In this form, you will distribute 20 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 cs373-idb.
  4. Invite the graders to your public 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 pdoc (not 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).
    Note 1: models.py contains the DB models of your project which will be implemented in Phase II. So, in Phase I, this file is just a place holder that may contain a comment about a brief description of the three models that you will implement.
    Note 2: you need to install pdoc 
    pip install pdoc
    then run 
    pdoc file.py
    This command will run a server containing the output on localhost:8080
  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, cs373-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 "Projectxevaluation.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
  Aanya Singh TBA
  Franklin Wright TBA