SkillBridge AI is a cutting-edge Progressive Web App (PWA) that revolutionizes professional development through AI-powered personalized learning, real-time market insights, and voice-enabled coaching. Built as a showcase for the Dream AI Hackathon 2025, it demonstrates innovative integration of sponsor technologies with world-class user experience.

• 🎙️ Voice-First Experience: Natural conversations with AI coach using ElevenLabs technology
• 📊 Real-Time Intelligence: Live job market data and salary insights via Uclone MCP integration
• 🧠 Personalized AI: GPT-4 powered recommendations tailored to your career goals
• ⚡ Production-Ready PWA: Offline support, push notifications, and app-like experience
• 🎨 Neural Glassmorphism: Cutting-edge UI with neural network-inspired animations
• ♿ Accessibility-First: WCAG 2.1 AA compliant with full keyboard navigation

• Overall Completion: 97% (7 of 8 phases complete)
• Total Files: 120+ TypeScript/React files
• Lines of Code: 18,000+ production-ready code
• React Components: 70+ advanced UI components
• API Endpoints: 14 comprehensive routes
• Database Models: 13 interconnected entities
• Performance: Lighthouse score 95+ expected
• Accessibility: WCAG 2.1 AA compliant

• Production Vercel deployment
• Environment variable configuration
• Demo data generation
• Performance optimization
• Hackathon presentation materials

Our innovative design system combines glassmorphism with AI-inspired neural network aesthetics:

• Glassmorphic Surfaces: Translucent cards with backdrop blur effects
• Neural Animations: Pulsing connections, floating particles, and interactive nodes
• Smart Micro-interactions: Context-aware hover states and transitions
• Accessibility First: High contrast modes, keyboard navigation, screen reader support
• Performance Optimized: Hardware-accelerated animations, lazy loading, virtual scrolling

• Smart Command Palette: Intelligent search with keyboard shortcuts
• Context-Aware Tooltips: Auto-positioning with variant styles
• Neural Loading Animations: Interactive particle systems
• Progressive Enhancement: Graceful degradation for all devices

• 9 Professional Voices: ElevenLabs integration with emotion control
• Real-Time Synthesis: Instant voice generation with waveform visualization
• Conversation Context: Persistent chat history with intelligent responses
• Voice Diagnostics: Built-in testing and troubleshooting tools

• 5 Comprehensive Components: Stats cards, trend charts, market insights, progress analytics, competitive analysis
• Real-Time Data: Live market trends and salary benchmarking
• Interactive Visualizations: Recharts integration with custom animations
• Export Functionality: JSON/CSV export for detailed reports

• Drag-and-Drop Builder: Visual path creation with React DnD
• Skill Assessment: Multi-step evaluation with AI recommendations
• Progress Tracking: Real-time monitoring with celebration animations
• Resource Management: Comprehensive learning material organization

• Google OAuth: Secure authentication with session management
• Error Boundaries: Comprehensive error handling with graceful fallbacks
• Data Protection: GDPR compliant with privacy-first design
• Performance Monitoring: Real-time error reporting and analytics

• Service Worker: Intelligent caching with offline support
• Push Notifications: Learning reminders and milestone celebrations
• App Installation: Smart install prompts for mobile/desktop
• Cross-Platform: Consistent experience across all devices

Frontend Framework: Next.js 15.3.4 (App Router) + TypeScript 5.0 Styling & UI: Tailwind CSS + Shadcn/ui + Custom Glassmorphism State Management: Zustand + Redux Toolkit Database: PostgreSQL + Prisma ORM + Prisma Accelerate AI/ML Services: OpenAI GPT-4 + ElevenLabs Voice Synthesis Market Data: Uclone MCP Server Integration Authentication: NextAuth.js v4 + Google OAuth Deployment: Vercel Edge Functions + Serverless Performance: Service Worker + Lazy Loading + Virtual Scrolling Accessibility: WCAG 2.1 AA + Keyboard Navigation + Screen Reader

• Service Worker: Intelligent caching with network-first strategies
• Error Boundaries: Comprehensive error handling with beautiful fallbacks
• Performance Hooks: Memory monitoring, network status, Core Web Vitals
• Accessibility Suite: Keyboard shortcuts, screen reader support, focus management
• Theme System: Dark/light/auto modes with system preference detection

• Production URL: https://skillbridge-ai.vercel.app (coming soon)
• Demo Video: 5-minute walkthrough (coming soon)
• Presentation: Hackathon slides (coming soon)

Neural Glassmorphism Dashboard	AI Voice Coach with Waveform
Advanced Analytics Dashboard	Drag-and-Drop Learning Builder

• Node.js 18.18.0+ (recommended: 24.2.0)
• PostgreSQL database
• API keys for OpenAI and ElevenLabs

# Clone the repository git clone https://github.com/Achyut21/SkillBridge-ai.git cd SkillBridge-ai # Use the correct Node.js version nvm use 24.2.0 # or install if needed # Install dependencies npm install # Set up environment variables cp .env.example .env.local # Required environment variables: # DATABASE_URL="postgresql://..." # NEXTAUTH_URL="http://localhost:3004" # NEXTAUTH_SECRET="your-secret-key" # GOOGLE_CLIENT_ID="your-google-client-id" # GOOGLE_CLIENT_SECRET="your-google-client-secret" # OPENAI_API_KEY="your-openai-api-key" # ELEVENLABS_API_KEY="your-elevenlabs-api-key" # Set up database npm run db:generate npm run db:push npm run db:seed # Start development server npm run dev

