Inspiration
We conducted market research to find what students and teachers have struggled with during online learning. For a lot of courses centered around text material such as AP English and Social Studies courses, it is even less practical for teachers to assure that their students are really annotating and absorbing the material. Additionally, traditional annotating has tons of issues such as lack of space in margins, potential theft or loss of book, and limited functionality to what you can write. We hoped to overhaul this and create an online platform.
What it does
It allows students to annotate books online and teachers to see and give feedback on those annotations, while making it easier for students to access their notes anywhere. Teachers create classes with their students and can push annotation assignments by uploading ePub versions of what they wish to assign. Using EPUB.js, we created an annotation system built into our app that allows students to write and submit annotations. No more messy handwriting or lack of room for notes for students and no more of carrying around 90 paperbacks books to grade for teachers.
How We built it
We created utilized Express, React, Bootstrap, and Postman to create different aspects of our web app. First, we designed the API and endpoints using Postman in coordination with our backend written with Node.js and Express. On the backend, we created our frontend using HTML, CSS, React, and Bootstrap. We opted for React because of the simple and easy routing capabilities with React. Bootstrap with React gave us an easy library of components and UI elements to use.
Challenges We ran into
It was tricky tracking and saving data to a server and loading books onto the browser with the React framework but we were able to work around it by finding and implementing different libraries into our code. We also implementing a hashing function to protect user data by hashing passwords when users create an account. A couple other challenges we had were rendering the ePub Reader properly since the components used had completely different style properties. After a lot of tweaking, we were able to display it properly.
Accomplishments that I'm proud of
All of us have never met each other but we were able to come together, work long hours into the night, and effectively communicate to create a project. While this may not be a great technical achievement, it was a great way to learn how to really teamwork and collaborate. Additionally, all of us are incoming freshman and developing a full stack application like this one was a positive experience to have since now we know which mistakes to not make and how to be more effective software engineers.
What I learned
We learned a lot about why certain frameworks are preferred in some scenarios. The chance to really work with the tools we used taught us about when and when not to use them which will guide us in future side projects. Some of us had never really worked with JS before and having spent so much time with it over the past week really showed us how versatile and diverse of a language it is.
What's next for annotate.ai
We hope to try and add collaboration to annotations as well as a C2C Marketplace for students to sell their notes. We will try to create a dedicated server and web domain to easily access our site. Additionally, we may pitch the idea and product in other startup competitions and events related to entrepreneurship as there is a bigger market for the product that we really thought about in our time during the hackathon.
Backend code is here https://github.com/hjstn/notary
Demo Video: https://drive.google.com/file/d/1Q6ncukS6m1hUNb6n6dQU3AvqyksT4Jo1/view?usp=sharing
Log in or sign up for Devpost to join the conversation.