Given the recent rise in social distancing, many people find themselves working or studying from home. However, it can be more difficult to effectively focus at home and this problem is exacerbated by the distracting user interfaces many web pages have today. To aid in productivity, we created a web console that allows users to save the text content of web pages and store them for reading later. Our app will allow users to easily adjust the text size, coloring, and spacing in order to suit their individual needs. The goal is to have an aesthetically comfortable environment where one can read the content pulled from the web page of their choice, only without the ads, comments, and other intrusive content.

What it does

  • Extract text content of a web page and houses its contents in the app’s environment
  • Adjustable font size, font family, and line spacing
  • Create footnotes for each saved document
  • Toggle a dark mode and light mode based on user preference

How I built it

Back end: Node.js, Firebase, Python Front end: HTML, CSS, Bootstrap

Challenges I ran into

Picking a color theme and overall style for this app was a bit challenging because we wanted to find an aesthetic that was pleasant yet non-distracting. There are many techniques regarding accessibility, usability, and general design that neither of us were knowledgeable in.

Accomplishments that I'm proud of

Ryan: I'm proud of how quickly we were able to take an idea and execute it. Participating in the Hackathon really forced us to just keep coding and learning. We surprised ourselves with how much we were able to do. Calista: I'm proud of how we were able to make almost all of the user stories from our original design plan come to life, and how we incorporated features on the fly.

What I learned

Ryan: I learned how to use Bootstrap effectively and got more familiar with node packages. Calista: I learned how to create intuitive UI designs and incorporate back end functionality.

What's next for Library

We would like for Readify to ideally be a plugin for browsers. This would allow users to simply click the Readify icon when they're in the middle of reading a webpage and automatically save the text to their Readify library. This would be easier than having to input the URL manually into the app.

Share this project: