Ever feel tired of reading walls of text? Speadr is an all-in-one speed reader to help you read boring text faster and more efficiently with tons of features and customizations like import, speed, themes, zen mode, and more. This is a modern, super-fast, optimized single page application built with React, TypeScript, and Tailwind.
🔥 AVD marked your project as well cooked! As a prize for your nicely cooked project, look out for a bonus prize in the mail :)
Finished making Speadr, a fast, customizable, minimalist, all-in-one reading tool! Speadr offers a smart speed reading engine that uses RSVP (Rapid Serial Visual Presentation) to flash words on screen quickly to eliminate the need for your eyes to move and scan the words horizontally, significantly increasing your reading speed. The reader pauses longer on commas and periods to simulate natural speech, and provides a highlighted focal point with box guidelines to help lock your eyes in place and process words even faster if the focal point toggle is enabled. There’s a progress bar and a word count/time remaining section to provide additional information. You can start, pause, resume, exit, restart, and skip forward/go back 10 words during a reading session with both UI buttons and keyboard shortcuts. You can also toggle zen mode to hide everything except for the text to focus even more. You can even import a txt/doc/docx file for quick access and click on the information icon for more information about the app. There are a ton of customizations too, including custom speed WPM, font size, color themes, and more. The app is fully responsive and optimized with SEO to ensure accessibility to everyone along with fluid animations and transitions as well.
Added a progress bar with smooth animation that shows the reader’s current progress on the text to give you a rough idea of how much of the text you’ve finished. Added estimated time remaining for the reading session below the word count (not 100% accurate since it doesn’t account for longer pauses on commas and periods) that displays the time in minutes and seconds. Added responsive styling for the entire app to ensure the app is easily accessible and usable on all screen sizes for everyone to use! Finally added a logo that only serves as the tab favicon because I couldn’t figure out (or just too lazy) how to put the logo without ruining the design. Added SEO (but still absolutely not a single soul will use this app) as well.
Log in to leave a comment
Added themes dropdown functionality to the settings modal so you can select different color/UI themes to read more comfortably and customize the site even more! Currently there are 5 different themes for you to select: midnight (default dark neutral), ocean (dark blue), rust (dark orange/red), forest (dark green), and daylight (light neutral)! I spent a lot of time rewriting a ton of Tailwind utility color classes of different CSS/Tailwind variables to make sure all the different colors from the different themes work well and fit together across the entire app. Also spent some time converting annoying color values from hex to oklch and hsl because Tailwind is annoying to make sure the color palette is consistent everywhere. Whenever you choose a different theme, the site colors update instantly with a smooth transition animation so your eyes don’t burn out. The settings are automatically saved as well. Also updated styling and base colors to fit the themes better.
Log in to leave a comment
Finally added the import feature so when you click on the import text button, you can upload either a .txt, .doc, or .docx file to Speadr and it’ll parse the raw text and import it into the text area so you can start speed reading it instantly. .txt files are easy to parse since they’re simple but Word documents are more complicated because it’s wrapped in XML and stuff so I had to import the Mammoth.js library to extract raw text from Word files. Added an esc key shortcut to exit out of reading mode and go back to the text input page. Pressing esc with zen mode enabled will exit out of zen mode, and if you press it again it will stop and exit out of the reader. Also updated a bit of styling to make sure long words are properly contained and centered when the focal point option is enabled. Speadr is now pretty close to complete, I just need to implement different themes, and I’m really excited to ship this and share it with all of you!
Log in to leave a comment
Added a GitHub button that takes you to the Speadr GitHub repo and an about Speadr button that makes the reader display or demo information about how Speadr works and its features. Added a restart button that restarts the reader to the beginning of the text as well as its keyboard shortcut, the r key. Added an option in the settings modal to reset all the settings back to default and added credits to the modal as well. Added a live word count display that shows the reader’s current progress on the text. Added a bunch of tool tips to improve UX and fixed some annoying keyboard shortcuts and browser defaults bugs. Updated styling and the UI layout as well.
Log in to leave a comment
Updated the UI so the app is a bit wider and makes it easier to read and click on the different buttons. Added an import text button that currently doesn’t do anything and a settings button that opens a settings modal with options for reader speed (WPM), font size (3 options: small, default/medium, and large), theme (currently doesn’t work), and toggle focal point, as well as their icons and smooth animation for opening/closing the modal. You can close the modal by clicking outside of the modal for easy UX. If the focal point option is unchecked, the reader won’t highlight a letter red for focus or provide center guiding lines to help your eyes focus. All the settings and customizations are automatically persisted in local storage, so you don’t need to worry about your settings not saving!
Log in to leave a comment
Added controls to the speed reader so you can read however you want! You can start, pause, resume, exit, go back/skip forward 10 words, change WPM speed, and activate zen mode all while the speed reader is active to make navigation super easy and customizable. I also added a ton of keyboard shortcuts (ctrl + enter for quick start, space for resume/pause/exit, and left/right for back/forward) as well as tool tips for them to make everything even faster and easier to use. Added zen mode to help you focus while reading by hiding everything except for the text when the reader is active. Keyboard shortcuts still work in zen mode, and the UI comes back after the reader finishes. Updated the reader so it pauses longer when there’s a period or comma to simulate natural speech and made it more optimized, more performant, and doesn’t glitch when WPM is set to fast. Updated styling and improved overall performance of the app as well.
Log in to leave a comment
Started developing Speadr, the all-in-one web app with tools like speed reader and zen mode to help with your reading! For this devlog, I set up the basic React Vite app since this is a frontend only single page application, and set up some boilerplate for Tailwind, TypeScript, and GitHub Pages deployment as well. Made the basic layout for the app with a heading, description, zen mode and speed reader speed in WPM options, textarea for the text you’re reading, and a start button that starts the reader. When the speed reader starts, a word will briefly appear in the center with a highlighted red letter aligned to keep your focus on it. The app will flash the words quickly for the entire piece of text and this helps with reading speed a lot since you don’t have to manually move your eyes and scan each sentence. I’m super excited about this project, and I have a ton of really cool features planned that I can’t wait to implement!
Log in to leave a comment