surfboard

Use surfboard to improve online recipes!
Use surfboard to annotate articles!

Inspiration

There's nothing worse than coming back to your apartment after a long, grueling day of school, deciding to cook dinner based on a popular recipe, and being taunted with a watered-down and bland curry. Our team often finds ourselves returning to the same recipe for thai coconut curry for its simplicity; however, we soon discovered after the first attempt that adjustments would have to be made. We ended up printing the recipe and used a marker to make note of our desired adjustments when it occurred to us how helpful it would be if we could make notes straight onto the web page. From there, we talked about how many applications a note extension could have, whether it be for school, cooking, planning trips, and much more.

What it does

Surfboard is a Google Chrome extension that allows users to create their own noteboards for any web page they desire, view all their noteboards across all sites, and share their noteboards for sites with others.

How we built it

We built Surfboard with JavaScript to control the backend and html with css to control the frontend. We divided our team into a frontend and backend team, with Christian and Celestin on backend, and Mahay and Hannah on frontend. We made use of VSCode's live collaborative coding plugin in order to synchronously work through the project, but we also used Git to be able to individually test the functionalities we were implementing.

Challenges we ran into

Creating the toolbar menu overlay proved to be quite a challenging problem, since many of the online resources were outdated. In addition to the lack of recent material, much of the Chrome Extension documentation was incomplete since they are still in the process of updating manifest versions. We also were not able to create our software as quickly as we would have liked since we are all new to web development and are using this hackathon as an opportunity to learn it.

Accomplishments that we're proud of

We're proud of our clean user interface and vibrant color scheme, as well as how we were able to make the toolbar show up as an overlay despite toiling over the code for nearly the entire second day. We're also proud of the fact that we were able to have fun while learning entirely new material and learn a good deal of web development.

What we learned

We gained experience in creating user interfaces with html and css, using JavaScript to control backend operations, creating basic Chrome Extension applications, and using git and GitHub for version control. We also gained some insight into collaborative project work and were able to overcome our initial struggle dividing aspects of the project while also keeping each other updated. We've learned how to live share code over VSCode and have grown to work with each other's strengths.