AI Personal Learning Assistant

Inspiration

I always want to keep my learning in one place in an organised way, where I can search and recall material quickly as I want. Also, I wanted a system to create a self-paced learning path to learn new technology. And that system pushes me daily to learn something and log my understanding in my own way.

What it does

It helps users to keep their learning and its materials in one place, and create courses for themselves with a personalised learning path. It pushes the user to learn something daily and log it. It provides various insights about their learning pattern that motivates the users to learn more.

How we built it

We built this application using a powerful and modern tech stack designed for rapid development and intelligent features.

Frontend: The responsive and dynamic user interface was built with React.js, allowing us to create a fast, component-based single-page application. The development environment was powered by Vite (assuming from "Bolt"), which provided a blazing-fast build process and hot module replacement, significantly speeding up our development cycle.

Backend & Database: We used Supabase as our all-in-one backend solution. This powerful "Backend as a Service" platform provided us with a managed PostgreSQL database, secure user authentication, and instant APIs. Using Supabase allowed us to build secure and scalable backend features without having to manage server infrastructure ourselves.

AI Integration: The core intelligence of the application is powered by the OpenAI API. We leveraged OpenAI's advanced language models to create the AI Course Generator. Our application sends carefully engineered prompts to the API, which then returns a structured curriculum and curated learning resources for the user to follow.

Challenges we ran into

OpenAI Prompt Engineering: Getting OpenAI's models to consistently generate high-quality, logically sequenced, and relevant course curricula was a significant challenge. It required many iterations of designing and refining the prompts to handle various user inputs and ensure the output was both creative and accurate.

Integrating Services: While Supabase and OpenAI are powerful, ensuring they worked together seamlessly presented its own set of challenges. This involved managing API keys securely, handling asynchronous calls between our React frontend and these services, and structuring the data flow efficiently.

Real-time UI Updates: With a backend-as-a-service like Supabase, ensuring the UI in React updated instantly and correctly after database changes (like completing a milestone) required careful state management and leveraging real-time capabilities where possible.

Accomplishments that we're proud of

Seamless AI Integration: We are incredibly proud of how we integrated the OpenAI API to create a fluid user experience. The ability for a user to generate a complete, editable course path in seconds is the app's standout feature.

Leveraging a Modern BaaS: By building on Supabase, we were able to develop a full-stack application with a robust database and secure authentication much faster than if we had built the backend from scratch. This allowed us to focus more on the user experience and AI features.

A Holistic Learning Log: We created a unified system that tracks both progress in structured courses and standalone, unstructured learning activities. This gives users a complete and accurate picture of all their learning efforts.

Intuitive and Engaging UI/UX: We successfully designed and built a clean, fast, and easy-to-navigate interface in React that makes the process of learning and logging feel motivating and rewarding.

What we learned

The Power of BaaS Platforms: We learned how to rapidly build and deploy a feature-rich application by leveraging a Backend-as-a-Service like Supabase. It taught us the value of using managed services to handle complex infrastructure like databases and authentication.

The Art of Prompt Engineering: We discovered that the quality of our AI features was directly tied to our ability to communicate effectively with the OpenAI models. We learned that prompt engineering is an iterative art that combines specificity, creativity, and rigorous testing.

Modern Frontend Development: This project solidified our skills in the modern React ecosystem, including using powerful build tools like Vite and managing complex application state to create a polished user interface.

What's next for AI Personal Learning Assistant

Spaced Repetition System (SRS): Integrate an SRS feature that automatically creates flashcards from the "Key Takeaways" users log. The app would then notify users at optimal intervals to review the material, maximizing long-term retention.

Mobile App: Develop native iOS and Android applications (perhaps with React Native to leverage existing code) to allow users to log their learning, review materials, and stay on track while on the go.

Deeper OpenAI Integration: Use OpenAI to generate milestone-specific quizzes to test understanding or provide AI-powered summaries of linked articles and videos, allowing users to grasp key concepts faster.

Browser Extension: Create a browser extension that allows users to save articles, videos, and other web content directly to their Learning Logger as a resource or a new learning activity with a single click.

Built With

• netlify
• openai
• react
• supabase