Mar 2023 – Sep 2024
Paper Tiger
Academic research and writing platform
A tool that helps students plan, structure, research and write academic papers and manage citations. I built the entire React frontend alone, from an empty repo to production.
- Role
- Sole frontend engineer, end to end
5
modules built solo
~2 MB
JSON per paper, client-side
0 → prod
sole frontend engineer
Problem
Students needed one place to outline, read, extract, organize and write, instead of juggling separate tools.
Each research paper came with about 2 MB of JSON that the frontend had to handle directly.
Constraints
- One frontend engineer for the whole tenure.
- The Django and PostgreSQL backend, and the NER/ML extraction in Explorer, were built by others.
Architecture
What I built
Foundation
Architecture, tooling, routing, error handling, the API layer and authentication with OAuth 2.0 and Google Sign-In, all set up from scratch.
Five modules
Outliner for restructuring, Reader with highlighting and annotation, Explorer for extracted data, Builder for clustering into a tree, and Writer, a TinyMCE-based word processor.
Kanban workflow
Drag-and-drop columns built with DevExpress for managing a paper's parts.
Large client-side data
About 2 MB of JSON per paper served from Google Cloud Storage and handled on the frontend. File metadata lived in Redux so the app never read stale cached values. PDFs uploaded directly to the bucket through signed URLs.
Decisions and trade-offs
Keep file metadata in Redux
Choice: Track file information in the store rather than trusting cached responses.
Trade-off: More state to manage, but it avoided getting the same stale value back from cache.
Results
- A complete five-module product delivered by one frontend engineer and handed to DevOps for deployment.
What I'd do differently
- Next time I would extract the shared hooks and components into a small internal package from day one, and add tests before the codebase grows.
Next case study
Block Power →