Notie

I've been building Notie, an AI-integrated PDF study app, for the past several months. Along the way I've collected a list of bugs and design traps that are very easy to fall into if you're building a note-taking or document-annotation app. None of them broke the product on day one — they just made it feel like a side project instead of a real tool. Sharing in case anyone else is in the same trenches.

**1. The "POST → await → refetch" tax**

Every interaction in your app probably has a network round-trip somewhere. The naive shape is: user clicks, you POST, you await the response, you refetch the canonical list from the server, then you setState. That's two network calls and 200–500ms before the user sees anything.

You can get away with this when you have one or two interactions per session. The moment users start doing the thing your app exists for — making highlights, creating cards, adding notes — every action feels like the app is thinking. Even on fast networks. Even on localhost.

The fix is optimistic UI: update local state immediately, fire the network call in the background, swap the temp record for the real one when the response lands, roll back on failure. The trap is that the edge cases will bite you if you don't write the plan down before coding:

- What if the user deletes a temp record before its POST returns? (Track cancelled temps, fire a follow-up DELETE on the real id when POST eventually resolves.)

- What if an unrelated refresh fires mid-flight and wipes your temp? (Preserve in-flight temps through refreshes, dedup by fingerprint — geometry or content, not server id.)

- What about handler functions that try to use a temp-… id (e.g., a double-click that opens a chat panel)? (Handler-level early-return on the temp prefix — single source of truth, can't be bypassed by a UI surface you forgot about.)

I went through four rounds of plan review with an AI code reviewer before writing a line of code on this. Every round caught a real correctness bug. The version that shipped is <300 lines and cut my highlight latency from 400ms to under 50ms.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

**2. Trackpad pinch is just wheel + ctrlKey**

I lost an embarrassing amount of time looking for a "pinch" event before realizing browsers translate trackpad pinch gestures into wheel events with ctrlKey: true. Same event the browser sends for Cmd/Ctrl + scroll. One handler covers Mac trackpad pinch, Windows precision trackpad pinch, and the keyboard combo.
Two specific gotchas if you go down this path:

- **`addEventListener('wheel', handler, { passive: false })`**. React's onWheel is passive by default in modern browsers, which means your preventDefault() silently no-ops and the browser zooms the whole page instead of your content. You have to register the listener manually.

- **Cursor-anchored zoom.** The pixel under the cursor needs to stay under the cursor as you zoom, or the page jumps in unpredictable directions and feels broken. The math isn't hard but it has to happen after the new layout commits — use useLayoutEffect, not synchronous scroll mutation in the wheel handler.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

**3. Imperative DOM nodes survive React unmounts**

The single sneakiest bug I've hit. If your component imperatively appendChilds elements into a DOM node React doesn't own (in my case, a .highlight-overlay div inside the PDF.js text layer), React doesn't track those nodes. When your component unmounts, your cleanup function had better clear them yourself, because nothing else will.

Symptom in my case: optimistic deletes worked perfectly for the panel row but the colored highlight box stayed painted on the PDF page until the user reloaded. It only happened when the last highlight on a page got deleted — because at that point the component unmounted entirely. When other highlights remained, the within-update cleanup ran and hid the bug.

Fix is one line in the useEffect cleanup: overlay.innerHTML = ''. Finding the bug took an hour because I assumed it was a state issue, not a React lifecycle issue.

If you're doing anything imperative in a React app — drawing on canvases, mounting third-party widgets, manipulating PDF.js layers — set yourself a rule: **every appendChild needs a matching cleanup**.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

**4. Storing pixel coordinates breaks the moment you add zoom (or responsive layout)**

This one I got lucky on. My highlight storage uses fractional coordinates — (x, y, width, height) ∈ [0, 1] of each page — instead of absolute pixels. When I later added pinch-to-zoom, every highlight stayed perfectly aligned at every zoom level for free. No migration. No coordinate math. The data was already scale-invariant by construction.

If I'd stored pixels, every existing highlight would have broken the moment a user zoomed in, and I would have had to backfill the entire database with normalized coordinates.

Related but more subtle: if you do anything with getBoundingClientRect() to position child elements inside a CSS-transformed parent (`transform: scale(z)`), those measurements come back in post-transform viewport pixels. Writing them straight back as style.left/top makes the browser apply the transform again, double-scaling the position. You have to divide by the current zoom factor — or read offsetWidth/offsetHeight instead of boundingClientRect, which gives you pre-transform layout dimensions.

I missed this twice in my own code before a careful reviewer caught it. Three separate sites had to be fixed. None of them threw an error — they just silently misaligned.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

**The thread running through all four**

Users don't experience your feature list. They experience the moments between clicks. If those moments feel like "the app is thinking," nothing else matters. The boring fixes — latency, gesture handling, cleanup discipline, coordinate hygiene — are the ones nobody else will do for you. AI tools will happily generate features all day. They won't notice your highlight panel feels laggy unless you specifically ask them to time it.

If you're building something with a lot of interaction, sit down and time your top five user actions today. Write down the latencies. Half of them are probably worth one afternoon of work to halve. Compounds fast.

Product is live at [notieapp.com] if you want to see the result — free to start, drop in a PDF.

I'm a bioinformatics senior at UCSD trying to use the remaining weeks to build something meaningful. I built Notie (https://notieapp.com), an AI-native study app where the AI lives inside your PDF instead of a separate tab. Free while I iterate.

A few things I've already built that students have told me actually help, so we can skip past them in the comments. Highlight a passage and the AI conversation is anchored to that highlight, with the document and conversation history loaded as context. Auto-generated flashcards from your highlights with spaced repetition, and from any flashcard you can jump back to the exact passage in the source PDF that generated it. Auto-tagging on highlights so you can find them later by topic. Cross-document AI ask so you can compare what one paper says against another in one workspace. PPTX export for anyone who wants to turn highlights into a deck. The whole thing is built around the idea that AI should be the main character of studying, not a side helper.

What I'm asking the community: what's the AI feature you wished existed when you were studying, that nobody has built yet, or that everyone builds badly?

A few directions I've been thinking about but haven't committed to. An 'explain like I'm five' that actually works because it's grounded in your specific document, not generic. A 'find the contradictions' feature that flags when two of your sources disagree. A study-companion mode that asks you Socratic questions about a passage instead of giving you answers. An exam-mode that surfaces the highlights you keep getting wrong on flashcards and proactively re-explains them with new analogies. A 'concept map' view that auto-builds the relationships between ideas across your documents.

I'm not going to build all of these. I want to know which ones you would have actually used as a student, and which ones sound clever but you'd never open twice. Especially curious about features other study tools do badly, where the AI version could be meaningfully better.

If you're a current student, recent grad, or someone who's tutored, your taste here is exactly what I'm trying to calibrate against. Drop a comment with the feature you wish existed. I'll read every reply.

Quick context: I'm a bioinformatics senior at UCSD with five weeks left to ship before graduate(see last update). I built Notie (https://notieapp.com), an AI-native study app where the AI lives inside your PDF instead of a separate tab. Free for now, subscription tiers later.

Here's what nobody told me about building an AI product as a solo founder. The infra you'd think would be expensive is cheap. Supabase, Vercel, Clerk, Cloudflare R2 combined stay under $800/month even at five thousand users. The Anthropic API bill is what dominates. At fifty users I'm projecting around $150/month. At five hundred, $1,550. At five thousand, around $15,600. AI is roughly 90 to 95 percent of total cost at every scale.

This means the entire viability of the free tier depends on cost discipline. Two things have done the most work: a retrieval pipeline for documents, and prompt caching on top of it.

The naive version of Notie attached the full PDF to every AI request. That worked fine for a 20-page paper. It fell apart on a 700-page textbook, where a single highlight-chat turn was eating 200K input tokens, or just hard-failing past Anthropic's page cap. Sending the whole document on every turn is the silent killer of unit economics for an AI study app.

So I built a small RAG-style pipeline. On upload, I extract the PDF to plain page-text once and store each page as its own row. At query time, instead of sending the whole document, I send the page the user highlighted plus its immediate neighbors, plus up to 4 other pages scored against the question. For the global 'ask across all my docs' surface, each document contributes 3 to 6 of its most relevant page excerpts depending on how many docs are attached. The summary endpoint head+tail packs the text and caps it at 150K characters so even a textbook fits.

The numbers shifted hard. Highlight chat on a 100-page paper went from ~30K input tokens per turn to ~3-5K. Same chat on a 700-page textbook went from ~200K (or hard fail) to ~3-5K. Cross-doc /ask with two PDFs went from 150-300K to 10-20K. Summary of a 700-page textbook went from impossible to ~37K and succeeding.

One nuance worth mentioning: my retrieval is currently lexical, not embeddings. Keyword overlap, phrase matching, page-number bonus. I deferred embeddings on purpose until I can measure lexical actually failing real students on real exam questions. Cheaper to ship, easier to debug, and good enough until proven otherwise.

The part that's been genuinely uncomfortable: I have to design the free tier knowing that every additional question someone asks costs me real money, and a meaningful chunk of users will never convert. The 'just throw AI at it' era of product building is not the same product-building reality if you're the one paying the API bill.

What I'm currently planning: free tier capped at three PDFs or one hundred AI questions per month, pro tier at $10/month. The free tier limit isn't to be stingy. It's the largest amount I can give away before each free user costs more than a pro user pays.

If you've shipped an AI-heavy product and figured out how to keep the free tier sustainable without crippling it, I'd love to hear what worked. Especially curious about when you knew it was time to upgrade lexical retrieval to embeddings, and how aggressive your free tier limits had to be at launch. Still calibrating.

I picked bioinformatics at UCSD because it was the top-ranked major and I wanted to contribute to science. Four years later, my peers are all queueing up for PhDs to break into biotech, and I'm realizing I don't want to spend another half-decade learning before I'm 'allowed' to make something. So I'm using my last 5 weeks of college to ship.

First product: Notie (https://notieapp.com), an AI-native study app for students.

The original spark came from my mentor at Novartis. I noticed researchers there have a specific ritual for going through papers: they highlight interesting passages and pull them into slide decks they can refer back to for their own work. That stuck with me. I started building Notie for professionals with that workflow in mind, but as I talked to more peers, I realized something bigger was missing in the student space. Apps like Notability and GoodNotes treat AI as a support character, a little 'explain this feature' button, or tack on gimmicks like 'quiz me' that don't actually map to how people study. Nobody had built a note-taking app where AI was the main character. So I pivoted toward students, where the pain felt sharper and the bar felt lower than it should be.

The core insight is that students shouldn't have to tab-switch between their PDF and ChatGPT. The reading and the thinking should live in the same place. So in Notie, you import a PDF and highlight passages directly, and the AI conversation is anchored to whatever you highlighted, with full context of the document already loaded. From those highlights, you can auto-generate flashcards that go into a spaced repetition system (SM-2), and from any flashcard you can jump back to the exact passage in the source if something isn't clicking. You can also load multiple documents into one workspace and have the AI cross-compare them, which is something I personally needed studying for my own classes. And because of where the idea started, export-to-pptx is in there too, for anyone who wants to turn their highlights into a deck.

The bigger vision is an ecosystem for studying, where AI organizes the material and you do the thinking. I'm also intentionally building this as a web app, not iPad-first. Every student has a laptop. Not every student has an iPad. And honestly, I think trying to replicate pen and paper on glass is a losing game. Pen and paper is irreplaceable for working through problems, and laptops are unbeatable for organizing knowledge. Notie leans into that split rather than fighting it.

It's free while I iterate. Eventually I want to do a subscription with tiered plans based on AI token usage. I have at least two more ideas I want to build after this one.

Two asks. Try it and tell me what's broken, any feature that would improve the app is good too. And if you've shipped something to prove a point to yourself, comment and let's connect. I want to learn from your scars.

Quick story before the link.

Last semester I caught myself doing this every time I read a paper: highlight a confusing paragraph, copy it, switch tabs to ChatGPT, paste it, ask my question, read the answer, switch back to the PDF, scroll to find where I was, lose three minutes, repeat. Twenty times an hour.

By the end of an evening I had a chat history full of detached questions and no idea which paragraph any of them came from. The flashcards I tried to make from those answers were even worse — "explain this concept" with no link to the page or paper that prompted the question. Two weeks later I'd review the card and have no idea what context I needed to even understand it.

Especially as a student that has to constanlty read through papers, I found this problem commonly enough among our peers to build something: every AI study tool I tried was a chat window plus a file uploader. That's not integration. That's a chat window with extra steps. The actual problem isn't "give me an AI." The actual problem is "stop making me leave the page to use one, and stop making me lose track of where my questions came from."

So I built Notie. AI is the foundation, not a feature bolted on top. You highlight a passage in your PDF — text or even a region around a figure or chart — and tap Ask AI. The response streams in next to the highlight, grounded in the actual page, and cites back to specific page numbers like [p.4] so you can click and jump straight to the source. Turn that response into a flashcard with one tap, and the flashcard remembers which highlight, which page, and which document it came from. When you review the card three weeks later you can click straight back to the paragraph that originally prompted it. The connection between question, answer, and source never breaks.

There's also a global Ask AI bar that searches across every PDF and note in your library at once. So when you remember reading something a few weeks ago in some paper but can't remember which one, you ask, and Notie pulls the actual excerpts from the right paper(s) with citations. That cross-document recall was the feature that genuinely changed my study habits — it removed the "where did I read this" tax that was making me re-read instead of actually synthesize.

The frame I keep coming back to: studying isn't a single action, it's an ecosystem. Highlights, notes, flashcards, AI questions, sources — they all need to stay connected to each other. Most tools force you to break the connection every time you switch surfaces. Notie is built so you never lose the thread of where you are.

I'm building this solo. It's live at (https:notieapp.com), free to start. Still trying to gain more user feedbacks to iterate and improve. Would love feedback from this community — especially on the "AI as the foundation, not a feature" framing. Does that land, or does it sound like every other AI pitch? And if you've built or used study tools yourself, I'd genuinely love to hear what broke down for you, especially after testing out this app.