CS373: Software Engineering



Project #2: IDB1

Specification

  • Create a cross-platform, responsive, Web app that emulates IMDB to provide helpful information about some topic.
  • The project must meet several criteria.
    • must be unique, first come, first served
    • must have at least three data sources that can be programmatically scraped (at least one must be a RESTful API)
    • must promote civic engagement about an underserved community
    • must have at least three models
    • each model must be connected to at least two other models
    • every instance of each model must be rich with different media (e.g., feeds, images, maps, text, videos, etc.) (be very sure about this)
  • This is a group project with four phases and only one public repo will be used across all phases.
  • The group must collaborate using:
  • 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.

Submission

  • create a public code repo, https://gitlab.com/GitLab-ID/cs373-group-N/
  • enable issues here: Settings -> General -> Visibility, project features, permissions -> Issues
  • create issue labels here: Manage -> Labels (labels are case sensitive)
  • create issues
  • add and close new issues as you debug and develop your solution
  • provide your GitLab URL on the Canvas assignment

AI Report

  • Summary of AI Interactions
    • List the tools used (e.g., ChatGPT, Copilot, etc.).
    • Debugging help (error explanation, bug location, runtime issue)
    • Conceptual clarification (CS concept, syntax, algorithm idea)
    • Code improvement (style, efficiency, readability, testing)
    • Alternative approaches (asking “is there a simpler way?”)
    • Other (describe)
  • Reflection on Use
    • What specific improvements to your code or understanding came from this AI interaction?
    • How did you decide what to keep or ignore from the AI’s suggestions?
    • Did the AI ever produce an incorrect or misleading suggestion? How did you detect that?
  • Evidence of Independent Work
    • Paste a before-and-after snippet (3–5 lines max) showing where you changed your own code in response to AI guidance.
    • In 2–3 sentences, explain what you learned by making this change.
  • Integrity Statement
    • "I confirm that the AI was used only as a helper (explainer, debugger, reviewer) and not as a code generator. All code submitted is my own work."
  • put it on GitLab as a IDB.ai.md

Phase I

  • provide at least five user stories to your developer and put them on their GitLab issue boards with the Customer label
  • collect data on three instances of each model (at least one must be a RESTful API)
  • design a RESTful API using Postman
  • create a static website with at least 14 pages hosted on Amazon Web Services (AWS)
  • It is your responsibility to not outspend the free credits on either of those systems.
  • your site must support https
  • derive the stats on the About page, dynamically, from GitLab
  • use Bootstrap or something similar as a CSS framework
  • obtain a pretty URL from a hostname provider (e.g., Namecheap).
  • write a technical report using Grammarly and put it on GitLab as IDB.tr.md

Phase II

Phase III

  • provide an assessment and at least five more user stories for your developer and put them on their GitLab issue boards with the Customer label
  • refine the data on many instances of each model
  • refine the a RESTful API using Postman
  • refine the dynamic website with many 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.
  • add filtering, searching, and sorting to all of 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 unit tests of the RESTful API using Postman
  • refine the unit tests of the JavaScript code using Mocha or Jest
  • refine the unit tests of the Python code using unittest or PyTest
  • refine the acceptance tests of the GUI using Selenium
  • refine the technical report using Grammarly and put it on GitLab as a IDB.tr.md
  • create a DB diagram using DB Diagram and put it on GitLab as a IDB.db.pdf

Phase IV

  • refactor, refactor, refactor!!!
  • make the code as pretty inside as it is outside
  • provide critiques about your site and your developer's site
  • create at least three visualizations (each of a different type) of your site using D3 or Recharts
  • create at least three visualizations (each of a different type) of your developer's site using D3 or Recharts
  • create a PechaKucha presentation

Groups

  • The groups will be set up on Canvas.
  • The channels will be set up on Slack.
  • Pick a different project leader for each phase.

Pages

Page Features
Navbar

every page

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

one page

  • make it beautiful (e.g., a slideshow)
  • with a way to navigate among the pages
  • with useful introduction to the site
Models

at least three pages
one for each model

  • grid of all of the instances of that model
  • with at least nine instances per page (visible without scrolling)
  • with at least five attributes of that model, showing
  • attributes must be filterable and sortable
  • page must show total number of instances and pages
  • with links to those instances
Model #1

