BoldMetrics

Thumbnail
Test from a particular class
GPA graph
Homepage

Inspiration

As students who have to use multiple resources to find their grades at CU Boulder, we wanted to work on an idea that would better aid students to quickly know their grades.

What it does

BoldMetrics fetches data of the current classes the student is taking and the associated grades and tests. It allows for students to quickly see their grades by being on one central location.

How we built it

Our team heavily used React to create a dynamic framework with multiple components. We used GraphQL to better communicate with our BackEnd with the help of Hasura and Apollo. To stylize our FrontEnd, we used the Bloomer dependency as well as common .css

Challenges we ran into

Our team ran into multiple challenges throughout the Hackathon, mostly with querying and passing data between pages. Because we had troubles with querying, we spent a large portion of our time on working on a user authentication system that was never implemented.

Accomplishments that we're proud of

As a team, we are very proud of our BackEnd schema as it features many-to-many and one-to-many relationships. We are also very happy that we were able to create dynamic webpages that updated with different information based on various ids passed. Also, we are very proud that we successfully populated a graph with queried data.

What we learned

Although we all came from different backgrounds, we all became more familiar with React and integrating a BackEnd system. As well as React, we all got more comfortable using version control with git.

What's next for Islanders

We hope to continue developing BoldMetrics until it meets our vision we first had. This includes a secure user authentication, complete graph integration with our data base, and a clean UI/UX.

Built With

Submitted to

HackCU VI

Created by

I worked mostly on front-end and integration which involved working with react, bloomer, apollo, and graphql queries.

Jacob Carlson
As someone who is already familiar with React, I worked heavily on developing BoldMetric's BackEnd and helping teammates when needed.

jfletcher98
I created a python driver that would prompt the user to choose 'GPA' or 'Test Scores'. If 'Test Scores' was chosen, the user would then be prompted to choose which test. A histogram .png would be generated represnting the data. I used pandas library to create dataframes from .JSON format and matplotlib library to generate the data visualizations. We ended up not using this program because it was more preferrable to use the data visualization features offered for React.js, but it was a good experience to use my knowledge of data visualization to easily generate graphs.

(edit: The original idea was that JSON formatted files would be generated from the backend GraphQL queries. Those files would then be sent to the python program to produce a histogram image, which would then be displayed on the web page. The specific query would rely on the users input on the web page's UI.)

Luke Joyce

Updates

Jacob Carlson started this project — Feb 23, 2020 12:07 PM EST

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.