Cove – To-Do Application

Overview

Cove is a personal productivity app built for people who are tired of productivity apps. Where most tools demand you learn their system, Cove adapts to you — a quiet harbour for your tasks, time, and thinking. It combines a time-blocking calendar, hierarchical task management, rich linked notes, and private encrypted secrets into one fluid, beautifully composed interface.

We designed and engineered Cove end-to-end at Pixelvise — from brand identity and UI/UX to production-ready frontend code and serverless backend infrastructure.

The Problem

The productivity app market is crowded. TickTick, Todoist, Notion, Evernote — all strong products, all bloated in their own way. After years of using and recommending these tools to clients and colleagues, the team at Pixelvise kept bumping into the same friction:

• Calendar and tasks live in separate apps. You write a task somewhere, then manually block time for it elsewhere.
• Notes float free. They have no connection to the project or task they support.
• Interfaces are noisy. Badges, streaks, onboarding nudges, upsell banners — constant interruption.
• Privacy is an afterthought. Everything syncs to a cloud server by default, with no local option.

The goal for Cove was to solve all four in a single, coherent product — without sacrificing the polish users expect from a paid app.

What Cove Does

Time-blocking calendar

The calendar is the centrepiece. Users drag tasks directly onto a week or 3-day grid to block out time. Blocks can be resized from both edges, moved across days with smooth pointer tracking, and repeated events project themselves forward automatically. The grid is full-screen, edge-to-edge, and pixel-aligned — no header/body scroll misalignment, no jank.

Tasks, projects & areas

Work is structured in three tiers: Areas (life domains like Work, Health, Personal) contain Projects, which contain Tasks. Subtasks open inline without navigating away. Task modals support priority, start date, deadline, time-blocking duration, repeat rules, and inline rich descriptions — all in one place.

Notes that stay close

Notes are not a separate app. They live on the area, project or task they support. A rich-text editor (TipTap v3) handles formatting. Secret notes can be locked behind a device passcode, encrypted client-side so the server never sees plaintext content.

Inbox & Someday

A frictionless capture inbox lets users dump thoughts quickly. Items are processed into tasks or moved to a Someday list — a parking lot for ideas that aren’t ready to become projects yet.

Stats

A lightweight stats view shows task completion trends and time-blocked hours. Calm, not gamified. A tool for reflection, not a scoreboard.

Multi-account & billing

Cove supports email + password accounts with a Free and Pro tier. Stripe handles billing. An admin portal (accessible only to administrators) manages users, plan definitions, coupon codes, Stripe configuration, and support tickets — all in one private interface.

Our Role at Pixelvise

Pixelvise handled the full product lifecycle:

• Product strategy — competitive analysis against TickTick, Todoist and Evernote; feature scoping and prioritisation
• Brand & visual design — the warm notebook aesthetic (cream paper palette, Newsreader display font, soft contrast tokens), iconography, and the design system
• UI/UX design — full-screen layouts, mobile bottom-sheet modals, edge-to-edge calendar, responsive grid, tap-target sizing
• Frontend engineering — React 19, Vite, Tailwind CSS v4, Zustand with persist and migrations
• Backend engineering — Cloudflare Pages Functions, D1 SQLite, PBKDF2 auth, Stripe webhooks, Resend email
• Public landing page — hero, feature grid, pricing section with monthly/annual toggle
• Admin portal — full management interface for the operator

The Stack

Why this stack?

React 19 + Vite gives us the fastest possible local dev loop and the smallest possible production bundle with tree-shaking and Rolldown chunking.

Tailwind v4 with custom design tokens means every spacing, colour and radius value is a single source of truth — the design system lives in CSS, not a third-party component library, so we own every pixel.

Zustand was chosen over Redux or Context for its minimal boilerplate, first-class TypeScript support, and the persist middleware that lets the app work fully offline with zero backend calls.

Cloudflare Pages Functions + D1 provide globally-distributed compute and SQLite storage with zero cold-start latency — important for a productivity app where snappiness is a core UX value.

