Life180

• 

  Home Page

• 

  Location Tracker

• 

  Friends Status Page

Inspiration ✨

Ethan said he was going to class but tell me why I’m in our morning Computer Organization and Architecture class staring at the empty seat Ethan was supposed to be sitting in.

Everyone here is guilty of bad habits. Whether it be lying about going to the gym, not going to a way-too-early morning lecture, or being late to pick up your grandma to get brunch, a stop needs to be put to these habits before this ongoing cycle never stops. To solve this, harsh consequences need to be met every time we fail to fix our habits. So how about sending a notification and alert to all your friends telling them how you didn’t go to the gym again for like…the 5th time this week…

Thus, we came up with Life180, meant to turn your bad habits over into good ones!

What it does 🔔

User logs into our app and is then directed to a page where they must enter the destination they wish to be at and how long till their arrival. By clicking the start timer, our react app tracks the user’s location while the timer counts down. If the user does not reach the destination before the timer, a notification and alert will be sent out from not only their device but from their friends’ accounts as well. Not only must the user hold themselves accountable but their friends will be reminding them constantly as well to avoid the notifications. Afterwards, the data that is stored in our database will reveal how many times the user has failed to show up to their destination on time and this will be displayed for all their friends who use the app.

How we built it 🔧

After creating our initial prototype on Figma, we decided to integrate the designs into a React app. For the front end, we also incorporated other libraries such as Axios for API fetching and Google Cloud SDKs for accessing GCP. On our backend, we worked heavily with both Kybra and Flask, which served as our backend API services and managed both our interaction with ICP and the Ethereum network as a whole. In the future, we hope to better integrate these two separate API services into one and integrate a proper database for production, such as MongoDB.

Challenges we ran into 🏃

Most of us are experienced in backend development so taking Figma and UI/UX more seriously this hackathon was a big challenge for us. As Figma does not involve just randomly assembling icons and components together, we had to be very careful with their layering with each other on the screen to ensure the smoothest integration into JS. Figma has also been actively coming out with more helpful features and auto layout was a new one that all of us were introduced to today and figuring it out and its benefits was a learning process for all of us.

Frontend aside, as always, there are issues in the backend. Working with ICP and especially Kybra, had a lot of growing pains. As a pre-beta product, there were a host of configuration issues with different machines and few resources online to solve any issues that arose. That being said, working with Kybra taught us a lot about ICP and other crypto-related concepts such as smart contracts we are proud of the work managed to do with both Figma and Kybra.

Accomplishments that we're proud of 🎉

Ultimately, we’re proud of taking our front end more seriously and dedicating the time for a better-looking UI. As well, many of us are delving into technical areas we’ve never tried before such as Google Maps API, ICPs, Ethereum database, Figma, and Figma prototyping.

To always be pushing out of our comfort zone especially at an event like Hack the North when we can easily stick with projects we’ve done in the past is something we’re all proud of. No one worked on something they were comfortable with and we’re all happy to be coming out of this hackathon with a wider skillset.

What we learned 🌱

In this project, we learned a lot about Figma designing, developing, and prototyping. On top of the growing pains of using a lot of new technologies, we also learned how to simplify an idea into simpler and easier steps, which allowed us to build quickly and adapt as technical barriers came our way.

Separately, on the backend side, we learned that it is important to reach out for help when needed. Doing so greatly expedited our development process allowed us to better communicate our blockers with each other and got us through a lot of the technical challenges we faced. In the future, we hope to be able to take these lessons to heart and use them in our future endeavors.

What's next for Life180 🤩

Better usage of the database, stronger user authentication and protection, and more features to put things like money at stake to further encourage better habit-spending.

Built With

• cloud
• css
• ethereum
• google
• icp
• javascript
• python
• reacjs