BusyBuddy is a time/project management app created and developed for the in-house and remote teams to keep tasks on track to achieve the goals for their client despite the hurdles the remote distance may provide. The BusyBuddy app lets the user create teams for different projects, create tasks within the main project, shows how much of the project is completed and assign projects to one or more users on the team. The app was created and developed for the Shellhacks 2021 hackathon.
The Design:
With the design of the app, we wanted to keep the UI simple and user-friendly but also keep it easy to development because of the 24 hour time limit with Shellhacks. Our front-end developer suggested that we use Material UI because its simple and also easy to develop with the languages and systems that they were using. For the layout and color choices of the app I researched what time management apps were currently using and how could we stand out from the rest of those apps also what Material UI offered as well. We kept this app for mobile use (we could transfer to web down the road) and we kept the colors to a 4 color concept using Pantone Plus Series. I’ve also created to app to have both light and dark modes to fit the user’s preference. Since we had the time limit in place, the app is designed for IOS devices but we want Android user to have a version of there own as well so it could be run on both platforms.
The Development:
We built the Busy Buddy system using Flutter and Dart for the mobile apps and Laravel/Lumen for the backend web processing. We chose Flutter and Dart for the speed and efficiency given the time constraints. The write once run anywhere for IOS and Android was a huge time saver and promoted good code reuse. Flutter also has many popular libraries and tooling to prototype quickly and get the app off the ground. Flutter also uses the nice-looking Material UI from Google out of the box, so modern UI elements like buttons and widgets are quickly available for rapid development. When when assigning a task to the user and when the task is due, we use the Courier API to remind you about your task.
Laravel is used for its organization and available tooling. With Laravel, we can build out an API that allows us to create, delete, update, view, and interact with the tasks. Laravel also provided us a wonderful ORM complete with migrations for managing our database. Building a relational database that was repeatable on any system and could be checked into version control ensured that our team was in sync with the latest changes to our data model and everyone was on the same page. Laravel also provided a clean way to centralize the data flowing through our phone apps and handle dispatching notifications centrally. This framework was also chosen because of its ability for future growth. Although we started with a very minimal API, basic notification dispatching, and simple queueing for the notifications. Laravel can continue to serve as our API backend and a web application for a front-end to reach audiences agnostic of the mobile platform in the future.
The Shellhacks Hackathon:
Challenges we ran into:
We were a little TOO excited to work with all the APIs that we wanted to. Our goal was the ditch Laravels’ built-in authentication scaffolding for Auth0’s modern, secure Authentication as a service and to use Courier to send on as many channels as we could physically program in one night. However, as the day and night progressed, we found difficulty getting Auth0 implemented and setting up all the channels we wanted to on Courier, primarily because of the time constraints. Due to the learning curve, time constraints, and other issues that inevitably pop up during development, some parts of the API are missing, only email works on Courier right now, and Auth0’s authentication for native mobile apps remains untested despite it being implemented on both the Laravel backend and on the Flutter front-end.
Accomplishments that we’re proud of:
The development team build the majority of a front-end AND backend in a day. We’re very proud of what we have complete on the notifications, API, mobile apps, and backend. We believe that it would not take anything more than a few more days to have an excellent platform ready for users to utilize in their day-to-day lives.
With the UI design, The design team (myself) came up with the name, custom logo(s), research and executed the Material UI interface for both light and dark modes in a few short hours to hand it off to the developers to get it out within the time frame. Doing month’s worth of work that a normal app would take in less than 6 hours was very rewarding.
What we learned:
The development team had limited experience with some of the technologies in play. Though we were familiar with their power, Flutter and Dart had not been used by any of us extensively before this hackathon. We were new to the frameworks, and to have built something like this was a great dive into that world.
Notifications and Authentication as a Service were again concepts we were familiar with but lacked experience using them. Getting to play with these technologies was a hands-on learning experience that I’m not sure any of us honestly would have ever bothered to try were it not for ShellHacks. Now that we have, we’re glad to say that it’s another tool in our toolbelts that we will continue to learn.
Links to the project:
The link to the project’s open source is in the Github links below.
https://github.com/dvigne/productivityapp
https://github.com/dvigne/ProductivityBackend
BusyBuddy Team:
Selina Bostic: Logo/UI Designer
Derick Vigne: Backend API & Database Engineer
Christopher Medrano: Frontend Apple IOS & Android Native Application Developer
Andrew Urso: Database & Security Engineer
