Development of DRA Assessment Web Application
Facundo Cappella
Loading this content connects you to dra-assessment-app.vercel.app.
dra-assessment-app.vercel.app privacy information
DRA Assessment App
AI-powered reading assessment with real-time speech analysis — fully private, browser-native
🚀 Overview
The DRA Assessment App is a modern web tool designed to streamline Diagnostic Reading Assessment (DRA) evaluations through real-time speech recognition and automated scoring.
Traditional reading assessments are manual, time-consuming, and subjective. This project reimagines that workflow by combining browser-native speech recognition with algorithmic text analysis to deliver instant, consistent, and privacy-first results—without relying on any backend infrastructure.
The result is a fast, lightweight application that educators can use anywhere, with zero setup and zero data risk.
🧠 Problem
Educators conducting reading assessments face several challenges:
Manual tracking of reading accuracy is error-prone
Scoring takes time and interrupts the flow of assessment
Existing tools often require logins, cloud storage, or paid subscriptions
Privacy concerns when dealing with student data
There was an opportunity to build a frictionless, real-time, and privacy-respecting solution.
💡 Solution
I built a fully client-side application that:
Listens to a student reading aloud using the Web Speech API
Transcribes speech in real time
Compares spoken words against the original passage using Levenshtein distance
Instantly calculates accuracy and assigns a DRA proficiency band
Generates downloadable reports—without sending any data to a server
Everything runs directly in the browser, ensuring speed, simplicity, and complete data ownership.
⚙️ Key Features
Real-Time Reading Assessment
60-second timed reading sessions
Live transcription feedback during reading
Immediate scoring upon completion
Intelligent Scoring Engine
Word-level comparison using edit distance algorithms
Detection of:
Correct words
Omissions
Substitutions
Automatic classification into:
Independent (≥95%)
Instructional (90–94%)
Frustration (<90%)
Privacy-First Architecture
No backend, no APIs, no tracking
All data stored in
localStorageFully offline-capable after initial load
Passage Management System
CRUD interface for custom reading passages
Preloaded content for instant usage
Smooth navigation between passages
Reporting & Export
Structured assessment summaries
One-click PDF generation for record keeping
🏗️ Technical Approach
This project was intentionally designed with minimal dependencies and a strong focus on leveraging modern browser capabilities.
Frontend Architecture
React + TypeScript for scalable UI and type safety
Component-driven design with clear separation of concerns
CSS Modules for maintainable styling
Browser-Native Capabilities
Web Speech API for real-time transcription
localStorage for persistence
Print API for PDF generation
Scoring Algorithm
Implemented a Levenshtein distance-based comparison to evaluate spoken vs expected text
Optimized for word-level accuracy rather than character-level noise
Designed to handle imperfect speech recognition gracefully
⚖️ Key Trade-offs & Decisions
1. No Backend by Design
✅ Pros: Zero latency, maximum privacy, no infrastructure cost
❌ Cons: Limited analytics, no cross-device sync
2. Web Speech API vs External Models
✅ Pros: Free, fast, no dependencies
❌ Cons: Accuracy varies by browser and environment
3. Simplicity over Feature Bloat
Focused on solving the core assessment workflow extremely well
Avoided unnecessary complexity (auth, dashboards, cloud storage)
📈 Impact
Reduces assessment time from minutes to seconds
Eliminates manual scoring errors
Enables instant feedback during reading sessions
Makes the tool accessible with zero onboarding
🔮 Future Improvements
More robust speech models for higher transcription accuracy
Historical tracking and progress dashboards
Multi-language support
Teacher collaboration features
Optional cloud sync (while preserving privacy-first defaults)
🧩 Why This Project Stands Out
This project demonstrates:
Strong product thinking (clear problem → focused solution)
Ability to leverage browser APIs instead of over-engineering
Solid understanding of algorithms applied to real UX problems
Clean, maintainable frontend architecture
A bias toward performance, simplicity, and privacy
Like this project
Posted Mar 29, 2026
AI-powered reading assessment app: real-time speech analysis, instant scoring, privacy-first, and PDF reports—fully browser-based, no backend needed.
Likes
1
Views
10
