DEV Community

Cover image for DO Hackathon - The Finished Result
Michael Mather
Michael Mather

Posted on • Edited on

3

DO Hackathon - The Finished Result

Unfortunately, I didn't have as much time over the Christmas break as I was hoping so I didn't get a chance to go further in depth into the client-side part of the app. With that said, I did want to write a post about the final features that I managed to fit in.

Feature Overview

The Chat Interface

All interactions with the app are done through a chat interface. That means we load components into view dynamically within the dialog.

Chat interface

Adding Habits

You can add new habits and specify a custom colour, and the number of times per week you'd like to aim to complete the habit.

Add habit

Viewing Habit Progress

You can view your individual habit progress, or an overview of all of your habits combined.

Habit progress

Overview

Celebrations

The best part of the app in my opinion is the celebration animations. Any time you do a habit or complete a goal a celebration animation is shown. It feels good when a mini confetti party is thrown every time you complete a goal.

Celebration 1

Celebration 2

Lessons Learned

I had a ton of fun developing this app and building everything from the ground up. I thought I'd also mention a few lessons I learned along the way:

  1. Chat dialog is hard! I regret not looking more into good chat dialog methods (thinking of gaming systems in particular). Getting the chat sequences working correctly was challenging and I think there are good tools out there that I could have used.
  2. Design for extensibility first. While it's possible to write your own chat sequences into the app, it would be nice to have an easily extensible system that allows anyone to define their own sequences with custom components.
  3. Start simple first. I spent too much time in the beginning trying to figure out how I was going to build a system that would match the complex tracking systems of other habit trackers. Eventually, I realized that I've spent too much time designing things that are clearly out of scope. I settled on a very simple goal system that works well with the simplicity of the app.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay