DEV Community: Sukhjit Singh

Notes Study

Sukhjit Singh — Sun, 04 Oct 2026 19:31:34 +0000

What I Built

The Story: Building for My Friend

A few weeks ago, I watched my close friend sit at a university library desk surrounded by 60-page PDF lecture slides, handwritten margin notes, and textbook extracts, preparing for grueling semester exams.

Like many students, my friend was caught in the trap of the fluency illusion—passively re-reading highlighted lecture decks until the words felt familiar, only to draw a blank when facing an empty exam paper. When they tried using mainstream cloud AI chatbots to generate revision questions, three major frustrations quickly surfaced:

Hallucinations & Disconnect from the Syllabus: Generic chatbots frequently answered with facts or definitions outside their professor's course scope, confusing them right before exam day.
Privacy & Coursework Restrictions: My friend was uncomfortable (and university honor codes discouraged) pasting proprietary lecture notes, unreleased research handouts, and assignment drafts into commercial, closed-source cloud AI platforms that retain user data for retraining.
Paywalls & Cloud Reliance: Cloud AI tools charge steep monthly subscriptions that student budgets can't maintain—and in the basement of the university library where Wi-Fi drops, cloud tools become completely useless.

I built Study From My Notes to solve this exact problem: a distraction-free, local-first study workspace that transforms a student's own documents into an active-recall revision experience, powered 100% on their own machine by open-weight AI.

What It Does

Study From My Notes does not just passively summarize documents. It actively coaches the student to understand, memorize, and test themselves strictly against the text they provide:

📄 In-Browser Document Extraction & Quality Auditor: Drag-and-drop PDFs, .txt, or .md files. Extracted text is processed entirely in the browser using pdfjs-dist, preserving page numbers and word counts. A built-in Quality Auditor detects scanned/empty pages and lets students inspect and correct raw text page-by-page.
💡 Explain My Notes (6 Pedagogical Modes): Explains challenging passages in six distinct learning frameworks:
- Simple Language (Feynman Technique): Translates dense jargon into plain, intuitive analogies.
- Step by Step: Deconstructs multi-stage processes sequentially.
- Practical Analogy: Connects theoretical models to everyday situations.
- Compare & Contrast: Sharpens distinctions between easily conflated concepts.
- Exam Model Answer: Structures responses with thesis, evidence, and conclusion.
- Socratic Challenge: Tests comprehension by asking probing follow-up questions.
🔍 Ask My Notes (Zero-Hallucination Q&A): Grounded question answering that delivers confidence indicators, relevance scores, and clickable page citations that jump straight to the source passage in the reader.
🗂️ Tactile Active Recall Flashcards: Interactive 3D flip cards with Leitner/SuperMemo-inspired spaced repetition ratings (Again, Hard, Good, Easy) and full keyboard navigation (Space to flip, 1-4 to rate).
🎯 Diagnostic Quizzes & Instant Feedback: Generates multiple-choice and True/False questions with plausible distractors. Every explanation quotes the supporting passage from the student's notes verbatim.
🔄 Smart Revision Queue: Automatically logs missed quiz questions and difficult flashcards into a focused review queue, so my friend can drill their weakest concepts in a one-click "Retry Missed Questions" flow.

Demo

Experience the live application or run it locally in under a minute:

🌐 Live Demo: https://notes-study.vercel.app/ (Or test directly on [GitHub Pages / Deployed Instance])
🌐 Demo Video: https://youtu.be/jFd8-0K3IWI?si=tgtsH9tuaIhLx0yh
🌐 Github Link: https://github.com/the-sukhsing/notes-study

How to Run Locally with Ollama:

# 1. Clone the repository
git clone https://github.com/the-sukhsingh/notes-study.git
cd notes-study

# 2. Install dependencies & run development server
npm install
npm run dev

# 3. (Optional) Run with local open-weight models via Ollama
ollama run llama3.2

Open http://localhost:3000. The app automatically detects Ollama at http://localhost:11434, or you can toggle the built-in deterministic offline engine with zero setup!

Code

The entire codebase is open source under the MIT License.

Repository: https://github.com/the-sukhsingh/notes-study

Tech Stack:

