Aspyr - Your intelligent Skills Gap Analyzer

Aspyr CareerPath Gap Analyzer shows students how their skills match tech roles, highlights gaps, and gives simple learning paths so they know exactly what to learn next.

Comment

Inspiration# Aspyr: Our Journey Building a Career Path Analyzer

🌟 Project Overview

Aspyr is an intelligent career path analyzer that helps students and job seekers identify skill gaps, discover personalized learning resources, and navigate their journey toward tech careers. Built with React, TypeScript, and powered by AI, Aspyr bridges the gap between where you are and where you want to be in your career.

💡 What Inspired Us

The Problem We Saw

As students navigating the tech industry, we noticed a critical problem: the disconnect between academic knowledge and industry requirements. Many students graduate with theoretical knowledge but struggle to identify what specific skills they need for their dream job. Traditional career guidance often lacks personalization and actionable insights.

Our Vision

We wanted to create a tool that:

  • Democratizes career guidance - Making professional career analysis accessible to everyone
  • Provides personalized insights - Tailored recommendations based on individual skill sets
  • Connects learning to careers - Direct links between skills gaps and free learning resources
  • Empowers students - Clear visibility into what it takes to land their target role

The Name "Aspyr"

The name "Aspyr" reflects our core mission: helping people aspire to reach their career goals. The logo—a figure climbing stairs toward a star—symbolizes the journey of growth, progress, and reaching for one's aspirations.

📚 What We Learned

Technical Skills

  1. React 19 & TypeScript

    • Building complex, type-safe React applications
    • Managing state across multiple components
    • Implementing context providers for theme management
    • Creating reusable, composable components

  2. File Parsing & Processing

    • PDF parsing with PDF.js
    • DOCX parsing with Mammoth
    • Text extraction and skill matching algorithms
    • Handling various file formats and edge cases

  3. API Integration

    • OpenAI API integration for AI-powered features
    • Building conversational interfaces
    • Managing API rate limits and error handling
    • Creating dynamic prompts based on user context

  4. UI/UX Design

    • Creating responsive, accessible interfaces
    • Implementing dark/light theme systems
    • Dynamic theming based on user preferences (university colors)
    • Building smooth animations and transitions

  5. Data Management

    • Working with large JSON datasets (139+ skills, 8 roles)
    • Implementing weighted algorithms for skill matching
    • Creating efficient search and filtering systems
    • Managing state across complex user flows

Soft Skills & Collaboration

  1. Code Merging & Integration

    • Merging three separate codebases into one cohesive application
    • Resolving conflicts and maintaining code quality
    • Coordinating features from different team members
    • Maintaining consistency across merged code

  2. Problem-Solving

    • Debugging complex issues with file parsing
    • Optimizing performance for large datasets
    • Handling edge cases in user input
    • Creating fallback mechanisms for API failures

  3. User-Centric Design

    • Gathering feedback and iterating on UI/UX
    • Prioritizing features based on user needs
    • Creating intuitive user flows
    • Ensuring accessibility and usability

🏗️ How We Built It

Phase 1: Foundation (Repository Merging)

We started with three separate implementations, each with unique strengths:

Repository 1 - Focused on:

  • Weighted readiness calculation
  • Roadmap.sh integration
  • Resource scraping and management
  • Enhanced learning path prioritization

Repository 2 - Focused on:

  • Resume parsing (PDF, DOCX, TXT)
  • LinkedIn profile parsing
  • AI chatbot integration
  • Career guidance features

Repository 3 - Focused on:

  • Beautiful UI/UX with animations
  • Timeline visualization
  • Job market statistics
  • Project suggestions
  • School course recommendations
  • Theme support

The Merge Process:

  1. Unified type definitions across all repositories
  2. Consolidated dependencies and scripts
  3. Integrated unique features from each repo
  4. Resolved TypeScript errors and conflicts
  5. Created a cohesive user flow

Phase 2: Core Features Implementation

1. Skill Management System

  • Built autocomplete with 139+ technical and soft skills
  • Implemented skill normalization with alias matching
  • Created skill categorization (language, framework, tool, soft)
  • Added clickable skill badges for easy management

2. Gap Analysis Engine

  • Developed weighted readiness calculation based on skill importance
  • Created skill matching algorithms with fuzzy matching
  • Implemented category-based skill grouping
  • Built visual progress indicators

3. Learning Path Generator

  • Integrated roadmap.sh resources
  • Prioritized resources (videos → interactive → docs → articles)
  • Created personalized timelines based on skill gaps
  • Added resource attribution and credits

4. Resume & LinkedIn Parsing

  • Implemented PDF parsing with PDF.js
  • Added DOCX parsing with Mammoth
  • Created LinkedIn profile parsing (URL and text paste)
  • Built skill extraction algorithms

