LearnScapes | Devpost

Inspiration

Everyone has a goal, whether it’s to learn a new skill or trade or to accomplish something significant. However, staying consistent and finding value in that goal can be difficult. That's why we created LearnScapes—a tool that allows users to visualize their goals and effectively track progress as they advance on their journey. One of the key inspirations behind our project is the inefficiency of goal-setting and progress-tracking in most banking apps. While they all have some form of these features, none provide the motivation needed to keep progressing; it’s just numbers on a screen. We wanted to build a tool that could be integrated into these platforms, equipping users with the knowledge and means to pursue their goals, while also providing the motivation to keep moving forward.

What it does

LearnScapes takes a user’s goal and makes structured calls to OpenAI to generate intermediate steps from the user’s starting point to their end goal. These steps are plotted on a 3D terrain, allowing for easy progress tracking. At each step, users are provided with links and resources to help them accomplish the tasks necessary to move forward. Additionally, we’ve implemented a shop system where users earn points for completing goals, which can be used to purchase components for their goal. This system creates a tangible sense of progress by allowing users to visualize their journey, see how close they are to their final objective, and stay motivated without abandoning their goals halfway.

How we built it

We built Learnscapes by integrating several powerful technologies to deliver a seamless and immersive experience. Next.js served as the foundation for the front-end, providing a robust and scalable framework for our web application. We leveraged the power of OpenAI APIs to generate intelligent and dynamic content, enhancing the interactivity of the platform. Three.js was used to create the 3D landscapes, enabling users to visualize their goals and progress in a fully immersive environment. Additionally, a YouTube scraping API was incorporated to pull in relevant learning resources, adding an extra layer of educational content directly into the application. React was used to develop a user-centric interface that prioritizes the in-app experience, maintaining a consistent low-poly theme throughout the application. Combining these technologies allowed us to craft a unique, goal-oriented experience that is both visually engaging and informative.

Challenges we ran into

We had primarily two issues. The first challenge was setting up all the 3d models to render correctly on the webpage. We hadn’t used Threejs before so we had to learn how to position it from scratch. Luckily with what we were doing it didn’t require too much struggle to fully position the elements. The second challenge we encountered was generating appropriate links given the subtopics for each topic. When utilizing search APIs we frequently encountered quota limits that would stop us from testing. It was very surprising to us that the quota limits/pricing for the LLM was much more efficient than search. Eventually we came up with a solution that essentially is scraping.

Accomplishments that we're proud of

We are incredibly proud of the final product we’ve built. Learnscapes features a unique premise that transforms abstract learning goals into visually compelling, 3D landscapes, making it both engaging and interactive. The combination of intricate visuals, technical complexity, and a user-friendly interface was a significant challenge to pull together, but we’re thrilled with the outcome. From seamlessly integrating 3D graphics with real-time data to optimizing API interactions for the best performance, every element required careful consideration. Successfully overcoming these hurdles has been a huge achievement, and seeing the end result has made the effort worthwhile.

What we learned

Venturing into the world of Three.js was a completely new experience for us, adding an exciting layer of learning to this project. Developing 3D models and integrating them into a web application took both time and experimentation. Additionally, working with the search APIs and scraping mechanisms, while ensuring they played well with the results from OpenAI's language models, was an interesting challenge. We learned how to refine and craft API prompts for optimal results, balancing the data fetched from various sources with dynamic and coherent AI responses. This taught us valuable lessons about API management, prompt engineering, and combining technologies in innovative ways.

What's next for Learnscapes

Moving forward, we want to push beyond our 36-hour limitation by developing a system that auto-generates terrains and shops, dynamically rendering them into our application so that each goal can be visualized independently. Ideally, we aim to personalize each goal for the user. In the future, we also plan to host the platform, and we're seriously considering switching out the current LLM. One challenge we encountered was integrating search APIs with the LLM, so it would be highly beneficial to use a service with built-in search and web crawling capabilities, such as Perplexity AI.