Whenever you want to learn something new, there's always an initial wall, a barrier, that needs to be surpassed. How? How do you approach learning this thing? What part of it do you learn first? What do you need to know, in order to be proficient?

We've all faced this problem when we've become interested in learning something new. There's an abundance of guides out there, but nothing that can concretely, aesthetically, and clearly give you a visual breakdown of how your learning should proceed.

Personally, the 4 of us, have struggled with this in the past, and we know others have too. Getting started is one of the biggest problems in learning - and we aim to break down that wall.

What it does

Skilltree is a unique web app designed using Svelte, Vite, and Tailwind CSS, and powered by an incredible neural network that takes what you want to learn and constructs a personalised skill tree, dividing this goal into sub-goals - giving you milestones to achieve on your learning path. Inspired by how appealing and satisfying skill trees are in most video games, we've applied this concept to real-world learning. By tracking your progress through the wide array of pre-requisites and components of the topic you want to learn, Skilltree optimizes your learning and gives you an early boost towards your goal.

How we built it

We developed Skilltree using the Svelte javascript framework, configured with Vite, with Tailwind CSS, to design an aesthetically pleasing and satisfying front-end interface for the user. By mixing local persistent storage functionality as well as queries and responses in our routes, we built the entire application to be lightweight (using server-side processing) and portable (functional on all platforms). We studied and constructed an algorithm using a neural network to generate lists of sub-topics within the larger topic the user wants to learn and laid out the results in the form of the tree data structure, which we then visualised using TreeVSN and a complex hierarchical traversal algorithm.

Challenges we ran into

Many of our team members were unfamiliar with the Svelte framework, and thus, development was a slow start. Additionally, we faced issues with server-side vs client-side processing for fast response times from the neural network, which required a lot of brainpower to overcome as generation is a resource-heavy task. The visualisation of the skill tree required the testing of many different packages and options available to us, and displaying the tree in an appealing and interactive manner proved to be a much more difficult task than initially predicted.

Accomplishments that we're proud of

We're proud of the end result, the application we have developed is something that we believe will help each of us greatly, and hopefully others too. Overcoming the technical challenges mentioned above were all also major milestones for all of the team members, and we're proud of getting through them together.

What we learned

Some of our team members learnt a new framework! In addition to that we all learnt how important communication is, and how much a deep learning web app needs to be optimised in order to be a feasible solution for people to use (seriously don't know why we didn't realise this).

What's next for SkillTree

We hope to improve upon our generation algorithm as well as develop more interactive behaviour for the actual skill tree itself. We would like to recommend resources to learn the topics we suggest as well as build a mobile app for better native support for skill tree on mobile. We also want to add in user accounts to allow people to access these trees from other devices.

Discord Usernames

  • desgroup#0675
  • Talfryn#1377
  • testname_plsignor#9652
  • rcordi#0621

Built With

Share this project: