Flexible planning views
Built Day, 2 days, and Week views, so a plan can move from a quick daily checklist to a clearer weekly schedule.
CASE STUDY · FEATURED PROJECT
DayFlow
A daily planner for organizing tasks, routines, and a visual schedule across day and week views.
ROLE
Product design, frontend and full-stack implementation
STACK
Next.js · TypeScript · Supabase · PostgreSQL
PRODUCT PREVIEW
A closer look at the interface.
Watch 1-minute walkthroughYouTube · Opens in a new tabCONTEXT
From a task list to a plan you can follow.
The challenge. Create a planner where people can quickly capture tasks, schedule them visually, and keep recurring routines visible without losing context.
The approach. I designed DayFlow around an Inbox and timetable: capture first, then place tasks into a day, two-day, or week view when the plan is ready.
KEY FEATURES
What I built
Drag-and-drop scheduling
Tasks can move between the Inbox and timetable, then be rescheduled directly in the planner instead of through separate forms.
Recurring routines
Added weekday-based routines with dates, times, duration, and notes for habits that should appear in the schedule repeatedly.
Safe account workflows
Implemented email/password and Google sign-in, confirmation, password reset, and account settings for a personal planning product.
IMPLEMENTATION
Technical decisions
Supabase with Row Level Security
Authentication, PostgreSQL data, realtime updates, and row-level policies keep each planner account scoped to its own tasks and routines.
Optimistic interactions with confirmation
The planner updates immediately for a responsive feel, then confirms changes in the background while supporting Undo and browser-tab sync.
Responsive, installable web app
The interface supports desktop and mobile planning, system-aware appearance, and PWA installation for a more app-like experience.
EXPLORE THE PROJECT
See the product in action.
Use the public demo to explore the project workflow, then review the repository for its implementation details.