Ptrn
Build better routines, time-blocked and colourful
Ptrn is a habit tracker that organises your daily tasks into Morning, Afternoon, and Evening blocks, each with distinct colour accents, emoji icons, and a global progress bar.
LovableReactTailwind CSSGitHub Pages
View Live By the numbers
Time Blocks
Morning, Afternoon, Evening
Default Habits
Fully customisable
The Problem
I wanted a habit tracker that felt alive — colour-coded periods of the day, emoji-backed tasks, and a visible overall progress bar to stay motivated.
The Solution
Ptrn groups habits by time of day with a left-side colour bar indicating the block. A global slider at the bottom fills as you complete tasks across all groups.
What I Learned
Ptrn deepened my understanding of component-level state management in React and taught me how to deploy a static app to GitHub Pages with a custom domain.