This is the most recent version of the hackathon project for cmd-f 2024.
ClipNFlip allows the user to upload a pdf and annotate it by adding highlights and corresponding comments. ClipNFlip then takes the data and creates interactive flashcards that the user can then study on the website.
We built the project using Javascript, HTML and CSS. We prototyped and dealt with design using Figma. We used MongoDB for the database that stores all the 'flashcards' and necessary data. To connect frontend with backend, we used Node.js, Express.js, and HTTP to run and make API requests to the server. It was our intent to include accessibility principles such as colour choice and font and larger buttons in order to make accommodations.
We worked with several technologies that none of us have encountered or used before! We had a lot of fun with playing around with Figma and writing code for frontend. Using MongoDB was new and we faced challenges with setting it up with Repl.it, but we worked it out in the end when we decided to utilize Node.js.
All of us believe that this versatile, convenient tool can be used by students everywhere, and it's something that would make things in our day to day lives easier! Given the opportunity to further develop our project, we'd improve the implementation (which is somewhat hasty right now, given the time constraints), and make it something that students can access and use to help them in their studies.
HTML, CSS, JavaScript, Express.js, Node.js, MongoDB
Figma