Grooovy

Inspiration

I was collecting research resources for a project I was making for school. The plan was to store information from these sites and summarize them all later, but I noticed that there was an absence of tools that could help me effectively. Browser bookmarks are useful when storing simple URLs, but when I want to include some notes of a page (e.g., major points in an article), bookmarks are not useful. I was forced to use things like Notepad which I found very tedious. I wanted to create a system that could help me store notes and display them across multiple devices. I also wanted the system to provide a rating option so I could rank the best sources to improve my productivity (so I wouldn't be spending time on sites which yielded no fruit). And so, Grooovy was made.

What it does

Grooovy is a one-of-a-kind browser extension that improves productivity. Grooovy is both a note taking extension and a website reviewing extension (more on this in the Creating your review/note section below!).

Grooovy's dashboard is divided into 3 sections. Let's go through each one.

Section 1: Reviews

This is the default section when you open the extension (by clicking its icon). The Reviews section shows the reviews data for the current site, including:

number of reviews
average rating
stars rating distribution ("the bars")
the reviews for the current site

You can add a new review in the Reviews section. Simply click the blue 'Review This Site' button found on the top right to review the current page.

Creating your review/note

Grooovy has a powerful review and note taking system.

Grooovy allows you to create "public reviews" and "private reviews." Public ones functions as reviews for the site and are visible by other users when they view the Reviews section. Private reviews are only visible by you and will not be seen by other users. Private reviews function as notes. For instance, if you want to add a product you found online to your digital "wish-list," you can use a private note to do it.

Reviews contain the following data:

star rating (1 to 5, required)
description (optional)
tags (optional)

Tags allow the categorization of reviews (more on this in the Section 2: Your Reviews section).

Here's a typical new review process:

Tags can be added to a post through the tag search. It automatically suggests tags based on what you've typed. You can tell whether a tag is public or not by checking whether the icon preceding the tag name is crossed out or not. If it is crossed out, it is private.

If a tag doesn't exist, the user can create the tag. Tags, like reviews, can be public or private. This allows you to categorize your posts without other people knowing it. Private tags can only be seen by the author, regardless of whether the review is public or private. Public tags can be seen by all other users.

The typical tag creation process:

Voting

Grooovy allows you to upvote/downvote reviews. This can be used by other people to determine how accurate/helpful a review is.

Section 2: Your Reviews

Now that you've made a few reviews, you can check out the reviews that you've made.

On the navigation bar on the left, click the 'Your Reviews' button.

This section shows you all your reviews (public or private) that you've made. These reviews can be sorted by time or by number of stars.

Your Reviews: Sorting by time

Your Reviews: Filtering By Tag

Your Reviews: Searching

The Your Reviews section also features a search. The search allows both keywords and regular expressions. Regular expressions must be wrapped in slashes.

For instance, entering "fun" into the search will return all reviews with the term "fun" in them. If you enter/[0-9]/ into the search, it will return all reviews which contain a number (because [0-9] matches all digits).

Section 3: Explorer

Many websites arrange their pages in the form of a folder structure. For example, /post could return a list of all posts, and /post/1 could point towards the post with the id 1. This allows for good organization.

Grooovy takes advantage of this with its Explorer. You can think of it as a file explorer for the web.

The explorer allows you to easily check out reviews for other sites, as well as summarize.

The explorer grabs all reviews in and under the URL specified in the URL bar of the explorer. For instance, /post/1 is under /post.

This makes it particularly useful to get a broader summary of reviews. For instance, in the /post example above, instead of looking at each individual post's reviews by navigating to each individual post, you can simply set the URL of the explorer to /post, which will grab all reviews for individual posts.

Want to get the rating of a podcast show without having to go through each individual episode? Want to determine whether someone's blog is good? The explorer is here to answer!

Installing Grooovy

Grooovy is a browser extension. It has not been published to the various extension stores yet. Therefore, to use it you'll have to install it manually.

Installing in Chrome

download the .zip file of the extension here
extract the .zip file into a folder
open the Chrome Extensions page (by entering chrome://extensions in the URL bar or by clicking the three dots on the top right > More tools > Extensions)
check the top right. If the 'Developer mode' toggle is not turned on, turn it on
on the top left, click the 'Load unpacked' button and upload the unzipped folder

The extension can then be used.

How we built it

The browser extension is based on HTML, CSS & JS.

The data is saved on a server based on a microservice architecture. The back-end features a RESTful API built with Spring Boot.

MariaDB is used, along with JPA.

Challenges we ran into

User interface - creating a friendly, concise and effective UI.
Authentication - this was my first time using JWTs

Accomplishments that we're proud of

Gained experience with browser extension development (it's actually pretty simple for someone with good experience of web development)
Gained experience with session-less applications with JWTs, made application much easier to scale (without sessions, you won't need to worry about session replication)