commitment

commitment!
Landing Page
Create Habit Grid Window
Add Daily Entry Window
API docs

Inspiration ✨

As we moved from different periods in our lives, we required different ways to track our habits and activities. This forced us to hop from app to app, constantly requiring us to recreate our habits and lose our previous data. We wanted an application that allowed us to track our progress in any way we wanted, with full customization, and the ability to carry over our data from app to app.

Our team was inspired by GitHub's commit log grid displayed on user profiles. As developers, we find it super motivating to get daily commits in to keep our grids green, and so we thought of applying the format of commit grids to daily habits.

What it does 🤔

Commitment is a fully customizable daily habit tracker web app that displays your progress as a commits grid. Users can add their own habits, customize them according to how they want to track them and start logging their progress every day. The application supports generating a habit grid by entering a habit name, selecting its type (metric value or yes/no boolean), as well as its colour. After creating a habit grid, users can log their daily habits by adding entries.

How we built it

We started off mocking up our pages on Figma, deciding on colour schemes, components, and smaller features of the web app. We then moved on to flushing out our front end using Next.js. Our backend consists of a NoSQL database to model the user's custom habit and was built and modelled using MongoDB, as well as a set of API endpoints to create, update, and delete habits, add daily entries, and have them be displayed to the user.

Challenges we ran into 😭

A major roadblock in the development of our project was the backend work to ensure consistency across the app on different devices. Initially, our vision was to store a much more complex JSON object, that consisted of nested arrays of JSON objects. Without getting too much into the frustration of this development work (it's still too soon), we overcame these barriers and were able to successfully build and run our project as a result of better decision-making (completely revamping the data schema) and amazing collaboration efforts between the frontend and backend developers.

Accomplishments that we're proud of 😄

We are proud of the feel of our application and the habit systems. Using the commit grid fires the reward pathway neurons more than traditional habit-tracking methods, and seeing a full graph with a long streak feels very incentivising to keep your habit. We are also very proud of our public API which allowed us to create an extremely simple standalone frontend website which implements one of the APIs to submit an entry to our graph, allowing for extremely easy customization for your needs.

What we learned 📚

For all of the members of our team, this was our first time building a full-stack project from scratch. We were challenged with coming up with our own plan on how to go about implementing the features we had in our heads. We chose to apply a MERN (MongoDB, Express.js, React, Node.js) stack for the first time, and though we initially faced challenges implementing the database and backend endpoints, we all learnt more about full-stack development and how to persist inputted data.

What's next for commitment 📈

Next up we'd like to implement a user profile system. Users will be able to register for an account, login and be met with their personal dashboard of habits. This profile can be shared across platforms. Another feature we planned to implement was to generate a weekly/monthly/yearly report of the user's habits, similar to Spotify's yearly Spotify Wrapped. Users can view their most productive days and their productivity trends across various timelines.