Inspiration

Our team wanted to make an app to help organize class notes visually in an intuitive and flexible way. Specifically as developers and mathematicians, we wanted notes software with technical capabilities such as highlighting and LaTeX support. In addition, we wanted to leverage AI support to allow for searches and queries on the notes we've taken. Thus, we decided to combine the two ideas together and make a web interface for visually organizing all kinds of multimedia.

What it does

Our webapp allows users to organize notes taken in many different formats, from LaTeX to youtube videos to code snippets. In addition, an AI chatbot allows you to run searches and queries on your notes. You can also have multiple whiteboards to organize various thoughts. If you have too many whiteboards, you can search them using our custom vector search engine.

How we built it

We use a RestAPI + Python backend combined with a React + Typescript frontend. Our backend utilizes a Postgresql database, Qdrant vector database, and Memcached distributed cache. These technologies allow us to horizontally scale our deployments, and it provides the necessary information for our retrieval augmented generation chat feature and custom vector search engine. Our frontend uses ReactQuery for requests and the Monaco Editor for code segments. We also use Docker and Docker Compose to manage the hosting of our application and its dependencies. We also used Cohere to make our vector embeddings and do our retrieval augmented generation. We used ChatGPT and Github Copilot as part of the development process.

Challenges we ran into

One the biggest challenges we ran into was getting React to make requests without dropping them due to components being updated. We also ran into issues with poorly documented APIs for the vector database and cohere large language model.

Accomplishments that we're proud of

We're proud of how many different disciplines went into designing and programming this product. Each of us had a different specialization, and working together, we were able to make an expansive project. We are very proud of the clean and functional UI as well as the impressive AI features.

What we learned

We learned a lot about the technical details of how React and frontend systems work. Also, we learned about vector databases, vector searches, and vector embedding. In addition, we practiced the skill of working together in a team with members of differing focus areas and skill levels.

What's next for Whiteboard Notes

We had a lot of ideas we weren't able to fit into the hackathon version! We would like to add cross-whiteboard links at some point and the ability to run code blocks like a Jupyter notebook. If we had a lot more time, we would have tried to make this a multiuser application.

Built With

Share this project:

Updates