CS373: Software Engineering



Project #5: IDB4

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.

Phase IV

  • refactor, refactor, refactor!!!
  • make the code as pretty inside as it is outside
  • 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
  • provide critiques about your site and your developer's site on the visualizations pages
  • create a Natural Language Query System using Groq or OpenRouter.
  • create a presentation

Groups

  • The groups will be set up on Canvas.
  • The channels will be set up on Discord.
  • 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

three pages
one for each model

  • grid of cards
  • each card must have unique image
  • at least five attributes on each card
  • attributes must be filterable and sortable
  • page must show total number of instances and pages
  • cards link to those instances
Model #1

three pages
one for each instance

  • 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
  • cards to Model #2
  • cards to Model #3
  • reuse instance formatting between models, if you can
Model #2

three pages
one for each instance

  • 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
  • cards to Model #1
  • cards to Model #3
  • reuse instance formatting between models, if you can
Model #3

three pages
one for each instance

  • 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
  • cards to Model #1
  • cards 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
  • 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
Visualizations

two pages

  • self critique
    • three visualizations (each of a different type) of your site
    • 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?
  • developer's critique
    • three visualizations (each of a different type) of your developer's site
    • 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 (10 min)

Section Features
Introduction
  • Every member must participate.
  • Each member introduces themselves and explains what their contribution was.
  • Describe the underserved community are you helping.
Demonstration
  • Every member must participate.
  • navigation
  • filtering
  • searching
  • sorting
  • visualizations
  • critiques

Presentation order will be from the Canvas groups

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

Peer Reviews

README.md

  • Profile
    • Full Name
    • EID
    • GitLab ID
    • GitLab URL
    • GitLab Pipeline
    • Git SHA
    • HackerRank ID
    • Estimated completion time
    • Actual completion time
    • Comments
  • 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."
  • Technial 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
    • Grammarly

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
  • Canvas doesn’t support submitting Markdown files.
  • So, make a copy of README.md into README.md.txt.
  • Your README must contain your AI Report and your Technical Report.
  • Submit README.md.txt to the Canvas assignment.

Resources

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

Rubrics

Assets Location Points
1. Build Files
  • .gitignore
  • .gitlab-ci.yml
  • makefile
  • README.md
 5
2. Issues
  • at least 30 issues
  • you must use issue labels (e.g., Backend, Customer, Frontend, Grader, etc.)
  • GitLab Issues
 5
3. User Stories
  • GitLab Issues
 5
4. RESTful API 5
5. Backend Server
  • backend/main.py
 5
6. Frontend Server
  • frontend/index.js
 5
7. Tests 5
8. Website
  • custom domain namne
  • navbar
  • splash page
  • about page
  • model pages
  • instance pages
  • searching
  • search results must result in cards (exactly like in the model pages)
 5
9. About Page
  • description
  • members
  • stats (automated)
  • data sources
  • tools
  • GitLab URL
  • Postman URL
  • https://www.website.me
 5
10. Model Pages
  • three pages
  • grid of cards
  • at least nine cards per page
  • each card must have a unique image
  • five attributes for each card
  • number of cards
  • number of pages
  • pagination: next, previous. first, last
  • https://www.website.me
 5
11. Instance Pages
  • many pages
  • lots of text
  • embedded multimedia
  • links to other instances as cards (exactly like in the model pages)
  • https://www.website.me
 5
12. DB diagram
  • IDB.db.pdf
 5
13. UML diagram
  • IDB.uml
  • IDB.uml.svg
 5
14. AI Report
  • summary, reflection, evidence, integrity
  • README.md
 5
15. Technical Report
  • could another team takeover
  • README.md
 5
16. Critiques and Visualizations
  • https://www.website.me
 5
17. Presentation 10
18. Natural Language Query System 10

Copyright © cs373, 2008-2026
Updated 7 Apr 2026