Librowser

A library browser and bookmarking tool - with the help of our bookmark system, you can access all the pertinent information on your study resources at your fingertips.

Comment

Inspiration 💡

With AP testing season rapidly approaching, many of us feel like our preparation this year has been suboptimal, due to various difficulties with online schooling. Hence, we've turned to perusing AP study books. However, Princeton Review or Barons AP books are often extremely thick, and even after reading through them, little information would be mentally retained.

Hence, we decided that it would be great if we wrote a website to keep track of the salient pieces of information in those content-heavy texts.

What it does 💻

The name "Librowser" is a combination of "library" and "browser", because that's what it does - it allows users to quickly jump between important pieces of information when studying. Users can sign in and create "bookmarks" which consist of a title, book reference, page number, and a brief description of the content at that bookmark. Users can also tag bookmarks to group topics together. Later when studying, if users wish to recall information from earlier in the book, they can use our regex-based search and filter function to quickly locate where the pertinent sections are.

One perk that Librowser has over popular study sites such as Quizlet is that we support LaTeX typesetting, which makes studying for equation-heavy exams such as the AP Physics series much easier. Furthermore, our search function allows users to quickly locate certain topics, making it much more efficient when coming back to review old information.

How we built it 🧱

Librowser runs on a Node express backend, with MongoDB as its database and passportjs responsible for authentication. On the frontend, we used EJS for templating and jQuery for communication with our backend. Our styling mainly came from bootstrap, but smaller libraries such as AOS and fontawesome were also utilized to give finishing touches to our UI. Lastly, we deployed our web application using Heroku.

Challenges we ran into 💀

The greatest challenge we faced was authentication - recently, we had been working more with React and jwt authentication, so today, we were not as familiar with passport auth as we should have been. It took a while to figure out how LocalStrategy and sessions worked with our frontend and our database. When we finally figured out all signin/signup related operations, it was already close to 5PM PST. Thus, we did not have as much time as we wanted to iron out our business logic. Towards the end, it was a true time crunch.

The most notable part of our web application that we left unfinished as a result of the time crunch was adding our icons. After we created our site logo, we encountered bugs when trying to place it as a favicon or on the navbar. As it was already decently late at night, we just decided to let this slip.

Accomplishments that we're proud of 🥳

Our biggest source of pride in our product is our UI design! We were experimenting with new designs and color schemes today, and we are quite satisfied with how clean it turned out.

What we learned 🎁

Through this project, our biggest takeaway is the importance of good collaboration. In this project, Michael handled most of the backend and business logic, while Emma was responsible for all the designs and layouts. Looking at each other's work, we recognize that neither of us could have done this alone. It was our good communication and skill specialization in this process that allowed this project to turn out relatively well.

What's next for Librowser 🌎

For one, we definitely want to finish up features that we didn't complete due to the time crunch - for example, we'll iron out the bugs with the favicon display on the website. Furthermore, we'll refactor parts of our code (due to time pressure, certain parts of our code are not structured as neatly as they could be).

Additionally, we'll definitely use the website to help with our own studies! After all, we came up with this idea in response to legitimate problems in our own lives! We'll also share our creation with friends around us, so that they may review more effectively for their upcoming exams as well. In the future, we may even introduce features such as collaborative or public bookmark sets to both help study groups and reach a wider audience!

Share this project:

Updates