REST Team Presents:

Inspiration:

The main idea behind this project stemmed from a need we saw for the ability to easily track of what we’re doing day to day. It’s easy to lose focus while you’re running around taking care of things, and you may not recognize the need to step back and take a little break until it’s too late and you’ve burned out. Therefore, we set out to create an easy to use interface that will allow a user to record their activities throughout the week, much like a more conventional logbook or journal. Unlike with a physical book however, they’ll be able to weigh their work/life balance at a glance.

How we did it: A basic overview.

We built our application using Node/Typescript. Bootstrap React was used to provide nice styling for the front end, while we use Postgre for our backend database to store input activities.

Accomplishments:

  • Roberto: Well, this was my first time working with TypeScript/React for a project in general. Due to my unfamiliarity with the stack, I mainly stuck to building simpler components like the card used for the day display, along with the pop-up modal that allows the user to enter an activity of theirs. While there were some initial problems that were ironed out, I had a great time learning how to do things such as passing the data we need back and forth via props. I really appreciate the help my teammates gave me during the process as well, it was nice getting to know them better.

  • Konstantinos: I focused a lot on the backend and wrote it in normal JavaScript while Anton helped me refactor the code into TypeScript. It was really fun to learn more about Postgre and Node, and I was able to build simple GET and POST routes that would receive and send out data. In the backend we receive some dates, and return all the activities for the week that those dates lie on. Initially I did this manually, but the problem lied in at the beginning or end of months. It wouldn't go to the previous month when needing to find the beginning of the week. To alleviate this, we were able to find a simple package named moment.js that solved our date concerns. Overall, it was a fun experience.

  • Anton: I am proud of the data transformation section from the API -> WeekView.tsx. I also helped layout and provide typedefs for the data! I learned a lot about RESTful APIs and how to use Insomnia/PGAdmin from Konstantinos.

Challenges:

Some of the biggest challenges we faced as a team revolved around the initial setup of all the packages that we worked with, ensuring everything is up to date and that we’re all working with the same versions of everything. Roberto actually had a problem with an outdated version of React that was causing him tons of problem trying to run the application- that went away once he updated, but it took us a while to figure out what the problem was. Another early issue was with the Github repositories created for our team- Anton and Roberto didn’t have write access at first, so a few hours were spent troubleshooting that.

  • Anton: Parsing the activity array of weekly events was challenging!
  • Roberto: Figuring out a good way to toggle the ‘add activity’ modal when it was in it’s own component stumped me a bit at first. Another issue I had was finding a good time picker to use in the modal!

Things for the future:

The whole team has a good idea of where we'd like to take this app in future developments, mainly expanding upon features already existing in the application. Some examples of this include:

  • Putting the finishing touches on the 'Add Activity' Modal. We have the basics wired together, but there's still some work to be done with it.
  • Using the start and end times input upon activity creation to calculate the amount of hours spent per day doing 'work' or 'leisure' activities and displaying that in a breif summary outside of the activity list.
  • Displaying a weekly summary of time spent working vs. relaxing- either at the bottom of the page, or in a clickable popup.
  • Changing the color of a day card depending on a user's work/leisure ratio. Ex: The more that ratio is skewed towards work, the redder the card.
  • Incoroprating a full fledged calendar view into the application to make seeing larger trends easier.

Time Invested:

Altogether, the whole team was together working on this application for around 19 hours, including time spent setting things up and troubleshooting problems.

Work by: Anton Zabirko, Konstantinos Houtas, Roberto Garcia. Video presention in streamable link.

Share this project:

Updates