Inspiration
As a student preparing for high school, there's a certain quote that I think about a lot:
"What do you call when Tyee Middle School Students divide and split off, never to see each other again? Mitosis." - Alexander Yu, 2023 (A freshman at Interlake who won the Interlake hackathon this year)
Jokes aside, the reason why I think about this so much is that this year, there are about 80 students in the AL Program. About 15/16 will go to Newport, and the rest will go to Interlake. I made this decision to attend Interlake in early March.
Recently, I have been talking to other students from both Newport and Interlake. I can see that there are both pros and cons to each side. Newport is more relaxed, closer, and uses the AP Program. Interlake is more rigorous, potentially more rewarding, and uses the IB Program, but Interlake also means giving up many friends that I have spent many years with. Sometimes, I wonder if in the future, I'll regret my decision. This is a choice that will impact me for a very long time.
I hope to be able to make this difficult decision at least a bit easier for future freshman, as this is a decision that is extremely important, and therefore should be heeded to.
What it does
The goal of this app is to help one observe and take note of all possible points to make a well-informed decision. While the current prototype is admittedly quite rough, I think it encapsulates this point quite well.
The notetaking process boils down to two types of elements: notes and organizers. Examples of organizers include groups and T-Charts. The user will be able to create these elements through the user interface, as well as interact with them through mouse events, such as dragging, clicking, and double clicking.
One of my favorite parts of this project (which is also the part that took the most time) is the "snap" effect.
Essentially, when the user drags a note, or even a group over a container element, the user will be able to directly drag the element into the parent element. This is a problem I've seen with other similar tools. Essentially, the problems is that when the user tries to drag a "parent element," the children are not dragged with it, which causes organizational issues. This app fixes that.
Another feature is the "multiplayer" mode. Users are encouraged to take notes together and use the data to make a collective decision. This way, users will be able to pool ideas to make a better decision overall. As with anything that requires syncronization, this feature is not perfect, not at all. However, I think that for a prototype to have the effect as shown below is enough
How we built it
Here's the tech stack: Back end
- Flask (For Server)
- Socket.io for Flask (For Websockets)
- JSON Web Tokens (For authenticaton)
- MongoDB (As a database, and for synchronization purposes)
- Jinja2 (For templating and to obey "Don't Repeat Yourself")
- AWS (For hosting Websockets)
- Docker (For maintaining that the server will stay alive)
- Identicons (For generating user icons)
Front end
- Socket.io for Client
- Everything else was programmed in Vanillia JS, HTML 5, and CSS 3. This meant that I had to invent a coordinate system and mouse control system by myself, which was quite difficult, and led to over five hours of debugging.
Here's a flow chart as a big picture view of how the clients and servers function:
This is a flowchart as to how user interactions with the UI go:
The objects highlighted in yellow are the bulk of the "snapping" system that aids organization. Essentially, every time a user moves their mouse while dragging an element, the program will iterate through all the elements in the workspace and check for intersection. We ended up doing this mathematically:
For every element e, JavaScript provides a useful function: e.getBoundingClientRect.
(Illustration courtesey of MDN Web Docs)
We can use these values to determine the coordinates of the bottom left and top right coordinates. However, since while in the Cartesian Plane, (0, 0) is at the bottom left corner, we must be aware that getBoundingClientRect() places the (0, 0) at the top left corner.
Thus, after adjusting, the coordinates of the bottom left and top right boxes are (left, top) and (right, bottom). We calculate these for every element in the workspace.
As it turns out concepts from USACO actually seem to have real life impact, which is cool. In particular, the formulas detailed at https://usaco.guide/bronze/rect-geo?lang=cpp#implementation-2 can be used to calculate the intersection areas.
Doing so, and after filtering out "bad" elements (e.g., text blocks), we take the elements with the most intersection and suggest to "snap."
Challenges we ran into, accomplishments that we're proud of, and what we learned
The past two weeks have been absolutely overwheling for me. Time has been so limited that I have had a hard time finding time to work on this project.
I originally planned out a list of features that I wanted to implement, but most of those had to be discarded because of the seven day time crunch. I spent so much of my time debugging the "snapping" and "multiplayer" features that the other features just got discarded.
I think this xkcd comic summarizes my problems pretty well
Near the end of my project, I ended up just resorting to trial and error when debugging the complex bits, and all code safety went out the window.
Furthermore, I also had much trouble hosting this project. Most of the services I am used to using (Vercel, Cloudflare, etc.) use serverless hosting. Since websockets quite literally require a constantly alive server, I needed a way to get one. The solution ended up being Amazon Web Services, a cloud provider. As it turns out, AWS was quite convoluted and hard to debug :(
While it is true that the features of this project are not at all extensive nor all-encompassing (i.e., many features are missing), I am extremely grateful that I have at least gotten this project to a state that I am happy with.
I am happy to report that I have also learned some important lessons when it comes to time management, such as "you need to prioritize, for heavens sake." I am sure these will help when IB rolls around.
What's next for Notetaker
I guess this is more a wish list of what I wished I had gotten done:
- Less buggy multiplayer system
- More container elements (e.g., Venn Diagram)
- Email reminder and notification system
- Mobile optimization
Concluding Thoughts
To the judges who are reading this, thanks for bearing with me in what admittedly seems like a rant in hindsight. Whether you deem this project worthy of commendation or not, this has been a wonderful learning experience, especially in regard to time management. Thank you.
Fin.
Feel free to critique my app at: http://34.208.34.38/ and https://github.com/actiniumn404/Hackathon-Notes. I wish I had a more stylized link, but this is the best I have with Amazon Web Services.
Log in or sign up for Devpost to join the conversation.