Comment-Tary

Bring back the golden days of the internet with Comment-Tary, a Chrome extension that adds retro-style, peer-reviewed comment sections to any web page. Engage securely with real users, not bots!

Comment

Inspiration

The internet used to be a space for genuine, thoughtful discussions and interactions. Inspired by the community-driven nature of early online forums and blogs, we missed the days when users would contribute insightful comments and reviews. We wanted to recreate that sense of community and trust, added with the comforts of modern security.

What it does

Comment-Tary is a Chrome extension that brings a retro-style comment section to every individual web page. Users can leave comments, share their thoughts, and review the usefulness of the information presented. With Auth0 integration to filter out bot spam through captcha, users can safely and securely engage in discussions just like in the old days.

How we built it

Comment-Tary is built in two main parts, a web extension which lives in the browser and a backend server that is built on FastAPI. The web extension is created using HTML/CSS/JS and utilizes fetch queries to interact with the server.

The server utilizes FastAPI, Pydantic, MongoDB Motor, and Auth0 to provide functionality. The server implements the Auth0 sign in workflow within its auth-router, and implements a CRUD interface for modifying comment data that is stored within the MongoDB database.

Our team was roughly split into two backend developers (Gabriel Aldous and John Spurrier) and two extension developers (Spencer Fasulo and Benjamin Bryant) who worked on the backend and web extension respectively. However, there was much inter-group collaboration and debugging performed to solve the complicated communication issues described below.

Challenges we ran into

We ran into major issues syncing all the parts of the project together. In particular, connecting the FastAPI server to the cloud based MongoDB instance and to Auth0 was a challenge due to IP restrictions, WSL2 setup errors, and more. Furthermore, communication between the extension and the FastAPI server was complex due to the restriction of extensions only being able to make external HTTP requests through a hidden background process, which resulted in some extra complexity.

In addition, we ran into some minor issues when attempting to integrate the markdown editors and renderers into the user interface, though those were mostly in regards to styling and not the functionality.

Accomplishments that we're proud of

We are proud that we were able to implement the Auth0 workflow within the FastAPI environment, and that we were able to implement the web extensions main functionality within the strict time limit. The aforementioned challenges with communication made this a trickier task than expected, so that was particularly rewarding.

We are also proud that we were able to create an 'early I-phone like' UI aesthetic for the extension's user interface, as that helps bring a 'retro' feel to the extension. This was intentional as we wanted the extension to invoke the safer feeling of the 'old web'.

What we learned

We learned about the following things during this hackathon:

  1. How Auth0 works and how to setup Auth0 within FastAPI projects.
  2. How web extensions are built (including project structure, background processes, communication with backend servers, styling, and including libraries).
  3. FastAPI & SwaggerUI tricks to add extra documentation to the automatically generated docs.
  4. How asynchronous MongoDB interactions via the Motor api work.
  5. How mocking a MongoDB instance for unit testing works.

What's next for Comment-Tary

In the future, we aim to enhance Comment-Tary by adding features like upvoting or downvoting comments, profile pictures, user ratings, comment reporting and a search engine. Our idea for the search engine would allow us to rank every website within our database with comments from users using an AI software & sentiment analysis to give each website a reliability ranking based off of the comments given. This search engine would give every user real feedback on how accurate a site may be and the issues that may be present in it.

In addition, we would like to implement the ability for users to comment on specific elements of a webpage by using the developer tools API to highlight specific elements that are associated with sticky notes. However, this functionality proved to be too complex to integrate in a professional manner in the time restrictions imposed by this hackathon.

Built With

Share this project:

Updates