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
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 (As a half Computer Science major, I'm embarrassed). I had a near-fiasco when I learned the hard way that merging is not the same as replacing 😱. Needless to say, I've learned a lot.
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! 👨💻
Top comments (0)