5. AI-Powered Chatbot

  • Integrated OpenAI API
  • Created dynamic system prompts based on user context
  • Built conversational interface
  • Added career guidance and course recommendations

Phase 3: UI/UX Enhancement

Dynamic Theming

  • Implemented dark/light mode with system preference detection
  • Created dynamic university color theming
  • Built color utility functions (hexToRgb, darkenColor, isLightColor)
  • Ensured text readability on all background colors

User Experience

  • Created animated landing page
  • Built smooth transitions between steps
  • Implemented responsive design for all screen sizes
  • Added loading states and error handling

Personalization

  • University-specific color schemes
  • Personalized welcome messages
  • School-specific course recommendations
  • Role-based resource prioritization

Phase 4: Advanced Features

Timeline Visualization

  • Created personalized learning timelines
  • Added milestone tracking
  • Implemented progress visualization
  • Built interactive timeline components

Job Market Statistics

  • Integrated job market data
  • Created profession outlook displays
  • Added salary and growth projections
  • Built data visualization components

Project Suggestions

  • AI-generated project ideas
  • Portfolio-building recommendations
  • Skill-specific project suggestions
  • Resource links for project implementation

🚧 Challenges We Faced

1. Merging Three Codebases

The Challenge:

  • Three different code structures and patterns
  • Conflicting dependencies and versions
  • Duplicate functionality with different implementations
  • TypeScript errors from type mismatches

The Solution:

  • Created unified type definitions
  • Standardized component structure
  • Consolidated dependencies
  • Systematically resolved conflicts
  • Maintained git history for traceability

2. File Parsing Reliability

The Challenge:

  • PDF files in various formats and structures
  • DOCX files with different encoding
  • LinkedIn profiles not always publicly accessible
  • Skill extraction accuracy

The Solution:

  • Implemented multiple parsing strategies
  • Added error handling and fallbacks
  • Created skill normalization algorithms
  • Built fuzzy matching for skill recognition
  • Added manual input as fallback

3. Dynamic Theming Complexity

The Challenge:

  • Ensuring text readability on all background colors
  • Maintaining button colors while changing backgrounds
  • Handling light and dark modes with dynamic colors
  • Creating smooth color transitions

The Solution:

  • Built color utility functions to determine text color
  • Used CSS custom properties for dynamic theming
  • Created separate color variables for backgrounds and UI elements
  • Implemented contrast checking algorithms
  • Added text shadows for better readability

4. State Management Across Components

The Challenge:

  • Managing user profile, skills, and role selection
  • Preserving state when changing roles
  • Handling complex user flows
  • Maintaining data consistency

The Solution:

  • Used React Context for theme management
  • Implemented careful state lifting
  • Created clear prop interfaces
  • Added state persistence where appropriate
  • Built clear separation of concerns

5. API Integration & Rate Limits

The Challenge:

  • OpenAI API rate limits
  • Handling API failures gracefully
  • Managing API costs
  • Creating meaningful fallbacks

The Solution:

  • Implemented error handling and retry logic
  • Created fallback responses for API failures
  • Built cached responses where appropriate
  • Added loading states and user feedback
  • Made API usage optional for core features

6. UI/UX Refinement

The Challenge:

  • Creating consistent design across merged components
  • Ensuring accessibility
  • Making the UI appealing and modern
  • Handling responsive design

The Solution:

  • Established design system with CSS variables
  • Created reusable component styles
  • Implemented responsive breakpoints
  • Added keyboard navigation support
  • Conducted user testing and iteration

7. Skill List Expansion

The Challenge:

  • Initial skill list was too limited
  • Needed comprehensive coverage of tech skills
  • Ensuring skill aliases for matching
  • Categorizing skills appropriately

The Solution:

  • Expanded from 30 to 139+ skills
  • Added comprehensive aliases for each skill
  • Created proper categorization
  • Included both technical and soft skills
  • Built search and filtering capabilities

8. Change Role Functionality

The Challenge:

  • Users wanted to change roles without losing data
  • Maintaining name, skills, and other information
  • Only resetting role selection

The Solution:

  • Modified state management to preserve user data
  • Created separate handler for role changes
  • Maintained user profile and skills across role changes
  • Added clear visual feedback for role changes

🎯 Key Features

Core Features

  • ✅ Skill Gap Analysis - Compare your skills to role requirements
  • ✅ Weighted Readiness - Importance-weighted readiness calculation
  • ✅ Learning Path - Personalized learning resources
  • ✅ Resume Parsing - Extract skills from PDF, DOCX, TXT files
  • ✅ LinkedIn Integration - Import skills from LinkedIn profiles
  • ✅ AI Chatbot - Career guidance and recommendations
  • ✅ Timeline Visualization - Personalized learning timeline
  • ✅ Job Statistics - Profession outlook and market data
  • ✅ Project Suggestions - AI-generated project ideas
  • ✅ School Courses - University-specific course recommendations