No drag library. The calendar’s drag-and-drop is written from scratch using the Pointer Events API and setPointerCapture. This was the right call: no library handled the cross-column, cross-day case without hacks.

Key Engineering Challenges

1. Calendar drag across days

Problem: When a task block was dragged from one day column to another, the element would unmount from its origin column (because React reconciles the list for the new column), losing pointer capture — the block simply vanished.

Solution: We changed the rendering strategy so the block stays mounted in its *origin* column for the entire drag gesture. Instead of teleporting it between columns, we apply a CSS transform: translateX() offset calculated from the live column width, giving the illusion of cross-day movement. On drop, the real data update fires and React re-renders in the correct column. Zero flicker, zero pointer-capture loss.

2. Full-screen calendar with aligned sticky headers

Problem: The week grid had two separate scroll containers — one for the sticky day headers and one for the 24-hour body — with separate scrollbars. Any layout shift between them caused column misalignment.

Solution: We merged both into a single scroll container using a shared CSS grid template (56px repeat(dayCount, minmax(0,1fr))). The sticky header row sits inside the same scrollable element as the body. One grid, one scroll, zero misalignment.

3. Local-first auth without sacrificing UX

Problem: A purely cloud-based auth system would break the offline-first and privacy-first promises of Cove. But users still expect email + password login with verification flows.

Solution: We implemented a local-first auth layer using localStorage with PBKDF2-hashed passwords (100 000 iterations, 32-byte salt, SHA-256). This runs entirely in the browser — no round-trip to a server. The Cloudflare Functions auth API exists in parallel for when cloud sync lands, but the app is fully functional without it. A demo account is seeded on first load so prospective users can explore without signing up.

4. Rich notes on mobile

Problem: TipTap, while excellent on desktop, has known issues with mobile keyboard interactions — the toolbar overlaps the on-screen keyboard, and contenteditable elements behave inconsistently across iOS and Android.

Solution: We designed a “quiet” editor mode: the toolbar collapses to a single icon row that scrolls horizontally and sits *above* the editor, not floating over it. We applied user-select: text; -webkit-user-select: text overrides and disabled browser auto-correction on the container to normalise mobile behaviour.

5. Clean-slate onboarding dead-end

Problem: After a data reset (or a new sign-up), the workspace was completely empty. Tapping an empty calendar slot to create a task opened a modal with a greyed-out Add button — because tasks must belong to a project, and none existed yet.

Solution: We added an idempotent ensureStarterWorkspace() action to the store, called automatically on every sign-in and sign-up. It creates a Personal → Tasks project if none exists. The quick-create modal now also falls back to this action on submit, so a new user can add their first task in under five seconds.

Design Philosophy

Cove’s visual identity is built around one word: calm.

• Warm paper palette — cream backgrounds (#faf8f3), warm greys, no pure white or pure black
• Newsreader — a humanist serif display font for headings; gives the app a notebook, not a dashboard, feeling
• No italics, no AI icons — a deliberate constraint that keeps the UI grounded and trustworthy
• Press animations — every interactive element has a subtle scale(0.97) on tap, so the app feels physical
• Ruled rows — task lists use thin ruled lines like a real notebook page
• Slim scrollbars — 6px, tinted warm grey; hidden entirely where content auto-grows

The mobile experience was treated as a first-class target, not an afterthought. Bottom tab bar, bottom-sheet modals, horizontal-scrolling pill controls, minimum 44 × 44 pt tap targets throughout.

Results

Reflections

Building Cove taught us that the hardest part of a productivity app is not the features — it’s the feeling. Getting the drag to feel physical, the typography to feel warm, the empty state to feel like an invitation rather than a dead-end: these are the details that separate a tool people use from one they love.

We also learned that “local-first” is not a compromise — it is a feature. Cove works offline, on a plane, in a spotty-signal coffee shop. That reliability is something no cloud-only competitor can offer out of the box.

Cove is ongoing work. The next phase brings cloud sync via Cloudflare D1, team workspaces, and a native mobile shell. If you’d like to discuss the project or commission something similar, get in touch at [email protected].