Anchor

Anchor reveals the truth behind your focus so you can improve it.

Comment

Inspiration

Anchor started from a simple frustration in my own studying. I would put in long hours, but the results never matched the effort I believed I was putting in. I realized I was only measuring time, not behavior. My focus drifted, my pacing shifted, I switched tabs far more often than I noticed, and my deep work came and went without any visibility.

I wanted clarity. I wanted a tool that could show me what was actually happening inside my study sessions.

That is where Anchor began: a human centered AI tool that reveals the truth behind my focus.

⸻

What it does

Anchor tracks my real study behavior through a Chrome extension and transforms it into meaningful analytics and AI generated insights.

It captures: • Tab activity • Idle time • Attention patterns • Context switching • Deep work blocks • Domain classification (productive or distracting) through AI and my own overrides

The dashboard visualizes: • Focus flow • Deep work ratio • Biggest focus leaks • Daily and weekly trends • Session composition • Long term behavior patterns

AI then generates: • Personalized session summaries • Strengths and weaknesses • Actionable suggestions • A long term AI Coach based on my last ten sessions

Anchor gives me an honest picture of how I work, not just how long I worked.

⸻

How I built it

Anchor is a full stack monorepo with three major systems working together.

Chrome Extension • React and TypeScript • Manifest V3 • A background service worker for real time tracking • AI driven domain classification with manual overrides • A typed API client to send activity segments to my backend

Backend API • Node.js with Express • Prisma ORM with PostgreSQL • JWT authentication • bcrypt for password hashing • Zod validation for all API payloads and AI responses • A custom Insight Engine that interfaces with Claude 3 Haiku • Routes for sessions, analytics, domain overrides, and insights

Web Dashboard • Next.js and React • TailwindCSS with an ocean and anchor themed design • Recharts for all focus and trend visualizations • Detailed session pages and a long term AI Coach • A custom API client for secure data fetching

Infrastructure • Fully dockerized system • A single container exposes both the backend API and the Next.js dashboard • Runs anywhere with one command

⸻

Challenges I ran into • Real time tracking: Building an accurate and efficient session state machine inside the extension • AI reliability: Ensuring Claude returns valid JSON required strict schema validation and fallback handling • Meaningful focus metrics: Modeling deep work, focus flow, and context switching in a trustworthy way • End to end integration: Making the extension, backend, database, AI engine, and dashboard communicate seamlessly • Balancing analytics with design: Presenting complex insight data in a clear and calming interface

⸻

Accomplishments I’m proud of • Building an end to end behavioral analytics system from scratch • Creating a polished UI that makes complex data easy to understand • Designing a stable Insight Engine that produces consistent AI insights • Fully dockerizing the entire stack for simple deployment • Improving my own study habits using the tool I built • Completing the entire project as a solo full stack developer

⸻

What I learned • How to architect a complete monorepo system • How to reliably track human digital behavior with Chrome APIs • How to validate AI output safely using Zod • How to design focus metrics tied to real behavior • How to visualize data cleanly with Recharts • How to blend engineering, UI design, and human centered AI into one product

⸻

What’s next for Anchor • A social feed to share sessions and encourage others • Group study insights and collaborative analytics • More advanced AI models for deeper behavioral understanding • A mobile companion app • Predictive focus analytics using historical behavior • Additional metrics and smarter attention modeling

Built With

Share this project:

Updates