Inspiration
As college students, we are constantly looking for new ways to reduce the time spent studying for midterms and finals. ZotNotes was built to be an efficient way for students to do all of their studying in one-go! It gives them the opportunity to prepare study materials as they are taking their lecture notes.
What it does
ZotNotes allows students to write their notes and see Youtube results based on specific words they type show up in real time! Not only does the project do this, it even creates flashcards for you, and all it needs is really simple formatting! An underline for the word and italics for the corresponding definition is all it takes for our website to know that you want a flashcard made for it. This is also created right after the student is done typing the definition.
How we built it
The project was first broken up into smaller tasks to do. Kevin focused on the front end part of the programming, such as making the web application, Ayushi was devoted to implementing the YouTube API, Ryan worked to host the app using GCP, and Pooja worked on implementing flashcards.
We built the frontend of ZotNotes by using React and Material UI. The screen is split into two halves; the left side of the website uses Quill Text Editor for students to take notes on the web page itself to take lecture notes. On the right hand side, we have two tabs: one for Youtube and another for flashcards. To make a list of Youtube videos for the users, we used Youtube API and connected the backend and frontend by using Python Flask. We also used Axios for the GET Request to retrieve the Youtube APIs from the backend.
In addition, we have our ZotNotes logo on the left of the taskbar on the top and a Help button on the right!
Challenges we ran into
We had trouble integrating the flask framework with Google Cloud Platform. Additionally, numerous APIs we wished to use such as Quizlet and other online flashcard systems were unresponsive and did not give us API keys.
Accomplishments that we're proud of
We accomplished a lot given the limited amount of time (8 hours) to create our project. The front end functions perfectly and has a pleasing graphical user interface. We learned how to how to use the Flask API to connect the backend with the front end. In addition, we learned how to deploy a website using the Google Cloud Platform. We picked up many skills in how to use multiple libraries and how to integrate them together.
What we learned
Through this experience, we learned how application structure differed in the real world compared to what we were exposed to and taught in a classroom setting. By going through the cycle of design, build, and implementation, we were able to learn what the process of building a project is in the industry. On the technical side, we learned how to use Youtube’s API and how to connect the frontend and backend of programming through the use of Flask API.
What's next for ZotNotes
We plan to implement the ability to search for Quizlet sets made by other Quizlet users and allow users to create their own sets as well using the Quizlet API. Also, we would like to integrate the Oxford English Dictionary (OED) API with the application, allowing users to to quickly search for terms.
Log in or sign up for Devpost to join the conversation.