BlockScience Labs - Subway Map

Winter/Spring 22 Industry Project


The Team



The Project



Final Designs


Navigation Pane

  • When a user clicks on a branch, a dropdown lists all of its commits in the form of versions.
  • When a user clicks on a version, the Commits Pane isolates that particular commit and displays it to the user in addition to populating the details of the commit in the Version Properties Pane.

Commit Pane

  • Each row of a commit displays, the commit message and created date of the commit. By default, the commits are sorted in the order retrieved from GitHub.
  • For longer commit messages, they are cut off at a certain point with ellipses. Conversely, the shorter messages are displayed as long as they do not go past a certain limit.
  • When a user clicks on a commit, the details are populated in the Version Properties Pane.

Version Properties Pane

  • The pane is initially collapsed, but comes into view when a commit is selected in either the Commit Pane or a version from the Navigation Pane.
  • It contains the iteration number (version), branch name, created date, creator, and summary (allows the user to view the entire commit message).

Search and Filter-By-Time Bar

  • Search, specifically, allows users to type in keywords that stack (if more than one) to filter the commit messages.
  • Keywords in the commit messages.
  • If the keyword is a name, messages are filtered down to messages created by the author and the messages that contain the author’s name.
  • Filter-By-Time allows users to filter all commit messages from oldest to newest or newest to oldest. By default, they are sorted in the order they are retrieved from GitHub.

Redux Implementation

  • Repo Commits — The GitHub API is used to get all commits of a certain repository. This information is then passed to redux.
  • Filter Parameters — Should a user add filter parameters via the search bar, the inputted value is stored in redux. The filter parameters are then pulled from redux into the commit pane to live filter the commits
  • Selected Commit — Should a user select a commit, its metadata is passed to redux for the top and right panes. The top and right panes use this metadata to display their respective data

GitHub API

  • Get All Branches of a Repository
  • Use Branches to get all commits for each branch
  • Concatenate all the branch commits into one object

Takeaways & Challenges

Cross-Functional Teamwork and Communication

Learning from and Embracing Failure

AGILE Development



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodeLab UC Davis

CodeLab is a student-run software development and UX design agency at UC Davis.