Flow - Reading & Writing Assistant

Flow is an AI powered app for people with dyslexia and dysgraphia where they can upload PDFs to reformat them or just speak and Flow writes it down while fixing the grammar and removing filler words.

Comment

Inspiration

Researchers at Yale found that dyslexia affects about 1 in 5 people. Not 1 in 100 but 1 in 5. That had me thinking about how many people actually struggle with reading and writing, especially with dysgraphia too since that affects typing and organizing thoughts.

That's what inspired Flow. An app for people with dyslexia and dysgraphia to read documents easier and write without the struggle. We used OpenDyslexic font which is scientifically proven to help dyslexic readers and warm color tones instead of harsh white and black because those are the proven accessibility standards.

What it does

Flow has two main modes:

Read Mode: Upload a PDF and Flow reformats it to make it easier to read with better spacing and simpler language. Adjust the complexity level based on how you want it. Ask questions about the document using voice, get summaries or you can just read through it.

Write Mode: Click Record and speak naturally. If you say "write an essay" or "create a poem", Flow generates new content for you. If you just talk, it cleans up your grammar and removes all the um's, uh's, and like's. You can keep recording to add more text instead of replacing what you wrote. Edit manually with the Edit button, clear everything with New, or polish your whole draft at once.

How we built it

I Used React and Vite for the frontend and just plain vanilla CSS . Used Express.js for the backend. I integrated the Google Gemini API for all the content generation and formatting. ElevenLabs API for text-to-speech and some speech to text. Web Speech API for voice input.

Challenges we ran into

Building this alone in 36 hours was rough and especially since this was my first hackathon. Getting paragraph breaks to display correctly was EXTREMLY annoying and on top of that Gemini kept adding spaces after every line instead of every 4-5 sentences. Keyword detection was not working with regex so I had to rewrite it with explicit checks instead which was a headache and 2.The hardest part was doing everything solo all the frontend, backend, API integration, styling, testing. When something breaks I was the only one working on it so the last 12 hours feel endless.

Accomplishments that we're proud of

Honestly, just finishing this thing in 36 hours is an accomplishment for me. This is the first time I have built a full project under a time constraint and actually completed it. No matter what I am proud of that fact. Most of the features I designed in the planning and designing stage I was actually able to implement. The custom scrollbar I created was a cool to know small accomplishment. But yeah, just getting it done and working is what I am most proud of.

What we learned

I learned to build with React since this is my first project .Working with API integration like Gemini for text processing and ElevenLabs for speech-to-text and text-to-speech itwas completely new for me as well and getting that whole chainn working together was the hardest part but it did taught me about APIs more also learned that small UI details like spacing, font choice, and colors and how can you tweak small details and also desining a UI specifically for accessibility.

What's next for Flow - Reading & Writing Assistant

The obvious next plan is to build Flow so that it can be used as a web extension , you can highlight any text on the website and Flow will reformat it into accessible fonts such as OpenDyslexic. Voice input for navigating a website is an ideal feature I would like to build for accessibility purposes. The bigger vision is getting it into schools so that students that do have dyslexia or dysgraphia are not left behind because the tools we made are not accessible for them

Built With

Share this project:

Updates