Frontend: Next.js 16 (App Router), React 19, TypeScript
Styling & Motion: Tailwind CSS v4, Motion (Framer Motion), Apple-inspired minimalist design tokens
PDF Processing: pdfjs-dist (100% client-side text extraction)
Local State & Storage: Browser localStorage with full JSON backup & restore

How I Built It

Dual AI Architecture

To ensure my friend could study anywhere—from high-performance home desktops to low-spec library laptops without an internet connection—I engineered a Dual AI Architecture:

                  ┌────────────────────────────────────────┐
                  │          Student Study Material        │
                  │         (PDFs / Notes / Slides)        │
                  └───────────────────┬────────────────────┘
                                      │
                         Client-side PDF Extraction
                         & Page-by-Page Audit Loop
                                      │
                    ┌─────────────────┴─────────────────┐
                    ▼                                   ▼
        ┌───────────────────────┐           ┌───────────────────────┐
        │   Ollama Local LLM    │           │   Built-In Offline    │
        │      (Open Weights)   │           │      NLP Engine       │
        ├───────────────────────┤           ├───────────────────────┤
        │ • Llama 3.2 / Mistral │           │ • 100% Client-Side    │
        │ • Structured JSON     │           │ • Zero Dependencies   │
        │ • Page-by-Page chunks │           │ • Deterministic Closes│
        │ • Rich Feynman Logic  │           │ • TF-IDF Term Ranks   │
        └───────────────────────┘           └───────────────────────┘

