Pocketpaths

Inspiration

Students constantly get dense, unstructured instructions—lecturer emails, assignment briefs, internship or scholarship announcements. Everything that matters is buried in the same blob: deadlines next to jokes, requirements next to links, steps with no clear order.

That is especially hard if you are juggling courses, working with limited executive function, or need information broken into pieces you can trust and resume later. We wanted a tool that does not pretend to be a tutor or a diagnosis—just something that turns “please read this carefully” into cards you can edit and one next step you can actually start.

What it does

PocketPaths turns messy pasted instructions into a path: editable information cards connected by relationships, plus a Focus mode for the next action.

1. Paste a brief (or drop a .txt / Markdown / plain-text .eml).
2. Organize it into reviewable cards—goals, steps, requirements, deadlines, people, resources.
3. Accept, reject, or fix suggestions before anything becomes your path.
4. Switch between Cards, Map, and Steps; open Focus for one clear action with blockers explained in plain language.
5. Mark steps complete; progress autosaves on your device. Undo/redo supports recovery. Accessibility settings cover font size, contrast, reduced motion, and read-aloud.

No login, no cloud sync, no AI API key—core flow works fully in the browser.

How we built it

A browser-only React 19 + TypeScript (strict) + Vite app, styled with Tailwind CSS v4 and Lucide icons.

Business logic lives in typed domain modules: deterministic local extraction, deadline handling, relationships, review/commit, re-extraction that respects user edits, Focus selection, history/undo, and validated localStorage persistence. The UI is thin views over that model so we could ship Features without a backend.

We prioritized reviewability over “magic”: extraction is local and rule-based so the product stays honest about uncertainty and usable offline at a hackathon demo.

Challenges we ran into

• Useful extraction without false certainty. Deadlines and order are easy to overclaim. We had to separate “suggested order” from hard blockers and keep ambiguous dates visible.
• Review before commit. Auto-saving bad cards destroys trust. Building accept/reject/edit, then commit, added UX complexity but was non-negotiable.
• Safe re-extraction. Re-running organize must not wipe corrections the user already made.
• First-use clarity. The primary action (Create / Organize / Accept / Focus) had to stay obvious without fake onboarding screens.
• Accessibility vs. polish. Dark editorial styling and dense forms both need keyboard focus, contrast modes, and speech that still feel calm for students.

Accomplishments that we're proud of

• A complete demo loop: paste → organize → correct → create path → Map/Steps → Focus → complete → refresh with progress intact.
• Reviewable extraction with relationships that stay editable.
• Focus that explains why a step is recommended, including blockers.
• Offline-first MVP with no auth or API dependency.
• Accessibility controls and read-aloud built into the product, not bolted on.
• A tested domain core (Vitest + Testing Library) so demo polish did not mean silent regressions.

What we learned

Students do not need another black box. They need control: fix a wrong card, reject a bad link, understand uncertainty, and return to one next step.

Small first-use fixes (clear primary actions, sticky review controls, honest copy about order vs. blockers) mattered more than adding more parse rules. Keeping domain logic out of the UI made it possible to iterate on Focus, history, and ingestion without redesigning everything.

What's next for PocketPaths

• Real usability testing with students (structured self-tests are not a substitute).
• Stronger relationship quality and clearer deadline ambiguity UX, without overfitting the parser to demo fixtures.
• Optional AI assist behind an API key while keeping the offline deterministic core.
• Careful expansion of source types (still respecting privacy and MVP scope—no forced cloud sync).
• Deeper accessibility audit and mobile polish for everyday classroom use.

Built With

• ai
• and
• api.
• auth
• cloud-sync
• focus
• history
• in
• lives
• localstorage
• lucide.-domain-logic-(extraction
• or
• persistence)-stays-separate-from-ui.-extraction-is-deterministic-and-local?no-backend
• react-19
• relationships
• safe
• state
• tailwind-v4
• typescript-(strict)
• validation
• vite
• with