DEV Community

Cover image for Roadmap AI - Process of learning a new skill
Schemetastic (Rodrigo)
Schemetastic (Rodrigo) Subscriber

Posted on • Edited on

3 3 3 3 4

Roadmap AI - Process of learning a new skill

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

This is a metaphor about learning a new skill. Below, I explain the metaphor, but I would recommend that first you try the project with the demo link and then read the explanation to see if you caught everything.

This project generates a roadmap using AI, then you begin your journey collecting gems (= step/knowledge in the map), every amount of gems you collect, you get to play a minigame where you need to press a button to fill an energy bar to transform your gems into a new creation, every level is more difficult than the previous one. There's a little surprise when you finish the last level!

Accessibility features

  • When the dialog (wooden letter sign) appears, it automatically receives focus (for example, you can observe a dashed outline square in the content area).
  • The whole game can be played using keyboard only (though requires a bit of a heavy tabbing and shift+tabbing).
  • I applied the :hover styles to :focus on several elements to have a clearer visual cue for when an element is being focused.
  • I used some aria-labels
  • I applied focus outlines to some elements that in some moments don't have any hover animation but can be focused (gems and locks that still can't be unlocked).

Metaphor Explanation [⚠️ SPOILER ALERT]

If you haven't played the game, I advise you to do it.

The gems are equal to acquiring knowledge, but they are in the rough because knowledge itself is not enough, you need to put it into practice to make something out of it. To build something, you need a set amount of gems because the more complex the project, the more knowledge it requires, also they require more skill (remember the skill button?).

Level 1: is simple and basic because starter projects tend to be like that and aren't that challenging.

Level 2: a fog appears called "imposter syndrome", something many people feel when they start to get more serious and progressing, but still feel like is not enough and that can lead to disorientation, the fog doesn't stop you from pressing the button, but it requires more effort, because to overcome imposter syndrome, you need to keep pushing through and through until you make it.

Level 3: insecurity holes appear in your energy bar, and you can't press the skill button. Insecurities can make us feel paralyzed, and they can appear no matter how much experience you have. When you click the holes (insecurities), you get a view of your previous made projects, as you do it, they dissipate. When we feel insecure it is a great idea to take a look back to what we have achieved, when we see that we have overcome challenges in the past we remember who we are and what we are capable of.

SCREENSHOTS

Home screen with a variety of developer and career fields

Roadmap screen Menu

A sign showing information of a field

Project screen that shows a bar being filled, a glass container with gems in it and a mouse cursor over a button that says “Apply Skill”

Repo

GitHub logo schemetastic / roadmap-ai

Generate a roadmap with AI in a gamified way.

Roadmap AI

Create a roadmap using AI interactively and visualize it in a gamified way.


SvelteKIt installation instructions


sv

Everything you need to build a Svelte project, powered by sv.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
Enter fullscreen mode Exit fullscreen mode

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
Enter fullscreen mode Exit fullscreen mode

Building

To create a production version of your app:

npm run build
Enter fullscreen mode Exit fullscreen mode

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Copilot Experience

Copilot is still a new experience for me, but I'm starting to find the sweet spot for it. Most of the cases I'd like to use the small completions (1-5 lines) rather than the large ones, and I like how it saves time with regexes and split strings, or write utility functions that sometimes can be a bit annoying to write. I think my sweet spot is that it be my copilot, and most of the time I'd like to be the pilot, and is very nice when it suggests something that I didn't think about, or that I needed promptly. Honestly, I've had some wow moments with it.

GitHub Models

The project uses gpt-4o-mini (from the marketplace) in the backend to generate the roadmaps.

In the chat in VS Code I used GPT 4o.

Conclusion

What I want to achieve is that when you select a roadmap and as you play the game, I want you to visualize yourself in the real journey, the real stuff. 2025 has just begun, why not?


Start time: 10:33, Jan 16, Honduras
End time: 10:18, Jan 17 Honduras~


This is actually my second attempt in this category of the challenge, but in the first one I couldn't finish it on time because I tried to do so much in so little time (also I was a bit rusty with Svelte). So I wanted another chance and built a similar idea but for this one I was more mentally prepared and more familiarized with Svelte (also, I only slept like 2 hours (but it was fun, haha)), and I tried to make it more simple (from a code logic stand view) but better, and yes, completely from scratch.


✨ Personal Note ✨: Building this project reminded me of the good 'ol days when I was around 12–14 years old, and I would spend countless hours in Scratch making my own games, actually, that's how I've got into programming 🫶🏽.


Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (1)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Quick clarification here on a few of the screenshots, haha... The “Finish” button actually appears as “? ? ?” when you play it, but I took the screenshot while still in development, it says “Finish” until you complete the roadmap, not before.

I hope you enjoy this project, I enjoyed this one, a lot of hard work! If you are asking yourself how I did it in 24 hours, I only slept like 2 of those, haha. Also, most of the idea was very clear in my mind, and Copilot reduced a good time on things that could have taken me way longer, for example, parsing the output of gpt-4o-mini, and helping me with a few animations, among other stuff.

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video