Nebula

Nebula is a project management board developed by 4 developers, Deshay Clemons, Luke McDonald, Gabriel Undan, and myself. This was for the Meteor Hackthon 2021 which aimed to have us create an application with the meaning to make an impact in our community. From this, our team thought about the FIRST Robotics Competition (FRC) team we were in during our days in high school. One of the main issues we noticed now being mentors of the team, is the lack of progress tracking and simple interface to track parts and know who is working on what part. How our advisor currently manages the tracking is by creating a spreadsheet of the part’s name and information and goes back to mark it off as completed. However, to find the schematics files, they have to go into their email and search through the hundreds of emails they receive a day to find the part. Tracking of parts became even more difficult as the high school currently rotates students due to covid-19, so not all members are present at once and parts/schematics may get lost.

Our solution?

We created a project board similar to Github’s or Trello’s but with the main difference being its support for files and 3D model viewing of .stl files created from CAD software. For this application, we used Meteor, ReactJS, Semantic UI React, MongoDB, and AWS S3. I mostly worked on the small design details such as color choices, fonts, the logo, and the most back-end work I did was for the filtering. Now, I can sit here and highlight the things I am most proud of, but for this project, it made me realize more of what I needed to improve for myself as a developer. Here is a snippet of how I implemented the filtering:

todoParts = this.state.todo.filter(
    part => part.mechanism.includes(this.state.value));
progressParts = this.state.progress.filter(
    part => part.mechanism.includes(this.state.value));
reviewParts = this.state.review.filter(
    part => part.mechanism.includes(this.state.value));
doneParts = this.state.done.filter(
    part => part.mechanism.includes(this.state.value));

Since this was our group’s first time using react-beautiful-dnd package to implement a draggable card, I ran into issues of understanding it and implementing the filtering. There were portions of code that was a bit hard for me to completely wrap my head around as I could understand what is happening, but did not have enough knowledge to modify it to the way I wanted. So this small snippet does not look too bad if you are just looking at this, but for every type of filter, I had to do it 4 times rather than 1. We had a total of 3 types of filters: mechanism, assignee, and by name. So what could have been 3 lines of code, became 12 lines of code.

Overall, I believe my group developed an application that is ready to be used as a trial run in an upcoming FIRST Robotics Competition.

Source: “astruhoids/nebula”