Routini: the (mini) app for sticking to routines

David Handsman — Mon, 20 Jan 2025 07:58:03 +0000

What I Built

I’m not a “routine” person.

Every morning is an aimless, unstructured haze—Coffee first? Maybe a 5-minute stretch? No, I should brush my teeth...

During one of these bouts of decision paralysis a few days ago, I felt a sudden desire to be told what to do.

I imagined my phone screen turning orange for 5 minutes (Stretch!), then blue for 30 seconds (Drink water!), then mint green for 2 minutes (Brush teeth!).

If I could just preprogram my routines ahead of time, all I'd have to do is push "play" and follow along. No decisions, no haze. The concept for Routini was born.

I know—it's not groundbreaking. But, I find most habit-building apps to be bloated with features: calendars and charts and achievements and pesky configurations. These apps make me feel more overwhelmed, not less.

Routini had to be simple and visual—something I'd actually want to use.

Demo

The structure of the app is simple—users create “Routines” comprised of “Tasks” with preprogrammed durations. When you click on a saved Routine, each Task “plays” in order, with its own full-screen color and emoji.

In addition to helping users stick to routines, the app can also be used to structure time for one-off projects.

Link to app

(I designed Routini primarily for mobile, so on desktop, try reducing your window's width for the best view.)
https://djhandsman.github.io/Routini/

I used comically short tasks for a quicker demo video 🤓

Planning

For me, the creative process begins off-screen, sketching with marker and paper to organize my thoughts.

I used Figma to build higher fidelity mockups.

Obviously, my implementation doesn't match the Figma specs...yet!

Repo

djhandsman / Routini

The (mini) app for sticking to routines

Routini

My submission for the GitHub Copilot 1-Day Build Challenge

View on GitHub

Copilot Experience

Chat was vital for the development of this project:

Development and Debugging

Implemented a slide-up task entry sheet with a scrim overlay.
Resolved a z-index issue causing the scrim to appear incorrectly over the sheet.
Added draggable task rows, including SVG drag icons, and debugged conflicts with the color selector.

Usability Improvements

Simplified task duration input to accept minutes only and fixed edge cases in the time-parsing logic, like when 0 was entered.
Enabled emoji selection for routine names, ensuring the emoji was saved to the routine object.

Styling and Layout

Styled and aligned key elements, such as horizontally centering the “Add Task” button and fixing layout issues for task rows.
Updated placeholder text styling and behavior for input fields like “Routine Name.”

Bug Fixes

Solved a bug where duplicate tasks were created when clicking "Add Task."
Fixed an issue where task durations displayed as "undefined."

I also used the code completion feature quite a bit, which I found pleasingly seamless!

GitHub Models

I didn't use GitHub Models for this project. Maybe next time!

Conclusion

I'll be honest—I didn't really know what Git or GitHub was before signing up for this hackathon.

Aside from now knowing how to commit, push, pull, and merge, I feel that my prototype of Routini shows promise (Thanks, Copilot!). But, there's still much I want to add, including:

animations & transitions
audio features for better accessibility
desktop compatibility
all emoji options
user education
and more!

A note on the name

Routini is a portmanteau of "Routine" and "Tiny" (or "Mini"), which feels appropriate given the app's intentionally small scope.

Me using Routini to help create this post:

Thanks for reading! 👨‍💻

Forem: David Handsman