You will work in instructor-assigned teams to complete this semester-long project.
Overview
Working in instructor-assigned teams, you will design, develop, and deploy a full-stack web application. The application must support user account creation, persist per-user data relevant to user authentication and to your app’s requirements in a database, and must serve a frontend to users.
Evaluation
Process and Participation: 50% of the grade for the semester project will be based on your completion of your planned tasks in each of 3 2-week sprints.
Product: 50% of the grade for the semester project will be based on the final product.
Process and Participation
Your team will use a provided GitHub repository and associate task board (GitHub calls the task board a “project”).
You will be expected to use the task board to plan and track your work, and to use the repository to manage your code.
You will use the milestone feature to describe the theme/goal of each sprint.
You will be expected to use the repository’s issue tracker to report and track bugs and feature requests.
Your individual grade for each sprint will directly reflect your participation in the team’s planning and tracking of work, and your completion of your planned tasks.
Product
Each grading tier below requires the project satisfy the requirements of “lower” tiers (presented subsequently below, in ascending order).
C
Deploying a functioning and minimal repurposing of a full-stack web application we have done in class the supports user account creation, persists per-user data relevant to user authentication and to your app’s requirements in a database, and serves a frontend to users that is differentiated depending on whether they are authenticated and as whom they are authenticated is the minimum requirement for a C.
B
Requires at least the C requirements be met first and then…
Developing and deploying a functioning full-stack web application that implements something different than the examples provided and developed as a class (some possible candidates are enumerated in the “Possible Projects” page), but requires only the topics covered in our text book and additional required readings (“preps”) is the minimum requirement for a B.
A
Requires at least the B requirements be met first and then…
The full-stack web application requires you to learn new topics and technologies not covered in our text book and additional required readings (“preps”). You will identify this topic/tech (some suggestions follow in the “Stretch Topics” page) in the planning phase and prepare a brief lightning talk to introduce the subject to the class.
1 - Possible Project Ideas
Please feel encouraged to select a project from the list below, to propose a riff on one of these, or to propose your own idea.
This page is under construction, and undergoing frequent updates. Please check back soon for more ideas. If an idea has no “client” it doesn’t mean no one cares, it means it’s the default care-a-lot: Dr. Stewart.
1. Scanner/Gallery
Some parents/guardians have kids/charges/wards. In some of these contexts, those children may create a lot of art or other artifacts that demonstrate their recent schoolwork. What if there was a web app that kids could use on a tablet that:
Made it super simple for them to take a picture of/scan their art/work
evaporated it into a cloud
autotagged with simple things (e.g. date/time)
provided a view that cycled through the collection of art/work in and interesting way
show recent things more often, and older things slightly less often
assumes there are several displays near each other and shows things that go together or animates the transition of a photo from 1 display to the next
could have a way to pause, skip, remove from the rotation, decrease the frequency, increase the frequency
could have the ability to setup pre-planned themes
1. show things from approximately this date range in previous years around this time
1. show things on a certain topic/photos with certain content/objects
1. show photos that are tagged as “from” a particular kid or featuring that kid e.g. on their brithday, or while they’re viewing it
Stretch Topic
3P APIs
Fun namestorming
Home 🍳 Skillet Stash Gallery
min-hoard
Hoarding 101
DigiHoard
Wezibit
Artifactory
2. Bin It!
game for learning html
binning text/content fragments into different html buckets like:
swipe left/right style?
or 4-8 home row bins?
or like loads a known page or screenshot of page and highlights a region and the learner presses the corresponding key on the keyboard to categorize how they might mark the item up. is it:
main
article
section
aside
nav
header
footer
h1-6
p
a
img
ul
ol
dl
li…
3. Xylophone library
users can create (and publish) xylophone designs (maybe some textual properties to describe, maybe a photo as well) it shoudl also know how many keys it has, what colors they are, whether/how they’re labeled, what approximate notes they are, maybe the app helps them identify the notes by listening through mic
the users can search (and crate/publish) songs that can be played if someone has a certain set of notes
once the app knows which notes they have and how they appear on the xylophone, the app can display the songs to learn/play in a way that matches the user’s own xylophone
the app can also help the user learn to play the songs by showing the notes/highlighting the keys on screen as they should be played and maybe even playing the notes for the user to mimic
You know how all these sheeple bow to the tyranny of the decimal system, and celebrate like 1-year anniversaries in their relationship or community or workplace or whatever, and then maybe it’s a big deal to hit 5, 10, 20 years? Yeah? Well, those years aren’t even special! How about I celebrate when I’ve been in a relationship for 1/16 OF.MY.LIFE?! 1/4? 1/2 (i.e. longer than I wasn’t)?
How about I give you a date (1st date? facebook status changed? tinder account hibernate? nvm that’s mono-normative I guess) and a reference point (date of birth), and you calculate the the future dates that correspond to different functions of time.
user can add future functions?
1/2s
log?/exp?
else?
user can add dates of interest with corresponding reference dates
app calculates the future dates that correspond to the functions of time for those dates of interest/reference dates
app offers to add them to the google/outlook/thunderbird calendar
5. eldood
The “reverse” of a “doodle” (i.e. scheduling) poll. Rather than the initiator trying to find a time when the maximum number of respondents can attend all together, they wish to schedule the respondents in to mutually exclusive times in the initiator’s availability such that they are able to schedule the maximum number of respondents.
Examples
prof wants to schedule 1:1s with 90 students over the course of a few weeks.
fancy pants conference rooms has some feature that makes it much better for presenting/working/whatever. every group that would like to reserve the room responds to the poll with their availability and the application schedules them into the room such that the most groups get to use the room
Something something game theory and mixed/counter incentives
Maybe like when solutions are impossible certain respondents can be deprioritized (those with the fewest availabilities woudl sort of prevent the bad behavior of people only giving 1 time, but that would also pretty much eliminate the usefulness of this app, which can otherwise surface that fact that some folks are just legitimately more scheduled during the resource’s availability and perhaps by giving them the only time they can make, the system can schedule more people… else?)
6. multi-video transcription app
In qualitative data analysis in HCI research for example, sometimes video of participants in a research study will be used to support transcription (computers are helping majorly these days) and/or “coding” (tagging moments or time ranges of a video with a label, “annotating”).
In many cases there may be several video sources that actually coincide in time (e.g. 3 camera angles on the group in the lab, and if each was using a laptop, 3 videos of their screens). It might be nice to have an app that could facilitate lining these up in time, and then playing/pausing, rewinding them all in sync, and would tie the transcription and coding to the times in the video.
7. crowd sourcing audio/video route walkthroughs
Have you seen google street view? Can we crowdsource it? What if you took a video of your walk to work, home, grocery store, between classes? Then someone who hasn’t been to the place could watch the video or travel the same route along with the video.
In particular, this might be interesting to people who are blind or visually impaired, especially if they have learned or are practicing with auditory object perception. They could use the app to learn a route before they go, or to experience a place they’ve never been.
8. milestone countdown
I’ll project this thing in my class, or at the club/concert, or some event.
I’ll put in the itinerary and it will show some nice visualization/timeline that updates as the time passes/event progresses.
9. google calendar zipper
Google Calendars let me publish a feed of a calendar, but if I use several calendars to organize my events, and I want someone to be able to see my availability, they need to know about all the calendars. Let me sync in to your app and authorize you to work with my calendar, then you show me the list of calendars, I select which ones, and you re-publish a single calendar feed that aggregates all the selected calendars. (see how there’re different colors on this calendar? https://hcientist.com/contact/ )
10. app to (re)instantiate “plans” in our calendar
Say I’m going to travel to a conference, I need to do a predictable set/sequence of things, many relative to the date of departure/return. How about I add these tasks to a list/template in my account on your app, then when I tell you the start date or whatever parameters, and you copy those tasks onto my (e.g. google) calendar at the correct dates/times
Other Examples
cleaning up for visitors
going on vacation
preparing for career fair
11. make a gantt(?) chart from canvas assignments
…
12. Canvas prof hub
Prof auths to app with canvas credentials, can execute tasks that are not supported by canvas in its GUI.
13. fav character soundboard
users can add some character from whatever thing in their life (their wacky friend, that donkey from shrek, whatever)
to their character they can add sound files with a relatively short label
app displays huge buttons labeled with the provided labels above and when clicked it plays the associated sound file
14. Ethilogical
Continue past work on research in teaching CS+Ethics and the ACM code of ethics (Dr. Kirkpatrick + Dr. Stewart + students):
make an app in which students take on the role of app store reviewers presented with applications for admission/publication to the app store, and the student should approve or reject and should justify their decision in part with support from the ACM code of ethics.
15. Yo I’ll Solve It
user adds a set of resources
with user-defined properties
user can characterize the property as (at least) the below (adapted from https://groupeng.org)
user adds a set of candidates
with user-defined properties
user specifies a range of how candidates can be assigned a single resource (1? 3? 2-4?)
app tries to assign resources to the candidates
Candidate property categories
This is adapted from groupeng
Distribute: Spread candidates with this property across all candidate-resource assignemnts so that resource has about the same number of candidates with this property
Aggregate: Assign candidates with some property to the same resource as each other
Cluster: Ensure that candidates with some attribute are not isolated in a set of candidates assigned to a resource
Balance: Ensure equal strength across sets-of-candidate-assigned-the-same-resource based on some numeric score (as a function of candidate properties)
Examples
I imagine this could be a general app that would actually solve:
Assigning employees (eg TAs) to shifts based on the need # of people per shift and the students availablity
Assigning students in a course into project teams based on how they responded to a survey about their preferences, e.g.:
availability
Mondays 8-10am
Mondays 10am-12pm
Mondays 12pm-2pm
Mondays 2-4pm
…
top 5 project ideas
top 5 stretch topics
your goal for the project (C, B, A)
people you need to not work with
people you prefer to work with
working style (start early, start late)
Namestorming
“99probs”?
Problematic
Problematizer
Framer
16. cooking quest
start with the fewest staples and equipment (prescriptive), and the simplest techniques and recipes, then when ready like level up and buy just these few or those few ingredients or equipment and unlock this other set of recipes or go a different route
17. course planner
Help students who can’t make it in to meet with their advisor or who have, but now have collaborated with their advisor.
System helps student choose a template (starting CS 149 in Spring sem of sophomore)
student selects courses they intend to take and when (which semester) for all remaining semesters
system can give suggestions
courses maybe don’t take together
courses offered infrequently/irregularly (maybe don’t count on them in plan)
taking 261? have you considered joining UUG?
18. TSP Local Sights
add POIs in a city, get a (driving?) route informed by tsp … more soon…
“The project involves recommending the shortest travel path for visitors to Harrisonburg. The webpage should enable visitors to select the sites they plan to visit, run the algorithm backend to find the shortest path, and display the path on Google Maps.”
Client(s) (other than Dr. Stewart)
Dr. Duan
Spotify
19. Spotify Party Mode
Show a visualizer, as well as current track metadata
20. Everything is a Remix
Select (with some humane UX) millisecond ranges of spotify tracks and play them together (one after the other)
Namestorming
smashify
spotimix (maybe taken)?
mixify?
spotismash?
spotimash?
reify (omg i love that!)
21. spotify discovery
find bands “adjacent” to my favorite bands, then find songs by those bands with >10K(?) plays … more soon…
22. Spotreon
have users auth with spotify
have them give you a credit card or paypal or something and pay you monthly (whatever they can afford)
as Jack Stratton says in the embedded video below, divide the money up among the artists they listen to.
23. SpotiTrack
have me auth with spotify and github
commit to github the playlists I follow.
with some frequency (daily?) check attempt to commit the change to those playlists to github (sometimes no change, that’s fine, no new commit)
24. JMU Coin Museum Web App
… more soon…
Client(s) (other than Dr. Stewart)
Dr. Forsyth
25. Who Dat?
Sort of flashcards/quizzing to help learn peoples names/face for profs, clubs, whatever.
I'd like something to help me both take attendance AND memorize students' names. It should allow me to upload a roster, photos, enter students' preferred names, their pronouns, tell me if multiple students have the same first name and subsequently display their last names too (so I don't say John and get three people respond), etc. I want to use it in-class so I have a better way of taking attendance than relying on paper or Canvas' attendance feature.
Outside of class, the app should also have the ability to show “flashcards” of either the student’s face or name and I need to select the matching face/name. This will help me memorize my students’ names.
Client(s) (other than Dr. Stewart)
Dr. I. Wang
Dr. Stewart
Dr. Johnson
26. Roanoke/Historical map thing
open app on mobile while i’m at a place
show a historical map of the place and my position as i walk around
parse recipes into steps and make a flow chart-like dependency tree for distributing tasks across multiple helpers etc. … more soon…
29. peer instruction
I would like a free and open source, easy-to-use tool for doing peer instruction. I want to write questions in Markdown and have students connect with a QR code and be able to do peer instruction in class without having to use Mentimeter, Slido, Runestone, or whatever. Ideally the tool would support the traditional workflow of students answering the same question twice, once before and after discussion with their peers.
Facilitators (e.g. teachers) pose a discussion prompt to participants (e.g. students), who respond anonymously. Facilitator optionally shows the collected responses (or “thoughts”) on a shared screen, and optionally “distributes” the “thoughts” such that participants end up with a different “thought” than they started with. Then in small groups, participants discuss the prompt from the position/“thought” they were assigned/distributed by the system.
Dr. Bowers currently uses a bunch of things (including e.g. zwift and https://intervals.icu/ ) for his cycling.
Much of the data that he gets right now is for post-hoc analysis, but he wants something that is more toward planning the ride in advance:
Input:
Rider’s biometrics of many kinds and past performance data
an intended route to bike
elevation along the route
division of the route into “segments”
intended power (wattage) for that segment
process: simulate the rider with the past performance data and biometrics and attempting the planned wattage
extra: interface that is used during the ride to tell the cyclist that in the current segment/position, they’re supposed to be aiming for a particular wattage, maybe showing them whether they’re +/- the time estimate from the plan
Client (other than Dr. Stewart)
Dr. Bowers
32. Bike Transit Map
Dr. Bowers wants to be able to create a map of a community (e.g. Harrisonburg) that encodes vetted/safe/efficient bike routes.
Then a visitor to the app, planning their ride would tell the thing the begin and end, and the app would try to keep them on the vetted routes as much as possible.
Client (other than Dr. Stewart)
Dr. Bowers
33. Office Hours Queue
Profs can create accounts
Students scan qr code or click link or whatever and are enqueued
students can see their position in the q (like a restaurant table tracker thing)
student gets Push notification when the person before them gets their turn
Facilitates students working in comfort while waiting for their turn in office hours
Section 1 Student Project Idea Submissions
S1A: Matt W.’s DigitalDipole - A General Chemistry Toolkit ⚛️⚗️
Possible Stretch Topics
React (to make code cleaner, especially for dynamic changing/‘generation’ of math markup)
WebGL (to render simple molecular geometries?)
threejs (‘interactive’ molecule renders)
3rd party API’s with auth (AI chem meme generator would be one)
Description
A full-stack web app that aims to be a chemistry educational tool.
It will have a “thick” client/frontend which we will write in React.
It will also have a backend, which will be written in Python, using Django.
It will feature calculators for various common chemistry problems,
such as the myriad gas laws, limiting reagents & yields,
solutions stoichiometry, thermochemistry & voltaic cells, and more.
While those may sound daunting, the math generally doesn’t extend beyond a calculus I level.
In the majority of the cases, it is simple algebraic manipulation.
No chemistry knowledge or background is necessarily required.
Name and domains
Regarding the name of the app, I own the domain digitaldipole.io,
and several others I have been considering, like radicalvalence.com and canonicallychiral.io.
If you have name ideas I am totally open to those too!!
This project has already been started, however the goal is to rewrite using React for the frontend,
as some of the math markup (just
🎥 Demo Videos and Sample AI Meme Output (!?)
There are brief demo videos linked in the folder below. One clip shows the page for (ideal) gas law calculators and the dynamically updating math markup to respond to the user’s unknown quantity. Another shows an ‘Atom Carousel’ that tabulates an element’s data in a carousel of color coded (by group on periodic table) ‘atom cards’. You can jump-to specific atoms by inputting their atomic #, name in U.S. english, or atomic symbol.
It’s not all super serious though, as you’ll see there is an AI chemistry meme generator, and it requires 3rd party API w/ auth.
An example meme is in the folder as well; that particular meme’s input was from the MadLibs version I started to write, and the string was;
“Dad’s DeBroglie Wavelength aerosolized a beaker full of benzene during the heat death of the universe”.
I was interested in creating some sort of game using spotify’s api thats similar to beat shazam,
where you name the artist and title of a song playing.
I’m not sure how I was would implement this however- it’s just an idea right now.
If this proves to be too complicated, I’d like to make some sort of social media for spotify where people can make posts about their listening and connect with friends.
Possible Stretch Topics
interacting with the spotify api
S2C: Hudson S.’s Web of Documents (WOD)
“When taking notes for any topic, keeping them in 1 document is unwieldy,
and keeping them in multiple documents is often difficult to keep track of.
WOD proposes the solution of many interlinked documents.
Txt files
Clickable links between different txt files
Viewable web of documents
Graph representation (points with variable number of edges)
Multiple “root” documents
Documents do not require connections to other documents
In-app tabs?
Embedding image?
If an example is needed to help visualize it.
Look up Obsidian, its a desktop app that I’m hoping to recreate on the web.”
Possible Stretch Topics
React
File System API
2 - Example Stretch Topics
Please feel encouraged to select a stretch topic from the list below or to propose your own topic.