Inspiration

When we shared our personal experiences about day-to-day problems, we found one common theme: A lack of a clear roadmap and direction when learning new skills. We would have goals (whether career, school, social), but we just weren’t quite sure how to achieve it. Thinking a bit deeper, we realised we weren’t the only ones affected. We knew of countless people wanting to transition into new careers, freelancers looking to expand their skill set, or full time workers who don’t have enough time to go back to university but want to upskill to stay relevant in the ever changing workforce. For these people, knowing where to start is always a difficult barrier. Especially in the age of information overload, we were faced with decision paralysis with a lack of clarity of what to do first, and what next. Sometimes this would lead to wasted time, resources into activities that didn’t align with the goals, and a dooming sense of overwhelm, ultimately leading to a loss of motivation. On the other side of the problem, we realised that there are so many resources out there for all types of goals (Khan academy for academics, Udemy for upskilling, Duolingo for languages, the list goes on), but there is a lack of specificity within those resources, meaning that a combination of resources should be used in the upskilling journey.

What it does

Welcome to Learn., an AI powered online platform designed to provide a personalised learning roadmap tailored to any of your goals. After signing in, the user will input all the information: their overarching goal is, how much time they have per week, how much they’re willing to pay, as well as their resume. With that information, the AI will identify the existing skills gap between their goal and their current state, and output a detailed roadmap of tasks and links to resources that can be completed.

How we built it

For the UI/UX we used Figma and Photoshop to design our app. To complement the theme of tech convenience and shaping tomorrow, we chose a sleek minimalistic design with the light green and red colour motifs to add a layer of gamification to increase audience engagement. The web-app runs on an azure app server using Flask framework, websockets to allow for stateful communication with the backend API, and API endpoints using the REST protocol. The front end, deployed on Vercel, then connects to the Azure server using these endpoints and websockets. The process goes as follow: The client requests for navigation and linking are navigated through the NextJS framework. The client logs in with authentication supported by firebase. Then they are directed to a chat interface where they talk with a ChatGPT through websockets connecting to a backend server, that is powered to take its own set of secret notes to determine their goals whilst responding with further questioning leaning on Revealed Preference Theory. Next, the resume is uploaded by the user and parsed to be converted into string. This is sent with the secret notes of the goals to the ChatGPT API to generate a list of skills they might want to learn. They are then directed to the questionnaire page where they choose the skill they want to learn, and input their availability and deadline, which all get uploaded to the Firebase database. These are then uploaded to the ChatGPT API to return a json object of the detailed roadmap broken down into weekly tasks, resource urls and reason for learning. This is passed back to the client through websockets. Information regarding the user is stored in a firebase, and is retrieved by first connecting with endpoints on a Flask server, where the flask server will communicate with firebase to perform simple CRUD operations.

Challenges we ran into

Apart from the lack of sleep, and getting in trouble for sleeping at Melbourne Connect, the major roadblock came in the networking section and the amount of different frameworks used. This includes learning Azure App Service, building API endpoints on Flask, Websockets, conducting API calls, linking the Firestore database (with a quick detour of trying to learn MongoDB), learning the next.js framework. This created barriers of connecting everything together, and linking the front-end, back-end and database together. We also didn’t build the websockets to connect the frontend to the backend so we didn’t know what data types we should be creating and it meant that we had to recode a lot of things at the end. One additional challenge came for user privacy and security when calling the database to make sure other user data wasn’t compromised whenever a database Get request was made. To resolve this, APIs calls were verified through a token id, from which a unique id was bound, and the unique id associated with the token was used to locate the data associated with the users.

Accomplishments that we're proud of

Honestly, with only one previous hackathon participant, deploying a real-life webapp, with a responsive design, that can communicate to a database, and access the right data from multiple points was beyond the realm of what we thought was possible within the given timeframe. The amount of research and documentation reading that went into the 3 days and the dedication shown by all the members were commendable.

What we learned

Technical How to create a prototype design for a web app using Figma, Learn the next.js framework for creating front-end webapps. Create middleware API endpoints on Flask, to communicate between the user input, API calls, and the Firestore database. Backend API deployment on Azure. Integrate powerful AIs into it. Learn how to deploy web-apps quickly. Team That the learning curve is steep, and the importance of being aligned and working in parallel. But as of writing: everything is coming together and that is the best feeling.

What's next for LEARN.

Incorporate domain knowledge through expert interviews and tracking user data such as completion rates for each resource, and using that information to build and train our own model to generate the best possible resources for any given scenario. Integrating a calendar and syncing tasks to best fit within the calendar to automatically adjust for the workload. Build in affiliate links to increase the revenue model. Improve the UI/UX of the webapp.

Built With

Share this project:

Updates