Hop To It

Login Page
Prompt Page
Roadmap Page
Figma Brainstorming
Figma Final Draft

Inspiration

Many people have a plethora of interests in different topics and skills, however with so many resources available at our fingertips, it can be hard to figure out where to start. We ourselves have experienced this decision making fatigue, and so we were inspired to create a program that removes that difficult part of the learning process.

What it does

It asks for the user to input a topic or skill they would like to learn or develop, and develop a roadmap of all the necessary steps and resources they need to reach their goals. Users can track their roadmaps and import their progress to notion with the Notion API in order to keep organized.

How we built it

We first brainstormed what visions we had for the project and what features we wanted to implement. Once we had a solidified plan, we split off to work on our respective roles. Some designed the product on Figma and worked on front-end, while others worked on the backend implementing the road map and Notion.api, and together built the project using Next.js, React, and JavaScript.

Design

We had two people work on the design in order to have multiple viewpoints on what we might include in the final product. We wanted to aim for something on the cute side that would draw the user's attention and keep them engaged with the program, and decided to make a bunny our mascot since they're cute and efficient animals. We chose a blue color scheme as it is corelated with stability and reliability to symbolize how the program makes learning easy.

Challenges we ran into

Some challenges we ran into was learning how to make API calls and how to implement the Notion API into our program, as well as working together to resolve merging issues. Along with that, we struggled to create an aesthetically pleasing UI that was also highly functional, as we were trying to balance between the two.

Accomplishments that we're proud of

We are proud of our growth as a team. While developing this program, we all gained skills and knowledge in new topics and coding practices, such as connecting to an API and developing frontend, which can be applied to other projects in the future. Along with that, we are proud of what we were able to accomplish in the time provided, especially with our UI/UX design. We were able to create something that is very pleasing to the eye as well as intuitive, in the span of 6.5 hours, which we were not sure if we would be able to complete or not.

What we learned

From this project, we utilized an OpenAI API to dynamically generate roadmaps and detailed subtasks with resources, streamlining the process of creating personalized learning plans for users. We gained experience in API integration, specifically with Notion API to help users track progress and stay organized during their learning. We also developed our skills in Node.js and other languages, building frontend interfaces from Figma designs, and implementing user authentication systems. Through this, we enhanced our problem-solving and teamwork while overcoming challenges such as merge conflicts and API implementation.

What's next for Hop To It

Next for Hop To It, we hope to develop a timeline feature, which would allow the user to tell the program how long they have to learn the content and when they have time to learn, and Hop To It would then develop a time blocked schedule including hourly estimates of how long a task will take as well as all the different topics and subtopics that will be covered. Along with that, we hope to allow the user to import their own learning materials, for example lecture slides or a list of topics from a syllabus, that the program can take and create a roadmap off of. In the future, we want to further experiment with our design to improve user experience. Overall, we have much room for growth and expansion of Hop To It.