DevPath

• 

  Home Screen

• 

  Login Page

Inspiration

As first-time hackers, we put our heads together and asked ourselves, "what is a problem that we are actively facing, and one that is a big challenge for other students?" We realized that starting the journey of full-stack development was intimidating to all of us. Although we wanted to learn, we weren't always sure where to start or the difference between frameworks (ex. React vs Node.js). In addition to web development, we thought that software engineering and artificial intelligence could also be difficult to learn for complete beginners. Thus, we set out to make a simple and accessible tool, DevPath, that utilizes AI (Gemini) to outline a clear learning plan for every student.

What it does

DevPath asks a simple and brief questionnaire to gauge the user's targeted learning goal, their existing experience, and time they have available to learn the new skill. This information is fed to Google Gemini in order to generate a realistic learning plan personalized to the user. This plan is then clearly presented to the user for them to refer to as they embark on their learning journey.

How we built it

We used https://kit.svelte.dev/ to host our web application. We used https://tailwindcss.com/ to do CSS, HTML, and JavaScript all together for our front-end. The large-language model (LLM) we used was https://gemini.google.com/. In addition, TypeScript and HTTP methods allowed us to transfer user input to the AI model, and the response to our resulting personalized pathway page.

Challenges we ran into

Initially, role delegation was challenging. We wanted to split up the work to make the most of our time, but it took some role-switching to get everyone working on what they wanted to learn and to contribute effectively to the final product. Our team as a whole also did not have a lot of full-stack experience. One of our teammates taught us SvelteKit, so the rest of us had to overcome the learning curve for SvelteKit, Tailwind CSS, JavaScript, HTML, TypeScript, etc. We also had some trouble connecting the front-end to the back-end, which required debugging via console logs and resolving 400 and 500 errors by adjusting our GET and POST methods. Finally, there was limited time to get everything done, so we had to prioritize the absolutely necessary components of our web app.

Accomplishments that we're proud of

We were able to finish our web application and get it working and we learned a lot of new technologies through this experience. We gained confidence as full-stack developers and also got to experience prompt-engineering at a deeper level when working with the Gemini API.

What we learned

• SvelteKit
• Tailwind CSS
• JavaScript
• TypeScript
• HTML
• Gemini API
• .env files

What's next for DevPath

Other than expanding our questionnaire to be more comprehensive and making our prompts more dynamic and customized, our vision for DevPath is that users will be able to create their own accounts to have their personalized pathways saved. This way they can always refer back and adjust their pathways if necessary. A progress-tracking feature could serve as a motivator for continued learning. We could also include a feature to encourage a community of like-minded individuals trying to learn the same skills/technologies. Finally, we could improve accessibility by translating the questionnaire to more languages like Spanish.

Built With

• css
• gemini
• html
• http
• javascript
• sveltekit
• tailwind
• typescript