FlashNotes

An AI study tool to convert your notes into online flashcards

Comment

Inspiration

Our inspiration for FlashNotes comes from the struggle of efficiently studying the large amounts of content which higher-grade courses, particularly science courses, contain. One of the most popular methods of studying is using flashcards. However, creating hundreds of flashcards can be incredibly time-consuming. The goal of our project is to greatly reduce the time wasted creating study materials so that students can spend more time studying.

What it does

The premise of FlashNotes is to allow the user to input an image of their study notes, and have interactive flashcards generated and displayed on the screen using the content of your notes. This is accomplished through the use of OpenAI’s GPT 4 Vision. The AI model has the unique ability to receive images as input through two different mediums: An image URL, or a base64 encrypted file. We took advantage of both, providing users with the option to upload a file or paste in an image URL. We also created a clean UI in which users can then access their flashcards and quickly check if their answers are right. Students can also input multiple images or URLs to easily create more flashcards on the same page.

How we built it

We built FlashNotes using a combination of many different modern technologies. For the actual website, we used the popular framework Next.js, we had to stick to the old page router for library compatibility (mostly with framer-motion). We also used TailwindCSS to write our frontend CSS quickly while having a responsive page. We also leveraged TypeScript to have safe and easily debuggable code while working with OpenAI’s decently complex library. For the backend. We used Next.js built-in API and page router to manage requests and handle the data we needed too. Unfortunately, due to our short timeframe, we focused mainly on getting a proof-of-concept product instead of a production-ready application, so we decided to exclude any sort of major database. For nice animations and smooth transitions, we also decided to use Framer Motion, a popular animating library for React components.

Challenges we ran into

Working on FlashNotes was full of firsts for our team: it was Adam’s first time programming in Typescript, Oscar’s first time working with Next.js, and Ben’s first time implementing Base64 encryption for images. Thus naturally, we faced many new challenges throughout the app’s development. These included but were not limited to:

Hydration Next.js issues Library compatibility issues Errors parsing and API routing OpenAI output Images URLs improperly encoded Query limits constantly succeeded

Ultimately, we managed to overcome each of these challenges through our determination and collaboration.

Accomplishments that we're proud of

We were very proud of making a cool and usable app that we can use in our daily lives. Milestones, such as the moment when Oscar first got the API working, and later when Adam and Oscar cooperated to make the API return flashcards and notes made us very proud. We also made an amazing UI that felt simple and clean to work with, while also returning the flash cards. As it was Adam and Oscar’s first time working with Next.js, they did amazing work, especially in understanding how the API routes work, and how to efficiently mesh them together with our frontend.

What we learned

Our team learned a lot in our process of making FlashNotes, we used Live Share by Microsoft for the first time making use of its amazing features such as terminal sharing and networking capabilities. It allowed us to completely integrate our workflows efficiently creating an amazing project. We also learned a lot about using OpenAI’s amazing ChatGPT. Throughout this project, we discovered many cool features, such as image comprehension and efficient summarizing. We also learned a lot about image formats and how we can use them in different ways. For example, you can always download the file in a common image format such as jpg, png, and jpeg. However, today we made use of a new kind of encryption format known as base64. Leveraging this we were able to access files and send them to the API without having to host them directly saving us lots of time, storage, and bandwidth. Finally, we learned how to collaborate and finish tasks effectively. Working on a single-page application is hard, and contributing simultaneously was a challenge, but with clear communication and discussion, we were able to make and finish our project on time.

What's next for FlashNotes

While FlashNotes is currently fully operational to its desired intent, it is still a proof of concept with room for many additional features. The next major step would be to create an account system where users can save their cards, as well as the option to create separate study decks. Some other features we envision are the ability to use the webcam to scan notes directly from your browser, as well as a quiz mode which evaluates your answers. Overall, there are a great many paths that FlashNotes could proceed with, and lots of features to be made!

Built With

Share this project:

Updates