SkillSet Maxxer

• 

  Home screen + Skill selection screen

• 

  Roadmap screen with Beginner chapters

• 

  Quiz + lesson UI screenshot

• 

  Result screen

• 

  Achievements screen

• 

  Locked advanced section screenshot

Inspiration

SkillSet Maxxer was inspired by the challenge many people face when learning new skills online. Most platforms provide unstructured content without engagement or motivation. I wanted to create a gamified learning experience that makes skill-building more interactive, rewarding, and organized.

What it does

SkillSet Maxxer is a modern learning platform that helps users master skills like Game Development, Web Design, and Cybersecurity through structured roadmaps, interactive quizzes, achievements, and progress tracking.

Users can:

• Choose a skill path
• Follow detailed learning chapters
• Complete quizzes and challenges
• Earn medals and ranks
• Track their learning progress

How we built it

The project was built using MeDo AI as the main full-stack app builder.

We created:

• A multi-step onboarding flow
• Structured roadmap system
• Interactive quiz engine
• Progress tracking using local storage
• Reward and ranking system
• Modern dark-themed UI/UX

The application uses JavaScript logic, local storage for persistence, and custom-designed learning structures for each skill path.

Challenges we ran into

One of the biggest challenges was managing dynamic roadmap logic and progress tracking across different skills. We also faced issues with UI duplication, navigation flow, and maintaining state properly using local storage.

Another challenge was designing a clean and scalable learning experience while keeping the interface minimal and engaging.

Accomplishments that we're proud of

• Built a complete learning flow from onboarding to rewards
• Created structured learning roadmaps for multiple skills
• Added gamification through medals, ranks, and achievements
• Designed a futuristic cyber-themed UI
• Successfully implemented persistent progress tracking

What we learned

During development, we learned:

• How to structure scalable learning systems
• UI/UX design principles for educational apps
• Managing application state and navigation
• Building interactive quiz systems
• Improving user engagement through gamification

What's next for SkillSet Maxxer

Future plans include:

• AI-generated personalized roadmaps
• Daily streak and XP systems
• Interactive coding challenges
• Community leaderboards
• Cloud sync and user accounts
• Smart learning recommendations

SkillSet Maxxer aims to become a complete gamified platform for mastering real-world skills.

Built With

• axios
• canvas-confetti
• date-fns
• framer-motion
• lucide-react
• qrcode
• radix-ui
• react-hook-form
• react-router
• recharts
• sonner
• supabase
• tailwind-css
• typescript
• vite
• zod