ReadeEase

Inspiration

Reading should not be a barrier to learning. Yet for many students, dense text, reading fatigue, and a lack of accessible tools make studying unnecessarily difficult. When we looked at existing study apps, they either focused purely on reading OR purely on flashcards. We wanted to bridge that gap for AccessED Hacks 2026 by building an all-in-one workspace that makes learning materials approachable and helps students retain what they read.

What it does

ReadEase is an accessibility-first learning workspace. Students can:

• Import materials: Upload TXT, PDF, or DOCX files (or paste text).
• Read comfortably: Adjust fonts (including Atkinson Hyperlegible for low vision), line spacing, and themes. Use Focus Mode or a Reading Ruler to stay on track.
• Listen: Use the built-in Text-to-Speech engine.
• Annotate: Highlight text in 3 colors, add notes, and bookmark important passages.
• Revise: Click one button to auto-generate spaced-repetition flashcards from the text using a custom NLP algorithm.

How we built it

ReadEase is built with Vanilla JavaScript, HTML5, and CSS3 with zero frontend frameworks for maximum speed.

• We used PDF.js and Mammoth.js to parse documents locally in the browser.
• We used the Web Speech API for text-to-speech.
• Instead of relying on expensive AI APIs, we built a custom Local NLP Engine in plain JavaScript. It scores sentences based on definition patterns and keyword density to generate "Cloze" (fill-in-the-blank) flashcards.
• We implemented a modified SM-2 Spaced Repetition algorithm to schedule reviews.
• All data (flashcards, annotations, preferences) is saved locally using localStorage and sessionStorage, meaning the app is 100% privacy-focused (no backend needed).

Challenges we ran into

• Routing without a server: We built a custom Hash Router (#/reading/reader) combined with sessionStorage so that users can refresh the page or use the browser's back/forward buttons without losing their document or getting a 404 error.
• Mobile UX: Making a web app feel like a native app on mobile was tough. We had to carefully rewrite the CSS to create a swipeable toolbar and ensure the speech player didn't overlap with text on small screens.
• Custom Flashcard Generation: Writing an algorithm to find "important" sentences and extract terms without using an LLM was a massive challenge, requiring a lot of regex pattern matching and text segmentation logic.

Accomplishments that we're proud of

We are incredibly proud of the UI/UX. The warm, paper-like theme combined with the forest green accents creates a calming environment specifically tailored for studying. We are also proud that the entire flashcard generation runs locally in milliseconds without needing an internet connection or API keys.

What we learned

We learned a lot about DOM manipulation, state management in Vanilla JS, and the intricacies of the CSS Cascade. We also learned how to parse different file types (PDF/DOCX) directly in the browser and how to implement spaced-repetition math.

Built With

• css3
• html5
• javascript
• localstorage
• mammoth.js
• pdf.js
• web-speech-api