CleanNotes

Inspiration

Big thank you to my backpack! When I thought of the theme of cleaning up and better productivity, the one thing that came to mind was my cluttered backpack.

What it does

This website consolidates notes into one place. Upon opening the site, you will see 3 padlets: Writing Scanner, Blank Note, and Upload PDF.

• Writing Scanner: Uses the Tesseract machine learning engine to decipher images and display them as text. A useful feature when taking notes on content from massive slides/PDFs in class and it makes it easier to scan the content
• Blank Note: Exactly what the name says - create a simple blank note
• Upload PDF: Yet to be developed, but idea briefed later

Through the use of MongoDB, all the notes are displayed in notebook and can be accessed by the notetaker.

How we built it

The frontend is done with HTML, EJS, and CSS. The backend is done with NodeJS, Express, and MongoDB. The website makes use of MongoDB Atlas configured to Google Cloud to save notes and uses Express to access indexes of documents. The more complex part was the text recognition, using the Tesseract.js engine to decipher the images.

Challenges we ran into

MongoDB Atlas was a bit of a struggle to get working. Frontend is very much my strong suite so doing backend for the first time was great - but also challenging.

Accomplishments that we're proud of

I am proud of how cleanly the UI turned out, and how well the database works. To have made so much of my idea come to light was amazing! Database manipulation was difficult to me before this hackathon, but I have become more comfortable as a result of it.

What we learned

I learnt a lot about backend and setting up MongoDB on cloud. Although this is a rather simple database, I learnt a lot about connecting and storing info into MongoDB.

What's next for CleanNotes

Further developments could be:

• Making notes editable
• Fixing up the UI (buttons in one region)
• Working on the PDF upload idea; the idea is essentially to be able to upload a PDF and add notes per slide

Built With

• css
• ejs
• express.js
• html
• mongodb
• node.js
• tesseract