Local Open-Weight Model Integration (Ollama):
- The app communicates directly with a local Ollama daemon (http://localhost:11434).
- Supported open-weight models include Meta's Llama 3.2, Mistral, Phi-3, and Qwen 2.5.
- To prevent malformed responses, the app enforces Structured Outputs (format: 'json') with strictly typed Zod/TypeScript schemas.
- Document passages are chunked page-by-page so the model always receives exact page boundaries, allowing it to cite verbatim excerpts and precise page numbers without hallucination.
Deterministic Built-In Offline Engine:
- For friends studying on lightweight laptops without local LLM capabilities or GPU acceleration, I built an extractive natural-language processing engine directly into the TypeScript bundle.
- It uses rule-based clause extraction, sentence tokenization, and TF-IDF term scoring to generate valid flashcards, Feynman-style summaries, and diagnostic multiple-choice questions without any external network request or LLM installation.
Local-First Privacy & Zero Telemetry:
- Notes never touch an external server. Everything—extracted pages, generated flashcard decks, quiz score histories, and SRS intervals—is persisted in the browser's localStorage.
- Complete data sovereignty: students can export their entire study deck as a portable JSON backup and wipe their local state with a single click.

Why Does Open Innovation Matter?

This project directly embodies the ethos of open innovation and open-weight AI:

Data Sovereignty & Academic Privacy: Proprietary university syllabi, medical lecture slides, and personal student notes should belong to the student. Closed APIs require sending sensitive data to external servers where it can be logged, analyzed, or retained. Open-weight models running locally guarantee complete privacy.
Eliminating the Economic Barrier to Education: Premium cloud AI subscriptions ($20/month) create an inequitable divide between students who can afford AI-assisted learning and those who cannot. Open-weight models like Llama 3.2 running on free tools like Ollama democratize high-level active recall for every student with a laptop.
True Resilience & Offline Accessibility: Closed APIs fail the moment campus Wi-Fi throttles or internet access goes down. Open innovation ensures tools work on a train, in a flight, or in a Wi-Fi-dead library basement.
Inspectable, Controllable Intelligence: With closed APIs, providers can stealthily modify system prompts, alter model guardrails, or deprecate models without warning. With open weights, we can inspect prompt dynamics, constrain temperatures, fine-tune specific study behaviors, and verify that citations are strictly grounded in truth.

Prize Categories

Hacktoberfest Overall Challenge: Build for a Friend

(Note: While this project emphasizes 100% local-first client & Ollama inference, the web application can also be deployed to partner runtimes such as Render).

How Kiro Transformed the Way I Build: From Code to Vibes

Sukhjit Singh — Thu, 04 Dec 2025 21:06:24 +0000

When I started building Ghostly Tales, a minimal, atmospheric ghost-story generator with a cinematic horror UI, I expected the biggest challenge to be the visuals. Horror is all about vibe, pacing, and subtle cues — and bringing that into code usually means hours of tweaking borders, animations, lighting, and interactions.

This time, though, everything changed.

I had Kiro.

And for the first time, I felt like I wasn’t coding alone — I was coding with a creative partner.

The Shift: From Writing Code → Describing Feelings

What surprised me most was how natural it felt to collaborate with Kiro.
I didn’t have to explain implementation details. I didn’t have to plan out the CSS or animation layers.

Instead, I described intentions:

“Make the border feel alive.”
“Give this component a haunted glow.”
“I want this UI to feel like it’s breathing.”
“Make the storytelling container cinematic and quiet.”

Kiro didn’t just understand the words — it understood the tone.
It generated structured, meaningful code that matched the emotional aesthetic I had in my head.

This wasn’t prompt engineering.

This was vibe coding.

And it changed everything.

Building Ghostly Tales With Kiro

Ghostly Tales is a tiny project built in a single day, but it feels like something bigger because its personality shines through. A supernatural typing animation reveals stories one character at a time. A distorted, glowing frame makes the UI feel alive. The whole experience is eerie, minimal, and oddly beautiful.

Kiro helped me accelerate the parts that typically slow me down:

1. Complex UI Layers

The ghostly card wrapper — a component with turbulence filters, glow layers, overlays, and distortions — came together in minutes with Kiro’s help.
It handled:

animated SVG turbulence filters
layered masking and glows
border distortion logic
performance-safe structuring

This would’ve taken hours (or more) to handcraft.

2. Animation Logic

Kiro helped refine the typing animation, which reveals stories at an adjustable pace with a flickering cursor. It suggested improvements for:

batching character updates
preventing jank on long stories
separating cursor timing from text rendering

The result?
An animation that feels eerily alive — with clean, maintainable code.

3. Faster UI Iteration

Every time I wanted to try a new glow intensity, radius, or turbulence amount, I didn’t have to manually adjust 20 values. I simply told Kiro:

“Make the orange glow feel warmer and more cinematic.”

And it regenerated the component with a new, balanced palette — no copy-pasting, no juggling hex codes.

Agent Hooks: Reducing the Repetitive

I also experimented with Kiro’s agent hooks to automate repetitive workflow tasks:

UI regeneration hooks that updated component variants while retaining structural consistency
Prompt-validation hooks to ensure story inputs were always valid

These small automations saved countless micro-decisions and kept the flow uninterrupted.

Spec-Driven Development Meets Vibe Coding

Before writing the first line of code, I created a short spec describing:

UI hierarchy
component boundaries
animation states
styling philosophy (“haunted minimalism”)
input/output schema for the story generator

Kiro used this as a north star, ensuring consistency across every iteration and regeneration.

Spec-driven development gave the project structure.
Vibe coding gave it soul.

And together, they allowed me to build faster and more creatively than ever before.

How Kiro Changed My Development Mindset

Using Kiro didn’t just accelerate development — it changed the way I start projects.

Before Kiro:
I’d open a blank file, sketch the architecture, fight with styling, and chip away until something resembled my idea.

After Kiro:
I begin with intention. Mood. Emotion. Aesthetic.
And Kiro helps me grow that into code.

Development feels less like constructing and more like co-creating.

That’s the magic.

Looking Ahead

Ghostly Tales is just a small example, but it revealed something huge:
Kiro unlocks a style of building that blends creativity with engineering in a way traditional coding doesn’t.

I’m excited to explore:

automated design-to-code workflows
style-driven UI engines
project scaffolding through vibes and specs
agent-driven animation systems

Kiro didn’t just change my workflow.

It changed my starting point.

And once you experience that shift, you don’t want to build any other way.

Building PDF Editor

Sukhjit Singh — Sat, 06 Sep 2025 17:14:26 +0000

Introduction

In today's digital-first world, PDF documents remain the standard for sharing and preserving formatted content across platforms. However, the tools for working with PDFs often fall into two categories: powerful but complex desktop applications or limited online utilities with privacy concerns. Our team set out to bridge this gap by creating a comprehensive, browser-based PDF editor that prioritizes user privacy, performance, and accessibility.

The Challenge

PDF manipulation has traditionally been challenging in web environments. The complexities of the PDF specification, performance limitations of JavaScript, and user expectations set by desktop applications created a high bar for success. We wanted to build a solution that would:

Process PDFs entirely client-side to ensure document privacy
Provide a responsive, intuitive interface across devices
Support core PDF operations (editing, converting, merging) without compromise
Deliver performance comparable to native applications

Our Solution: Architecture Overview

We built our PDF Editor using a modern tech stack centered around Next.js 15 and React 19, leveraging the latest advancements in web technology:

Frontend Framework: Next.js 15 with React 19
PDF Processing: pdf-lib and PDF.js for client-side document manipulation
UI Components: Custom components built with Radix UI primitives and Tailwind CSS
State Management: React Context API for application state
File Handling: react-dropzone for intuitive file uploading

The application's architecture emphasizes client-side processing, ensuring that user documents never leave their browser. This approach eliminates privacy concerns while providing immediate feedback during document operations.

Key Features

PDF Editing

Our editor provides intuitive tools for modifying PDF documents:

Text addition with customizable fonts, sizes, and colors
Shape and annotation tools for highlighting and emphasizing content
Smart layout preservation that respects the original document structure

The editing interface uses canvas-based rendering through PDF.js, with a custom overlay system for manipulating PDF elements without altering the underlying document until changes are committed.

PDF Conversion

The conversion module addresses two common needs:

PDF to Image: Users can extract pages as high-quality images in various formats, with controls for resolution and quality settings.
Image to PDF: Multiple images can be combined into a single PDF with options for page size, orientation, and layout.

Both conversion processes run entirely in the browser using a combination of Canvas APIs and the pdf-lib library, ensuring privacy while maintaining quality.

PDF Merging

Our merge functionality allows users to:

Combine multiple PDFs into a single document
Select specific pages from source documents
Rearrange pages through an intuitive drag-and-drop interface
Preview the final document before downloading

This feature leverages pdf-lib's document manipulation capabilities, with careful memory management to handle large documents efficiently.

Technical Deep Dive

Client-Side PDF Processing

One of our biggest technical challenges was implementing robust PDF manipulation entirely in the browser. We approached this by:

Using Web Workers to move processing off the main thread
Implementing progressive rendering for large documents
Creating a custom buffering system to manage memory usage
Leveraging typed arrays and binary data for efficient document handling

The result is a system that can handle documents hundreds of pages long without significant performance degradation.

Modern UI Implementation

Our interface is built on Radix UI primitives, providing accessibility and consistent behavior across browsers. We extended these components with:

Custom animations for smooth transitions between states
Responsive layouts that adapt to different screen sizes
Keyboard shortcuts for power users
Dark mode support through CSS variables and next-themes

Progressive Web App Capabilities

The application is designed as a Progressive Web App (PWA), offering:

Offline functionality for previously opened documents
Installation on desktop and mobile devices
File system integration where supported by the browser
Responsive design that works across devices

Performance Optimizations

Performance was a critical consideration throughout development. Key optimizations include:

Code splitting: Dynamic imports to load features on demand
Web Workers: Processing PDF operations in background threads
Memory management: Careful resource allocation and cleanup
Rendering optimizations: Canvas reuse and lazy loading of document pages

These techniques allow our application to maintain responsive performance even when working with large, complex documents.

Future Directions

As we continue to develop our PDF Editor, several exciting enhancements are on the roadmap:

AI-assisted editing: Intelligent content recognition and manipulation
Collaborative editing: Real-time document collaboration
Enhanced form handling: Creation and filling of interactive forms
Advanced security features: Password protection and document encryption

Conclusion

Building a feature-rich PDF editor that runs entirely in the browser presented significant technical challenges, but the result is a powerful tool that respects user privacy while delivering desktop-class functionality. By leveraging modern web technologies and careful performance optimization, we've created an application that makes PDF manipulation accessible to everyone, anywhere.

We invite you to experience the future of browser-based document editing. The project is open source and available on GitHub, where we welcome contributions and feedback from the community.