FocusReads - Read more—without distractions.

A website where you can (Focus) on your (Reading Goals). Set aside time with a Pomodoro, read PDFs/EPUBs, and Listen to Music, all in one place. Immerse yourself. Read —without distractions.

Comment

FocusReads: A New Way to Read, Listen, and Stay Focused Live Demo: link Devpost Submission: Completed for Bolt.New Hackathon LinkedIn Updates and Articles: @theitleader | link

Project Summary

FocusReads is a web app designed to help users stay focused on their reading goals. Read more—without distractions. It combines a Pomodoro timer, ePub/PDF reader, music playback, and note-taking—all within a single immersive interface. You never have to leave the page focus page. But, if you want a book to buy, or if you take notes there's sections for that.

It can be used for education, it can be used for business, it can be used for personal development, and entertainment. Small habits compound into larger achievement.

How It Started

I began this project in June as part of the Bolt.New Hackathon, aiming to build and submit something raw and meaningful in just two days. I intentionally worked from a Panera with minimal prior use of Netlify, Supabase, or Ionos to simulate a traditional high-pressure hackathon experience.

I tracked issues and received feedback from Panera guests to improve the app live with Trello cards. I recorded, edited (Capcut), and uploaded my video to vimeo all in Panera. A cool feature that came from the guests feedback is that notes should be organized and filterable by the book you're reading.

The only part not built in Panera? The idea.

The Inspiration While listening to an audiobook during a drive, my phone glitched and started playing Spotify music over the narration. So, I timed it. Surprisingly, it worked. I felt more engaged, more focused. That moment sparked the idea: what if I could recreate that environment—music, reading, and timing—all in one space?

How It Works

Users can start with an optional onboarding survey that powers a custom reading experience. The survey helps personalize:

Book genres & mood-based recommendations

Pomodoro session lengths based on available reading time but can be manually set

Personalized goals and note prompts

Clear guidance on how many sessions it would take to complete books of varying lengths ....

Key Features

All-in-One Interface: Pomodoro, Read EPUBs/PDFs, play music, without switching tabs

Pomodoro Timer: Built-in session timer to stay productive

Goal Reminders

Note-Taking: Save and export insights while reading

Personalized Book Recommendations: Tailored to your interests and mood

Music Playback: Use YouTube or upload your own tracks

Tech Stack & Build Notes

Built using Bolt, integrated with Open Library API for book data. The ISBN, The Custom logic drives personalization, audio handling, and reading workflows. All pages written in TypeScript. Key JavaScript libraries handle multimedia content, persistent timers, and state management across pages. Note taking to book title: Each note has goal related hashtags set by the survey results (Optionally Manual Hashtags too) and when you write a note you start with the book so you always know the goal of a note and the book it was for. Even if you have multiple books open. Also, if it's textbooks that you have in front of you without a PDF, there's a ISBN lookup tool in My books help you add the book. I think this should be moved to the add note section incase someone is starting a note for a book they didn't add to My Books.

Challenges Overcome

Rendering PDF/EPUB readers reliably | Ehh, it loads but sometimes doesn't display

Seamless YouTube embedding + custom audio uploads | I learned Iframe embedding

Maintaining Pomodoro state across multiple pages | Persistence was a pain, the mini Pomo helped

Syncing recommendations with survey logic | I had to ask so many people in Panera how many questions was to much or to few. They still would like UI changes for nav and colors.

What I Learned

User feedback is gold—especially for customizing multimedia reading experiences. I had people try this in the Panera and it helped so much, with the survey logic. People even asked for color pallets to change the theme so I started adding that in settings too.

Embedding audio + maintaining app state across pages is much harder than it looks

Real productivity requires thoughtful design—features like exporting notes or timing book completions can’t be an afterthought

What’s Next

ISBN book lookup and purchase integrations Swipe-based book selection (inspired by Tinder UX) Social Book Club: connect with readers by books read/want, genre, mood, or shared goals. Expanded survey logic for smarter recommendations Deeper audio customization and playlist features

Final Note

FocusReads is for anyone who wants to read more—without distractions. We built it to help people immerse themselves in books the same way they might in music. Whether you're a casual reader or trying to finish your 100-book goal, this app was made for you. Thank you! ...

Built With

  • data:
  • frontend:-react-+-typescript-+-tailwind-css-nlp:-local-only-using-spacy-or-nltk-(no-ai-apis)-pdf:-jspdf-or-pdfkit-for-export-python-document-parsing:-pdfplumber
  • localstorage-first
  • modular
  • python-docx-scraping:-beautifulsoup
  • react
  • scrapy
  • state
  • typescript
  • with
Share this project:

Updates