UI/UX Features

  • ✅ Dynamic Theming - University-specific color schemes
  • ✅ Dark/Light Mode - System preference detection
  • ✅ Responsive Design - Works on all screen sizes
  • ✅ Smooth Animations - Engaging user experience
  • ✅ Accessible - Keyboard navigation and screen reader support

Technical Features

  • ✅ Type-Safe - Full TypeScript implementation
  • ✅ Performance Optimized - Efficient algorithms and data structures
  • ✅ Error Handling - Graceful fallbacks and user feedback
  • ✅ Modular Architecture - Reusable components and utilities

🛠️ Technical Stack

Frontend

  • React 19 - Modern React with latest features
  • TypeScript - Type-safe development
  • Vite - Fast development and building
  • CSS3 - Modern styling with custom properties

Libraries & Tools

  • PDF.js - PDF parsing
  • Mammoth - DOCX parsing
  • OpenAI API - AI-powered features
  • jsPDF - PDF export (future feature)

Data Management

  • Static JSON - Skills, roles, resources, colleges
  • Local Storage - Theme preferences
  • React Context - State management

🚀 Future Improvements

Planned Features

  • [ ] PDF export of results
  • [ ] Social sharing capabilities
  • [ ] Progress tracking over time
  • [ ] Integration with learning platforms (Coursera, Udemy)
  • [ ] Job board integration
  • [ ] Resume builder
  • [ ] Interview preparation resources
  • [ ] Networking features

Technical Improvements

  • [ ] Performance optimization for large datasets
  • [ ] Enhanced error handling
  • [ ] Better mobile experience
  • [ ] Offline support
  • [ ] PWA capabilities
  • [ ] Unit and integration tests
  • [ ] CI/CD pipeline

UX Improvements

  • [ ] More animations and transitions
  • [ ] Enhanced accessibility
  • [ ] Better onboarding flow
  • [ ] More personalization options
  • [ ] User accounts and profiles
  • [ ] Progress history

📊 Project Statistics

  • Total Skills: 139+
  • Supported Roles: 8
  • Learning Resources: 18+ roadmap.sh resources
  • Supported File Formats: PDF, DOCX, TXT
  • Universities Supported: 100+ with custom colors
  • Lines of Code: 10,000+
  • Components: 15+
  • Utilities: 10+
  • Development Time: Hackathon duration
  • Team Members: 3+ developers

🙏 Acknowledgments

Resources & Tools

  • roadmap.sh - Learning resources and roadmaps
  • OpenAI - AI-powered features
  • PDF.js - PDF parsing capabilities
  • Mammoth - DOCX parsing
  • React Team - Amazing framework
  • TypeScript Team - Type safety

Inspiration

  • BDPA Indianapolis - Hackathon organizers
  • Career guidance platforms - For inspiration
  • Open source community - For tools and resources

Team Members

  • Repository 1 Contributor - Weighted readiness & roadmap integration
  • Repository 2 Contributor - Resume/LinkedIn parsing & chatbot
  • Repository 3 Contributor - UI/UX & advanced features
  • All Contributors - For the collaborative effort

💭 Reflection

Building Aspyr was an incredible learning experience. We learned that:

  1. Collaboration is key - Merging three codebases taught us the importance of clear communication and code organization.

  2. User feedback matters - Iterating based on user feedback led to a much better product.

  3. Simplicity wins - Sometimes the simplest solution is the best solution.

  4. Details matter - Small UI/UX improvements make a big difference in user experience.

  5. Testing is crucial - Edge cases and error handling are essential for a robust application.

  6. Documentation helps - Good documentation saves time and helps others understand the code.

  7. Learning never stops - Every challenge was an opportunity to learn something new.

🎓 Conclusion

Aspyr represents our journey from identifying a problem to building a solution. It's more than just a tool—it's a reflection of our passion for helping others achieve their career goals. We're proud of what we've built and excited about the potential impact it can have on students and job seekers.

Thank you for being part of our journey!

Built with ❤️ by the Aspyr team for the BDPA Indianapolis Hackathon

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Aspyr - Your intelligent career path analyzer.

Built With

  • context
  • local
  • persistence)
  • react
  • react-19-typescript-vite-css3-(custom-properties-/-theming)-pdf.js-(pdf-parsing)-mammoth-(docx-parsing)-openai-api-static-json-datasets-(skills
  • resources
  • roadmap.sh
  • roles
  • storage
  • theme
  • universities)
Share this project:

Updates