First Step

• 

  ui

Inspiration

Teens often feel overwhelmed when learning independence things like budgeting, cooking, or traveling alone can seem intimidating. We wanted a fun, safe way to help them build confidence one small step at a time.

What it does

First Step turns independence into a gamified adventure. Teens complete “micro-quests” that gradually increase in difficulty, track progress, earn badges, and unlock location-based challenges, all while mentors or parents can safely support them.

How we built it

We created a single-page HTML/CSS/JS app with:

1. Quest tracking and completion
2. Keyboard-first navigation and onboarding
3. Geolocation-based quest unlocks
4. Printable milestone certificates
5. All data is stored locally for simplicity and offline use.\

Challenges we ran into

1. Simulating AR/real-world interaction without hardware
2. Making the app intuitive for keyboard-first users
3. Designing a certificate system entirely in the browser

Accomplishments that we're proud of

1. Fully self-contained, offline-friendly app
2. Fun and interactive gamification system
3. Realistic geolocation-based quest unlocking for demos
4. Printable achievement certificates

What we learned

1. How to make complex features work in a single-page app
2. Balancing autonomy and safety for teen users
3. Techniques for engaging UI/UX without external libraries

What's next for First Step

1. Add mentor-only view mode
2. Integrate QR scanning for real-world quest unlocks
3. Expand quests for young adults (college, first job)
4. Implement a community marketplace for user-submitted quests

Built With

• css
• html
• javascript