Pranay Jain

It was now time to scale this project a bit. Static websites were working but I needed something which can handle a large frontend codebase and it's complexities (different modes in UI and stuff). I then went ahead with Nextjs. Nextjs allows you to split your code into different component folders making it very efficient and effective way to manage your code. You can either choose page routing or app routing . App routing has better performance. The components in the app routing renders on the server - fast loading time, whereas, in page routing it renders on the client browser. The app routing supports streaming, the page routing does not. I then moved from the local storage to Supabase for storing all my books, chapters, highlights and logs. It has a free-tier, easy to set up and also provides various authentication methods. It has PostgreSQL under the hood. It also supports pgvector to store vectors into the database (I will demonstrate the need for this in a bit).  Now was ...

The amalgamation of two of my passions - reading books and building something useful - is Engrain. Personally facing the problem of retention, hundreds of highlights stored in a drawer that I rarely open. This was the starting point of this project. The first version of the application was a simple frontend (HTML, CSS) to provide the UI to interact with my Fast API backend: a button to create books and chapters, a button to upload the images of the highlights and a button to talk to the Gemini based LLM wrapper. At the backend I had gemini-3-flash-preview model, which is a multi-modal LLM, that reads the image and based on the prompt, generates the highlighted text. All of the highlights, logs and chat history were stored locally. Initially, I had 3 chat modes - Summarize, Brainstorm and Socratic. All the highlights for that specific chapter in scope were provided to the LLM as context and carefully orchestrated system prompts for each mode was made. The summarizer summarizes all of t...