FLOW(daily task and habit tracker)

Building Flow: Visualizing Discipline & Automating Momentum:

Inspiration: Why Traditional Lists Failed Me The idea for Flow came from a personal frustration: standard to-do lists felt static and dead. Checking a box felt like a chore, not an achievement. I realized that productivity isn't about rigid lists; it’s about momentum. I wanted to build an app that visualized habits not as separate tasks, but as a continuous stream. The concept of "Flow" was born from the desire to make discipline feel like a liquid force—if you maintain your streak, the river widens and flows faster; if you stop, it dries up. I wanted to move away from the boring "productivity gray" and create an interface that felt modern, aggressive, and alive with neon aesthetics and dark .

What it does

Flow transforms standard habit tracking into a visual momentum engine. Instead of static checkboxes, it visualizes daily discipline as a continuous liquid stream—consistency widens the river, while inactivity causes it to dry up. Beyond just tracking, Flow actively enforces discipline through an "Aggressive Mode" that sends roast notifications for missed deadlines and "Flow Squads" where peer performance directly impacts the group's stats. With a high-performance dark-mode interface and a modular Bento Grid layout, it turns productivity into an immersive, high-stakes game that users can't ignore.

How we built it From Concept to "Cool" Building Flow required a stack that could handle both high-performance visuals and scalable data. I chose React with speed, paired with Tailwind CSS to create the complex "Bento Grid" layouts and frosted glass effects. The heart of the app is its interactivity, so I used Framer Motion to ensure that completing a task wasn't just a database entry—it triggers a "splash" animation, dissolving the task block into the stream. For the backend, I utilized Superbase. I needed a system that could scale to 400+ users immediately, so I implemented robust Row Level Security (RLS) to ensure data privacy. A key feature I built was the "Aggressive Mode"—a logic layer that checks for incomplete high-priority tasks and sends "roast" reminders to hold users accountable, moving beyond the gentle nudges of typical apps.

Challenges we ran into unique IDs and Liquid Graphs The biggest technical hurdle was visualizing the data. Creating a "River Graph" that flows smoothly instead of a standard jagged bar chart required hacking standard charting libraries to render organic, curved areas that react to user streaks. Another significant challenge was the referral architecture. I needed a system where every user, upon signing up, was automatically assigned a unique, collision-free 6-character Invite ID (e.g., "FLOW99") to allow for "Flow Squads." Writing the database triggers in Supabase to handle this auto-generation without errors during high-traffic sign-ups was a complex logic puzzle, but solving it allowed for the seamless social growth mechanics that define the app.

Accomplishments that we're proud of

We are incredibly proud of successfully implementing the "River Graph" visualization, a complex custom charting solution that dynamically morphs based on user consistency, turning raw data into a living liquid stream. Another major win was engineering a scalable Supabase backend capable of handling 400+ concurrent users with Row Level Security (RLS) and auto-generating unique collision-free invite IDs instantly upon sign-up. Finally, achieving the "Aggressive Mode" logic—where the app intelligently detects missed high-priority tasks and triggers "roast" notifications—was a technical and creative breakthrough that genuinely differentiates Flow from every other passive to-do list on the market.

What we learned The Psychology of UX Through building Flow, I learned that UI is a feature. By changing a task list into a "Bento Grid" where High Priority tasks are massive, glowing orange blocks, I realized I could psychologically prime users to tackle the hardest things first. I also learned the power of "social stakes." By implementing the squad features where one person's failure affects the group's "River," I discovered that peer accountability is a stronger motivator than willpower alone. Flow taught me that a productivity app shouldn't just record what you do; it should actively push you to do it.

What's next for FLOW(daily task and habit tracker)

The future of Flow is about deepening the "Real World" integration. We plan to launch "Flow Hunter," an AR (Augmented Reality) feature where daily chores float as 3D bubbles in your actual room, requiring you to physically move to "pop" and complete them. We are also developing "Live Flow," a digital body-doubling space where users can join silent audio rooms to focus together in real-time. Additionally, we aim to integrate with smart home APIs (like Philips Hue) so the app can automatically change your room's lighting to "Focus Red" when you start a deep work session, truly automating your environment for success.

Built With

• and-animated-with-framer-motion-for-liquid-smooth-interactions.-the-backend-is-powered-by-supabase
• css
• html
• javascript
• python
• react
• row-level-security-(rls)-for-robust-privacy
• styled-with-tailwind-css-for-a-modern-glassmorphic-aesthetic
• utilizing-postgresql-for-scalable-data-storage
• vite