Looped is a habit tracker app designed to help users build and maintain consistent routines through daily check-ins, streak tracking, and motivational visuals. Whether someone is trying to drink more water, meditate, or walk every day, Looped provides a simple and engaging way to track their progress.

Built with a mobile-first approach, it helps users visualize success, stay accountable, and reflect on patterns without feeling overwhelmed.

Build a clean, mobile-friendly habit tracking app with the following features:

Dashboard with list of habits and current streak status

Create Habit Flow: icon, name, and schedule (daily/weekly)

Check-In System: toggle habits as complete for the day

Streak Tracker: visual calendar and progress ring

Summary Page: longest streaks, current streaks, and consistency stats

Habit Templates: suggestions like “Read 10 pages”, “Hydrate”, “Meditate”

Design Style:

Font: Inter

Theme: Light/Dark modes

Accent: Green (#22C55E) for completion, Gray (#9CA3AF) for pending

Components: Card-based layout, checkmark animations, calendar grid

Tech:

Vite + React + TypeScript

Tailwind CSS

Supabase (Auth, DB, Realtime)

Context API for state management

Organized in /components, /pages, /services, /hooks, /data

Define how often you want to complete each habit - daily or a few times per week.

Mini calendar or ring chart that highlights how consistent you’ve been.

Pre-built ideas for routines like journaling, yoga, and reading.

Swipe or tap to mark tasks complete. Visual reward animations reinforce habit formation.

Track your strongest habits, longest streaks, and overall completion rate.

Looped uses calm visuals and intuitive layouts to reduce friction around forming habits. The goal was to keep screens lightweight but motivating — habits are shown with color-coded statuses and check-in animations to add positive reinforcement. Built fully mobile-first for users on the go.

useNavigate() outside Router: Wrapped app in <BrowserRouter> in main.tsx

Supabase fetch error: Fixed by loading .env correctly and ensuring preview mode allows external API calls

Habit calendar UI: Used grid-based rendering with color logic for current streaks