many pages
one for each instance
must have at least 50 instances

  • data
  • external links
  • embedded images (e.g., Google)
  • embedded videos (e.g., YouTube)
  • embedded maps (e.g., Google Maps)
  • embedded social network feeds (e.g., Twitter)
  • must have at least two of the above media
  • links to Model #2
  • links to Model #3
  • reuse instance formatting between models, if you can
Model #2

many pages
one for each instance
must have at least 100 instances

  • data
  • external links
  • embedded images (e.g., Google)
  • embedded videos (e.g., YouTube)
  • embedded maps (e.g., Google Maps)
  • embedded social network feeds (e.g., Twitter)
  • must have at least two of the above media
  • links to Model #1
  • links to Model #3
  • reuse instance formatting between models, if you can
Model #3

many pages
one for each instance
must have at least 150 instances

  • data
  • external links
  • embedded images (e.g., Google)
  • embedded videos (e.g., YouTube)
  • embedded maps (e.g., Google Maps)
  • embedded social network feeds (e.g., Twitter)
  • must have at least two of the above media
  • links to Model #1
  • links to Model #2
  • reuse instance formatting between models, if you can
About

one page

  • description of the site, its purpose, its intended users
  • 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
  • data
    • links to the data sources
    • description of how each was scraped
  • tools
    • tools used
    • describe their use
    • special focus on optional tools that were not required
  • a link to the GitLab repo
  • a link to the Postman API

Peer Reviews

  • You will peer review each of your teammates on CATME.

Critiques (on the Visualizations page) (Phase IV)

Self Critique
  • What did we do well?
  • What did we learn?
  • What did we teach each other?
  • What can we do better?
  • What effect did the peer reviews have?
  • What puzzles us?
Other Critique
  • What did they do well?
  • How effective was their RESTful API?
  • How well did they implement your user stories?
  • What did we learn from their website?
  • What can they do better?
  • What puzzles us about their website?

Presentations (Phase IV)

Section Features
Introduction
  • 1 min
  • Every member must participate.
  • Each member introduces themselves and explains what their contribution was.
Demonstration
  • 4 min
  • Every member must participate.
  • Navigate.
  • Filter.
  • Search.
  • Sort.
  • Visualizations.
PechaKucha
  • 7 min
  • Every member must participate.
  • Educate us about your underserved community.
  • 20 slides, 20 seconds per slide.

Presentation order will be from the Canvas groups

  • Group N
  • Group N-1
  • ...
  • Group 1

Resources

  • if you discover other useful resources, please post them on Ed Discussion

Rubrics

Assets I II III IV
1. Build Files
  • .gitignore
  • .gitlab-ci.yml
  • makefile
  • README
    • name, EID, and GitLab-ID, of all members
    • Git SHA
    • project leader
    • link to GitLab pipelines
    • link to website
    • estimated completion time for each member (hours: int)
    • actual completion time for each member (hours: int)
    • comments
  • GitLab
 X X X X
2. Issues
  • you must use issue labels (e.g., Backend, Customer, Frontend, Grader, etc.)
  • GitLab issue boards
 X X X X
3. User Stories 5 user stories 10 user stories 15 user stories
4. RESTful API X X X X
5. Backend Server X X X
6. Frontend Server X X X
7. Tests X X X
8. Website X X X X
9. About Page
  • description
  • members
  • stats (automated)
  • data sources
  • tools
  • GitLab URL
  • Postman URL
 X X X X
10. Model Pages
  • grid of instances
  • at least nine instances per page
  • at least five attributes of each instance
  • number of pages and instances
  • next/previous page
  • first/last page
 X X X X
11. Instance Pages
  • lots of text
  • embedded multimedia
  • links to other instances of other models
 X X X X
12. Technical Report
  • motivation
  • user stories
  • RESTful API
  • models
  • tools
  • hosting
  • the audience comprises other software developers, as opposed to users
  • format the report clearly, attractively, and consistently, using good sections, multiple pages, good headers, figures, and grammar
  • as a IDB.tr.md
  • Grammarly
  • GitLab
 X X X X
13. Critizues and Visualizations
  • on the website
 X
14. DB/UML diagram X X X
15. Presentation X
16. AI Report X X X X

Copyright © Glenn P. Downing, 2008-2025
Updated 16 Sep 2025