CardifyPro

Inspiration

At Cardify Pro, our inspiration stemmed from a common challenge faced by students across various disciplines – the need for an efficient and streamlined method to convert lecture slide PDFs and hand writtten and typed notes into personalized study flashcards in a secure location. We recognized the importance of empowering students to take control of their own learning journey and wanted to provide a comprehensive solution beyond Quizlet with its lack of security.

What it does

Upload your notes: Easily import your notes into the web app. Whether you have handwritten notes, PDFs, or raw text, the app accepts various file formats.
Choose the number of flashcards: Specify the desired number of flashcards you want to generate. This allows you to customize the flashcard set according to your study goals and time constraints. 3.Generate flashcards: With a click of a button, the web app generates flashcards based on your uploaded notes. Each flashcard represents a key concept or piece of information from your notes. 4.Regenerate if needed: If you're not satisfied with the initial set of flashcards, simply regenerate them with another click. The web app recalibrates and generates a new set based on the same input.

How we built it

Backend: For the backend development, we leveraged the power of Python, a versatile and widely adopted programming language. Python allowed us to efficiently handle data processing and integration with external APIs. In particular, we utilized the CHATGPT 3.5 API, which enabled us to harness the advanced language generation capabilities of OpenAI's GPT model. This integration empowered our app to generate high-quality flashcards from the provided notes.

Frontend: The frontend of our web app was built using HTML, CSS, Next.js, and React.js. HTML provided the structure and markup of the user interface, while CSS enhanced the visual styling and layout. Next.js, a popular React framework, allowed us to develop a fast and dynamic frontend experience with server-side rendering and easy routing. React.js, a powerful JavaScript library, facilitated the creation of interactive components and seamless user interactions.

Challenges we ran into

We encountered challenges during development, particularly in scaling due to limitations with the token system of the CHATGPT API and constraints on funds.

Additionally, finding a suitable database hosting solution proved challenging as the free versions couldn't support the data volume we needed. We overcame these hurdles through resource optimization and careful evaluation of database hosting options.

Accomplishments that we're proud of

First and foremost, we successfully integrated the CHATGPT API with the front end, allowing seamless communication between the user interface and the powerful language model. We were able to send requests to the API and parse its outputs into JSON format, enabling efficient processing and manipulation of the generated flashcards.

Another significant achievement is the development of a sleek and visually appealing user interface. Leveraging the capabilities of React.js and CSS, we crafted an aesthetically pleasing design that enhances the user experience. The intuitive layout and carefully chosen visual elements contribute to a seamless and engaging interaction with our web app.

What we learned

One key lesson we learned was the challenges associated with scaling models that require API calls. We discovered that managing and optimizing API requests is crucial to ensure efficient usage and minimize resource limitations.

Another valuable lesson involved handling file input and output operations. We gained insights into parsing various file formats such as PDFs, DOCX, and JPEG. Additionally, we explored Optical Character Recognition (OCR) techniques to extract text from images, expanding the capabilities of our web app to handle diverse sources of input data.

On the front end, integrating React.js with the API taught us valuable lessons in creating dynamic and responsive user interfaces. We gained a deeper understanding of how to leverage React.js components to interact with API endpoints effectively. This integration allowed us to provide seamless interactions between the user interface and the backend functionality.

What's next for CardifyPro

We hope to broaden the capabilities of CardifyPro by extending its reading capabilities. When the API for CHATGPT 4 is released to the public, we hope to integrate it with audio files such as MP3 as well so one can seamlessly convert lecture audio into flashcards to study.