A dyslexia-friendly study and task management app for adult learners returning to education.
Study Buddy was built as a portfolio project to demonstrate front-end development skills while solving a real problem — making study tools more accessible for adult learners, particularly those with dyslexia.
The app is intentionally simple, calm, and distraction-free. Every design decision was made with the user in mind, from font choices to colour contrast to spacing controls.
💻 Live Demo https://studybuddy-by-codebadger.netlify.app/
- Add, complete and delete tasks
- Organise by subject with custom emoji tags
- Persistent storage — tasks survive page refreshes
- Pomodoro-style focus and break timer
- Fully customisable duration via drag sliders
- Human-readable time display (e.g. "1 hour 30 minutes")
- Session counter to track daily progress
- Add titled notes organised by subject
- Expand and collapse notes on click
- Auto-saved to localStorage
- 5 font choices including OpenDyslexic and Atkinson Hyperlegible
- 3 colour themes — Light, Dark, High Contrast
- Text size controls — 4 step zoom (90% to 120%)
- Line spacing controls — Tight to Spacious
- Letter spacing controls — Normal to Extra Wide
- Colour tint overlay — Warm, Cool, Rose, Mint, Sand
- Custom subjects — add your own with emoji picker
- Live reading preview — see all changes instantly
- Welcome screen on first visit
- Tooltip hints on every page
- Full Help page with study tips
- HTML5 — semantic structure
- CSS3 — custom properties, flexbox, CSS variables for theming
- Vanilla JavaScript — no frameworks, no dependencies
- localStorage — persistent data without a backend
- Google Fonts — Lexend, Atkinson Hyperlegible
- CDN Fonts — OpenDyslexic
This was my first complete JavaScript project, built from scratch after learning HTML and CSS fundamentals. Key concepts I learned and applied:
- DOM manipulation and event listeners
- Working with arrays and objects
- localStorage for data persistence
- CSS custom properties for live theming
- Accessibility-first design thinking
- Building reusable functions
- Debugging with browser DevTools
- Git version control and Netlify deployment
No installation needed. Just open index.html in any modern browser.
Or visit the live version: thesett-by-codebadger.netlify.app
This is Phase 1 of a planned multi-phase project:
- Phase 2 — React conversion with component architecture
- Phase 3 — Pomodoro history, weekly goals, progress charts
- Phase 4 — Supabase backend with user authentication
- Phase 5 — Accessibility audit, animations, case study write-up
CodeBadger
- GitHub: The Code Badger(https://github.com/TheCodeBadger)
- Built as part of a self-taught development journey 🎓
This project is open source and available under the MIT Licence.
Study Buddy — a study companion designed for the way you think.