Flow State ⚡

An anti-overwhelm productivity system. Break any task into doable steps, protect your dopamine, run focus sprints, and build a daily streak.

Live demo: https://flowstate-delta-six.vercel.app/

---

Screenshots

Task Breaker — enter any task	AI breaks it into specific, timed steps
Check off steps as you go	Dopamine Menu — your personal break activities
Flow Timer — focus sprint with presets	Rescue overlay — stuck? grab a quick break
Streak Tracker — stats	Light mode toggle

---

Features

Task Breaker

Paste anything you've been putting off — a single task, a vague goal, or a list of things. The AI (Pollinations, free, no API key needed) instantly breaks it into 4–7 specific, actionable steps with realistic time estimates. No generic advice like "make a list" or "identify your goals" — just do-it-now steps like "Load laundry, add detergent, start 40°C cycle — 10 min".

• Type or paste a task and press Enter or click Break it
• AI uses openai-large via Pollinations with a strict no-fluff prompt
• Two-attempt fallback: POST with jsonMode → GET fallback → smart offline split
• Steps show a checkbox, time estimate, and step number
• Click any step to mark it done — progress bar updates live
• Hover a step to reveal a ✕ delete button
• Each task has a Remove button to clear it
• Up to 20 tasks saved; older ones are auto-pruned
• All tasks and progress persist across browser sessions via localStorage

Dopamine Menu

A curated set of healthy, short activities to use as real dopamine breaks — not doom-scrolling. Pre-loaded with 12 activities across 4 categories: mind, body, space, and social.

• Click any card to mark it as picked (highlighted state)
• Click again to unmark it
• Add your own activities with a name, duration, and tag
• Activities are saved to localStorage so your custom ones persist
• The Rescue me button in the Flow Timer pulls a random activity from this list

Flow Timer

A distraction-free focus sprint timer designed around deep work sessions.

• Duration presets: 5 min / 25 min / 45 min / 90 min — pick before starting
• A thin progress arc fills across the top as time passes
• Set a focus target — what you're working on this sprint
• Rescue me zone — click when stuck to get a random break activity from your Dopamine Menu
• Sessions today counter — resets at midnight, persists per day
• Browser tab title shows the live countdown while the timer runs (24:59 — Flow State)
• Browser notifications on session end — one-click permission prompt shown in the tab
• Start → Pause → Resume → Reset controls

Streak Tracker

A simple habit tracker to keep you showing up every day.

• Log today's session button — records today as a done day
• 28-day calendar — each cell lights up for completed days; today is outlined
• 4 stats: Current streak · Best streak · Total days logged · Total steps completed across all tasks
• Streak badge in the top-right header updates live
• All data stored locally — no account needed

Dark / Light Mode

Editorial-style dual theme built with CSS custom properties.

• Toggle button in the top-right header (no emoji — just dark / light label with a dot indicator)
• Defaults to dark mode
• Preference is saved to localStorage and restored instantly on page load (no flash)
• Both themes share the same layout — only colours and glow effects change

---

Stack

Layer	Tech
Frontend	Vanilla HTML / CSS / JS — no frameworks
AI	Pollinations AI — 100% free, no API key needed
Backend	Vercel Serverless Function (api/break-task.js)
Storage	localStorage — per-user, no backend database needed
Fonts	Bebas Neue · Instrument Serif · IBM Plex Mono (Google Fonts)
Deployment	Vercel

---

Project Structure

├── index3.html        # Main app (single-file SPA)
├── api/
│   └── break-task.js  # Vercel serverless function for AI task breakdown
└── vercel.json        # Routing + security headers config

---

Deployment

Deploy to Vercel (recommended)

1. Push this folder to a GitHub repo.
2. Go to vercel.com → Add New Project → import the repo.
3. No environment variables needed — click Deploy.

That's it. The app is live.

Run locally

No build step required. Just open index3.html in a browser:

# Option 1 — open directly
start index3.html

# Option 2 — use a local server (for the API route to work)
npx serve .

The AI task breakdown works client-side even without the serverless function. The api/break-task.js endpoint is a server-side backup used when the client-side call fails.

---

How the AI Works

• No API key, no cost — uses Pollinations AI which is free and open.
• On submit, the app calls text.pollinations.ai with a strict prompt that bans generic advice and enforces concrete, realistic steps.
• Two-attempt fallback: POST with jsonMode → GET with openai-large model → smart offline fallback (splits input by commas/and).
• If AI is completely unavailable, the input is split into manual steps and a clear error banner is shown.

---

Browser Support

Works in all modern browsers (Chrome, Firefox, Safari, Edge). Requires ES2022+ (uses async/await, AbortSignal.timeout).

---

Built for

Digital Heroes internship assignment — build and deploy an app using AI tools.