CS373

CS373: Software Engineering

Fall 2024: 50615 (57)
26 Aug - 9 Dec 2024

Project #2: IDB1

Due: Wed, 2 Oct, 11:59 pm
adapt IDB1 Issues
adapt IDB2 Issues
adapt IDB3 Issues
adapt IDB3 Issues

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/GitLabID/cs373-group-N/
enable issues here: Settings -> General -> Visibility, project features, permissions -> Issues
create the following issue labels here: Issues -> New Issue -> Labels -> Manage project labels (labels are case sensitive):
- apis (Carrot orange)
- build (Titanium yellow)
- code (Dark violet)
- documentation (Gray)
- stories (Dark sea green)
- tests (Dark coral)
close all provided issues
add and close new issues as you debug and develop your solution
provide your GitLab URL on the Canvas assignment

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 a PDF

Phase II

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
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)
It is your responsibility to not outspend the free credits on either of those systems.
use MySQL or PostgreSQL as a DB
use Python, Flask, Flask-Restless-NG, SQLAlchemy as a Web framework for the backend server using Docker
use JavaScript and React as a GUI framework for the frontend server using Docker
the backend server must provide a RESTful API and the frontend server must consume that RESTful API
add pagination to the model pages
create unit tests of the RESTful API using Postman
create unit tests of the JavaScript code using Mocha or Jest
create unit tests of the Python code using unittest or PyTest
create acceptance tests of the GUI using Selenium
refine the technical report using Grammarly and put it on GitLab as a PDF
add the documentation of the RESTful API to the technical report
create a UML diagram using PlantUML and put it on GitLab as a PNG

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 PDF
create a DB diagram using DB Diagram and put it on GitLab as a 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
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
issues you must use issue labels (e.g., Backend, Customer, Frontend, Grader, etc.) GitLab issue boards	40+5 closed issues	40+5 closed issues	40+5 closed issues	40+5 closed issues
user stories described in three sentences estimate them, include assumptions discuss them refine the estimates implement them track how long each took see https://www.mountaingoatsoftware.com/agile/user-stories/ see https://www.alexandercowan.com/best-agile-user-story/ GitLab issue boards	5 user stories	10 user stories	15 user stories
RESTful API Postman	X	X	X	X
backend server backend/main.py must provide a RESTful API formatted with black create a Docker image for backend development GitLab		X	X	X
frontend server frontend/index.js must consume the RESTful API (above) create a Docker image for frontend development GitLab		X	X	X
tests frontend/tests.js (Mocha or Jest) frontend/guitests.py (Selenium) backend/tests.py (unittest or PyTest) Postman.json (Postman) GitLab CI		X	X	X
website https://www.website.me https://api.website.me Amazon Web Services (AWS) It is your responsibility to not outspend the free credits on either of those systems. Google Cloud Platform (GCP)	X	X	X	X
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 PDF Grammarly GitLab	X	X	X	X
critizues and visualizations on the website				X
DB/UML diagram as a PDF/PNG DB Diagram PlantUML GitLab		X	X	X
presentation				X