With the COVID-19 pandemic and quarantine orders in place, many people are finding themselves with LOTS of free time. Many people could spend their time binging Netflix shows, playing video games, or complain about how boring things are (we might be culprits of these).

There's so many activities out there in the world, so many hobbies to try, skills to learn, passions to enjoy.

As high schoolers ourselves, the transition to online learning has given us an amplitude of free time, and we've found amongst ourselves a love for coding. We want to help others find their hidden passions as well during these times.

Bored gif

What it does

SkillQuest is an app that gamifies learning new skills such as solving a Rubik's cube or learning magic tricks. Users can earn points for mastering a skill, see what their friends are learning, and can compete to see who can learn more skills!

The main bread and butter of our app comes from the user experience in learning a new skill. They can find new skills quickly, and will be provided resources and videos related to the skill. Skills that are being learned will appear in a carosel in the home page.

Other pages complement the app, starting with a community feed page, where friends as well as the user can post updates of themselves learning skills, to a leaderboard page, which updates based on the number of skills a user has learned. The score is calculated based on the number of skills a user has learned, as well as how long the skills take to master.

Finally, there is a profile page, which is personally tailored to your interests and learned skills. There’s a section to see your past posts and a section that is characterized by your skill interests.

Hobby gif

How we built it

At its core, this app is a web-scraping app. We set our app up so that after scraping a variety of several websites and thinking up a couple of "skills" on our own, we created a comprehensive list long enough to last a person through corona-time (2-3 months), the app randomly suggests some possible skills to learn every day. Once we did this, using a separate python flask, we created a web-scraping algorithm that would scour the web for the most relevant information and resources to learn any given task within seconds! We scraped from a couple of web browsers, such as Bing and Yahoo, and we ran cross-verifications and checks to ensure that these results were consistently relevant. We made an API interface between our application and this server, hosting the server on a local network for the time being, but we plan on pushing it into the cloud so that it can be accessible from anywhere.

Within the app itself, using Youtube's API and a TON of keyword tweaking, we set up a similar algorithm that would return Youtube's most relevant results in our final display. To store all of our user data, we used firebase cloud firestore, and we used firebase storage to store all the images on our network. We structured our app's backend as that of a social media app, with all of the typical capabilities of posting, viewing a feed, and sharing, with an extra element of competition between friends. For our UI, we used Flutter, a cross-platform application development platform, but we had heavy usage of tools like Adobe XD and wire-framing tools to ensure that we got that perfect clean look in our displays.

Our feelings towards async loops

Challenges I ran into

The web-scraper was by far the most challenging part. Since most browsers and search engines are javascript enabled, it's very difficult to web-scrape off of them. We needed to simulate being an actual user (we ended up using selenium) when running our searches to actually get data, which we didn't realize until having put way too much time into faulty fixes.

Sad but true

Since our app is overridden with tons of async programming, we had a really tough time making sure that everything in our async loop worked as intended in the correct order. We spent over half an hour on a single line of code before realizing we were missing an async keyword in one spot which was why our entire leaderboard page wasn't calculating correct.

Accomplishments that we're proud of

We're pretty proud of creating our own API with our web-scraping algorithms, and being able to successfully connect it to the app. All of the work that went into getting everything to work smoothly was definitely worth it. We're also super proud of our UI, which we believe is the best UI any of us has ever made. Most of all we're proud that we were able to finish the app with time to spare, and that every single aspect of the app (that we could think of) ended up being more or less functional at the end.

What we learned

What we learned

We had 2 novices on our team who were just getting started with app development. Despite this they worked together and seriously contributed to the UI. They were even able to make some contributions to the backend and the more complex parts of the code! Otherwise, in general our team learned so much. We learned how to use the YouTube API, how to make more effective web-scrapers with human simulation via selenium, and how to use firebase storage to make a photo-sharing app.

What's next for SkillQuest

Although this app was created to help allieviate boredom during the COVID-19 pandemic, SkillQuest doesn't have to end after the pandemic. Our hopes are to continue developing this app, even after the hackathon, so that users everywhere can continue to explore skills and hobbies.

On a large-scale, we’d love to have world-wide competitions to master a skill, as well as integration with other social media platforms.

Who we are

Cinco Ranch High School

*Discord Tags : * maoster#1693 - Andrew Mao Seithearth#5106 - Vincent Do LucasVegetable#1114 - Lucas Cai PrasannSinghal#9723 - Prasann Singhal

+ 8 more
Share this project: