CareerWiki

Discover Your Future Career Experience real-world scenarios from different careers through interactive simulations. Get personalized guidance from our AI career assistant.

Comment

CareerWiki

Inspiration

The transition from high school to choosing a career path is one of the most challenging decisions young people face. Many students struggle to explore different career options beyond traditional paths, often lacking hands-on experience or real-world context. We were inspired to create CareerWiki to bridge this gap - providing an interactive, educational platform that doesn't just recommend careers, but lets students actively explore and experience them through immersive scenarios.

What it does

CareerWiki is an interactive career exploration platform designed specifically for high school and college students. The platform:

  • Personalized Onboarding: Collects student demographics, skills, interests, personality traits, and learning preferences through an engaging wizard
  • Career Exploration: Allows students to browse and discover various career paths with detailed information
  • Interactive Scenarios: Provides hands-on, scenario-based learning where students can experience real-world situations from different careers
  • Progress Tracking: Monitors student activity, scenario completion, and exploration patterns through a comprehensive dashboard
  • Smart Analytics: Tracks user engagement including page visits, chat interactions, and scenario completions to provide insights

The platform focuses on education rather than recommendation, empowering students to make informed decisions about their future careers.

How we built it

CareerWiki is built using modern web technologies:

  • Frontend Framework: Next.js with React and TypeScript for a robust, type-safe application
  • UI Components: shadcn/ui component library for consistent, accessible design
  • Styling: Tailwind CSS for responsive, modern styling
  • Animations: Framer Motion for smooth, engaging user interactions
  • Database: Integration with backend APIs for user data and activity tracking
  • State Management: React hooks and context for managing application state

Key features include:

  • Dynamic routing for career and scenario pages
  • Real-time activity tracking system
  • Responsive design optimized for various devices
  • Interactive onboarding flow with multi-step wizard
  • Scenario-based learning modules

Challenges we ran into

  1. Activity Tracking Integration: Implementing comprehensive activity tracking across all pages required careful planning to ensure we captured meaningful user interactions without impacting performance

  2. Onboarding Flow Complexity: Designing an onboarding experience that collected necessary information while remaining engaging and not overwhelming for students was challenging

  3. Scenario Design: Creating realistic, educational scenarios that accurately represent different career paths while being interactive and engaging

  4. Data Persistence: Managing user state and progress across multiple sessions and ensuring data consistency

  5. Responsive Design: Ensuring the platform worked seamlessly across different devices and screen sizes, especially for the interactive scenario components

Accomplishments that we're proud of

  • ✨ Intuitive User Experience: Created a smooth, engaging onboarding flow that makes career exploration fun rather than daunting
  • 📊 Comprehensive Analytics: Built a robust activity tracking system that provides valuable insights into student engagement
  • 🎯 Interactive Scenarios: Developed immersive scenario-based learning that gives students a real taste of different careers
  • 🎨 Modern Design: Implemented a clean, professional UI that appeals to students while maintaining educational credibility
  • 🚀 Performance: Optimized the application for fast load times and smooth interactions despite complex features

What we learned

  • User-Centric Design: The importance of understanding our target audience (students) and designing with their needs and preferences in mind
  • Scalable Architecture: How to structure a Next.js application to accommodate growing feature sets and dynamic content
  • Activity Tracking: Implementing comprehensive analytics in a way that's both privacy-conscious and insightful
  • Educational Technology: The balance between making learning interactive and ensuring educational value
  • Rapid Prototyping: How to quickly iterate on features based on testing and feedback

What's next for CareerWiki

  1. AI-Powered Chat Assistant: Integrate an AI chatbot to answer student questions about careers in real-time
  2. Expanded Career Library: Add more career paths, especially emerging fields in technology, sustainability, and creative industries
  3. Advanced Scenarios: Develop more complex, branching scenarios with multiple outcomes based on student choices
  4. Mentor Connections: Connect students with professionals in their fields of interest for guidance and insights
  5. Collaborative Features: Allow students to share experiences, compare progress, and learn from peers
  6. Mobile App: Develop native mobile applications for iOS and Android for on-the-go career exploration
  7. Virtual Reality Integration: Explore VR scenarios for even more immersive career experiences
  8. Certification System: Provide certificates or badges for completed career explorations and scenarios
  9. Parent/Teacher Dashboard: Create separate dashboards for educators and parents to track student progress
  10. Multilingual Support: Expand the platform to support multiple languages for broader accessibility

Built With

Share this project:

Updates