1. Visit: http://localhost:3004
2. Login: Use Google OAuth to authenticate
3. Voice Test: Go to /dashboard/voice-diagnostic to test ElevenLabs
4. AI Test: Visit /dashboard/voice-coach to test OpenAI integration
5. Features: Explore analytics, learning paths, and market insights

# Test voice integration ./scripts/test-voice-integration.sh # Test AI features node scripts/test-ai-features.js # Test API endpoints curl http://localhost:3004/api/test-voice # Generate PWA icons node scripts/generate-icons.js

# Install Vercel CLI npm i -g vercel # Deploy vercel # Set environment variables in Vercel dashboard # Deploy with production settings vercel --prod

# Database DATABASE_URL=postgresql://user:password@host:port/database # Authentication NEXTAUTH_URL=https://your-domain.vercel.app NEXTAUTH_SECRET=your-production-secret # Google OAuth GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret # AI Services OPENAI_API_KEY=your-openai-api-key ELEVENLABS_API_KEY=your-elevenlabs-api-key # Optional: Error Monitoring SENTRY_DSN=your-sentry-dsn

• POST /api/auth/signin - Google OAuth sign in
• POST /api/auth/signout - Sign out user
• GET /api/auth/session - Get current session

• POST /api/ai/recommendations - Get AI recommendations
• POST /api/ai/voice - Generate voice synthesis
• GET /api/test-voice - Test voice integration

• GET /api/analytics/progress - User progress data
• GET /api/analytics/market - Market insights
• GET /api/analytics/competitive - Competitive analysis
• POST /api/analytics/export - Export analytics data

• GET /api/learning/paths - Get learning paths
• POST /api/learning/paths - Create learning path
• GET /api/learning/skills - Get available skills
• POST /api/learning/progress - Update progress

import { GlassmorphismCard, GradientButton, NeonBorder, AnimatedBackground, NeuralLoadingSpinner } from '@/components/custom' // Usage examples <GlassmorphismCard variant="elevated" className="p-6"> <GradientButton variant="primary" size="lg"> Get Started </GradientButton> </GlassmorphismCard>

import { SmartCommandPalette, SmartTooltip, ProgressRing, AnimatedCounter } from '@/components/advanced-ux' // Keyboard shortcuts const { isOpen, open, close } = useCommandPalette()

import { useKeyboardShortcuts, AccessibleField, SkipLinks, LiveRegion } from '@/components/accessibility'

1. Neural Glassmorphism: First-of-its-kind design system
2. Voice-First UX: Accessible AI coaching for all users
3. Real-Time Intelligence: Live market data integration
4. PWA Excellence: Offline-first, app-like experience
5. Accessibility Leader: WCAG 2.1 AA compliant
6. Performance Optimized: 95+ Lighthouse score

• 9 Professional Voices: Diverse voice options for inclusivity
• Emotion Control: Dynamic tone adjustment for context
• Real-Time Synthesis: Instant audio generation
• Waveform Visualization: Beautiful audio representation
• Accessibility: Screen reader compatible voice coaching

• Live Job Data: Real-time market trends and opportunities
• Salary Benchmarking: Accurate compensation insights
• Skill Demand Analysis: Data-driven career recommendations
• Industry Insights: Competitive intelligence for users

• Addressable Market: $366B corporate training market
• Revenue Streams: Freemium, Pro ($19/mo), Enterprise ($99/mo)
• Scalable Architecture: Serverless, edge-optimized
• B2B2C Potential: White-label opportunities for enterprises

• Multi-Language Support: Global accessibility
• Team Collaboration: Shared learning paths and goals
• Integration Marketplace: Connect with HR tools and LMS
• Advanced Analytics: Predictive career modeling
• Mobile Apps: Native iOS/Android applications

• AI Model Fine-Tuning: Custom models for specific industries
• Blockchain Integration: Skill verification and credentials
• AR/VR Support: Immersive learning experiences
• Edge Computing: Ultra-low latency voice processing

We welcome contributions! Please see our Contributing Guide for details.

# Fork the repository # Clone your fork git clone https://github.com/yourusername/SkillBridge-ai.git # Create a feature branch git checkout -b feature/amazing-feature # Make your changes and commit git commit -m "feat: add amazing feature" # Push and create a pull request git push origin feature/amazing-feature

This project is licensed under the MIT License - see the LICENSE file for details.

• Dream AI Hackathon 2025 - For providing an incredible platform
• OpenAI - For GPT-4 and advancing AI accessibility
• ElevenLabs - For revolutionary voice synthesis technology
• Uclone - For real-time market data capabilities
• Vercel - For seamless deployment and edge computing
• Next.js Team - For the amazing React framework

• Developer: Achyut Katiyar
• Website: achyutkatiyar.com
• Email: achyutkatiyar21@gmail.com
• GitHub: @achyut21
• LinkedIn: achyutkatiyar2103
• Phone: +1 (857) 576-6733

🚀 Ready to revolutionize your career with AI?

🌐 Try Live Demo • 🔧 Run Locally • ⭐ Star on GitHub

Built with ❤️ by [Nikhila Koneru](https://github.com/Nikhilakoneru) and [Achyut Katiyar](https://github.com/achyut21) and