Tetherboard

Your Tethermap - All of you in one graph
Build boards with code and LaTeX and let Gemini give you insights!
I think it's pretty clear who I am...

Inspiration

All of us here today are working to build amazing projects and novel creations. In order to most effectively create, it’s important to have an organized way to manage your thoughts, ideas, and notes in a collaborative environment. Our brains naturally learn by building connections between different ideas, so we built Tetherboard to be a collaborative knowledge platform that operated in the same way.

What it does

Tetherboard allows you to create boards that contain images, symbols, and markdown text which supports code highlighting and LaTeX statements. Multiple people can work on a board at a time and any changes will update live! You can create links (or “tethers”) to other boards and view an overall “Tethermap” with all of your boards connected in a graph.

On top of all of this, your entire workspace is a context for Gemini. You can ask Gemini anything related to your workspace and it has all the information from the board you’re on and all boards in your workspace and will answer your questions accordingly.

How we built it

The app is mainly written using React and TypeScript. We used TailwindCSS and shadcn for styling and UI components. The backend was written using Firebase and we used the Gemini API for letting the user ask questions about their tetherboards. The tethermap and board building area was created with a combination of other React specific libraries.

Challenges we ran into

Board editing area was prone to a variety of different interaction bugs we had to fix
Live collaboration on boards proved to be tough to get working reliably. We had to include optimizations to make it smoother
Getting the markdown area to show code/images/math properly

Accomplishments that we're proud of

Reactive tethermap! You can move it around, we think it’s fun to play around with
Gemini being able to intelligently answer questions from your entire workspace
The board editor! We wanted to give the user the tools they need to customize boards however they want

What we learned

We learned a lot about using React and TypeScript to build a web app. Tackling dependency issues also taught us a lot about wrangling with NPM. Most of us hadn’t used the Gemini API before this so that was also a learning experience. Finally, we learned how to use Firebase snapshots to create live interaction between different users on the same board.

What's next for Tetherboard

Allowing Gemini to generate entire boards on its own
Drawing–so you can write your thoughts by hand
More optimized board editing UI (rotating elements and such)
Even more optimized sharing!
Multiple workspaces with individualized Gemini contexts

Built With

Submitted to

Bitcamp 2025

Created by

I was a Frontend Developer for the Tetherboard. I designed most of the UI Interface and created the landing page using React.js and TypeScript.

Henry Gardiner
I contributed to both the frontend and backed of the app, primarily focusing and rendering the white board view, implementing authentication, and storing board data on the database.

Ramy Kaddouri
I was behind most of the work for the chatbot functionality and making/designing it. I got to work with firebase for the first time and was able to get a snapshot of the data and got to it work with the markdown data and this seemed like a daunting task at but was able to with the help of my teammates.

javin Ahuja
I worked all throughout the app developing both the frontend and backend of features like the Tethermap. I also worked to integrate other group members work into the main codebase.

Joel Chemmanur