← Back to Projects
PWA EdTech AI-Ready

HiLi Notes

A web-based digital notebook that transforms your PDF highlights into clean, structured notes you can review or export in seconds.

3 Months to Build
5 Beta Testers
100% Launched
Visit Live Site →
HiLi Notes Workspace - PDF highlighting with organized notes
Overview

The Problem

Students highlight 50+ pages of notes but can't remember where key information is, waste 2–3 hours organizing before exams, and end up not reviewing highlights at all.

This is a critical bottleneck in the study process—highlighting doesn't equal understanding. I experienced this pain personally while preparing for exams and observed the same struggle in my friends, especially UPSC candidates and college peers.

My Role

Solo Founder, Product Designer & Full-Stack Developer

Timeline

Oct 2025 – Dec 2025 (3 months)

Target Users

Students, UPSC aspirants, Researchers, Knowledge workers

The Solution

What Makes HiLi Notes Unique

🎯

Auto-Organized Highlights

No other app auto-organizes highlights into structured notes. Select categories directly—no color memorization needed.

📄

One-Click Export

Get ready-to-review study guides in DOCX/PDF format with headers, table of contents, and proper formatting.

✈️

Offline-First PWA

Works seamlessly without internet, syncs when reconnected—critical for students with unreliable connectivity.

🔄

Activate Topics

Jump back to any previous topic and append new highlights without creating duplicates.

Process

Development Timeline

Week 1–2 Oct 10–23

Research & Planning

  • Problem validation with target users
  • Tech stack selection
  • Initial architecture design
  • Competitor analysis
Week 3–4 Oct 24 – Nov 6

Backend Foundation

  • Django & PostgreSQL setup
  • Database schema design
  • REST API architecture
  • Authentication system
Week 5–6 Nov 7–20

Frontend Foundation

  • React & Vite setup
  • Basic UI components
  • Routing implementation
  • Design system creation
Week 7 Nov 21–27

Core Features

  • Core highlighting functionality
  • PDF support with pdfjs-dist
  • Interactive demo creation
  • Email authentication system
Week 8 Nov 28 – Dec 4

Authentication & Export

  • Google OAuth integration
  • Export to DOCX/PDF functionality
  • Push notifications system
  • Brand identity & visual design
Week 9 Dec 5–11

PWA & Security

  • PWA optimization for offline use
  • Security audit (secrets removed, logs sanitized)
  • Service Worker implementation
  • Performance optimization
Week 10 Dec 12–18

Compliance & Notifications

  • Push notifications with VAPID
  • Privacy compliance (active consent)
  • User feedback integration
  • Error monitoring with Sentry
Week 11 Dec 19–25

Deployment & Polish

  • Render deployment (auto-deploy from GitHub)
  • Mobile UX overhaul
  • Cloudinary migration for file storage
  • Beta testing with 5 users
🚀 Launch Dec 27–30

Product Launch

  • Live at hilinotes.com
  • Direct outreach to UPSC faculty
  • Social media awareness campaign
  • Target: 50–100 initial signups
Technology

Tech Stack

🎨 Frontend

React 19 Vite TailwindCSS Framer Motion react-pdf @dnd-kit

🔧 Backend

Django Django REST Framework Celery + Redis JWT Auth Gunicorn

☁️ Infrastructure

Render PostgreSQL Cloudinary Sentry Mixpanel

🤖 AI (Planned)

Claude API Mind Maps Quiz Generation
Challenges

Key Design Challenges & Solutions

01

Categorized Highlighting UX

Problem

Initial color-coding system required users to remember which color mapped to which category—cognitively taxing and unintuitive.

Solution

Switched to fixed category assignment. Users select category names directly (dropdown) instead of colors. App auto-assigns colors.

✓ First-time users understood workflow in <30 seconds
02

Intuitive Workspace UX

Problem

Export buttons buried at bottom, no way to edit categories, organized highlights panel hidden below fold, no mobile right-click.

Solution

Reorganized with sticky bottom nav, "Activate Topic" button for appending highlights, editable category names, click-to-highlight menu on mobile.

✓ User feedback improved from "confusing" to "intuitive"
03

PDF Loading & Persistence

Problem

Loading entire PDFs caused 5–10 second startup, high memory on mobile, lost highlights on refresh.

Solution

Lazy-loading pages on scroll, dual-layer persistence (localStorage + backend), Service Worker for offline sync.

✓ Load times under 2 seconds, zero data loss
Outcomes

Key Learnings

1

Mobile-First Design Matters

Designing for desktop first and adapting to mobile later caused weeks of rework. Constraint drives innovation—design for mobile from Day 1.

2

Validate with Users Early

I spent 2 weeks optimizing the dashboard before getting feedback—only to learn users didn't care about that part. Show testers a working version every 7 days.

3

Ship Core Feature Great

My biggest mistake was spending more time on dashboard than highlight workspace. The dashboard doesn't matter if the core feature sucks.

Feedback

Early Tester Response

What's Next

Future Roadmap (not yet built)

Q1 2026

Multi-Source Documents

Add multiple PDFs/DOCX to a single workspace, keeping everything organized chronologically.

Q2 2026

AI-Powered Features

Mind maps, flowcharts, smart summaries using Claude API. Quiz generation with spaced repetition.

Q2 2026

Chat with AI

Ask questions about your notes, get instant personalized explanations without leaving the app.

2027

Scale & Native Apps

iOS & Android apps, team collaboration, multi-language support. Target: 100K users.

Explore More

Other Case Studies

OmniMarketerAI

AI-powered marketing automation platform for email sequences and social content.

AppPulse

Enterprise feedback intelligence with AI-powered sentiment analysis.

TimeWise

UX case study for a smart productivity app — research, wireframes, and prototyping.

Try HiLi Notes Today

Transform your highlights into structured notes, effortlessly.

Visit HiLi Notes → View More Projects