🎓 Career Sarthi – Student Career Guidance Panel
A React-based web application built for Smart India Hackathon (SIH) that provides personalized career guidance, college discovery, and AI-powered counseling for students.
🔗 Live Demo: https://career-sarthi-six.vercel.app/
🌟 Features 🔐 Authentication & User Management
Clerk Authentication Integration: Secure user authentication with sign-up, sign-in, and profile management
User Profile Management: Comprehensive profile system with academic details, career preferences, and personal information
Real-time Profile Completion Tracking: Visual progress indicators encouraging users to complete their profiles
📚 Academic Management
Academic History Tracking: Detailed 10th and 12th class academic records
Higher Education Information: Current education level, college, course, semester, and CGPA tracking
Board Selection: Support for CBSE, ICSE, State Board, and other educational boards
Stream Management: Science (PCM/PCB/PCMB), Commerce, and Arts/Humanities streams
🎯 Career Guidance
Career Interest Mapping: Track and manage career interests and preferences
Target Exam Planning: Preparation tracking for JEE, NEET, CAT, GATE, and other competitive exams
Location Preferences: Preferred work location management
Skills Assessment: Technical and soft skills tracking
🏫 College & Scholarship Management
College Discovery: Browse and explore various colleges and universities
College Comparison: Save and compare colleges based on preferences
Scholarship Finder: Discover and track scholarship opportunities
Application Tracking: Monitor scholarship and college application status
👨🏫 Counselor Network
Expert Counselors: Connect with professional career counselors
Specialization Matching: Find counselors based on specific career domains
Availability Tracking: Real-time counselor availability status
Communication Platform: Direct communication with counselors
🤖 AI-Powered Guidance
AI Career Advisor: Intelligent career recommendations and guidance
Personalized Suggestions: AI-driven college and career suggestions
Interactive Chat Interface: Natural language interaction with AI advisor
Quick Question Templates: Pre-defined questions for common queries
📊 Dashboard & Analytics
Comprehensive Dashboard: Overview of saved colleges, scholarships, and counselor connections
Progress Tracking: Visual representation of profile completion and career journey
Statistics Overview: Key metrics and progress indicators
Quick Actions: Easy access to frequently used features
🛠️ Technology Stack Frontend
React 18: Modern React with hooks and functional components
React Router: Client-side routing for single-page application
Tailwind CSS: Utility-first CSS framework for responsive design
Lucide React: Beautiful and consistent icon library
Vite: Fast build tool and development server
Authentication
Clerk: Complete authentication solution with user management
Protected Routes: Secure routing with authentication guards
User Metadata: Extended user profile data storage
State Management
React Context API: Global state management for user data and application state
Local Storage: Persistent storage for user preferences
Development Tools
ESLint: Code linting and quality assurance
Prettier: Code formatting
Git: Version control
🚀 Getting Started Prerequisites
Node.js (v16 or higher)
npm or yarn package manager
Git
🎨 Key Components Enhanced Profile Management
Tabbed Interface: Organized profile sections (Personal, Academic, Career, Additional)
Real-time Validation: Form validation with visual feedback
Progress Tracking: Visual completion percentage with motivational messages
Clerk Integration: Seamless data sync with Clerk user management
Modern UI/UX Design
Gradient Backgrounds: Beautiful gradient designs throughout the application
Smooth Animations: CSS animations and transitions for better user experience
Responsive Design: Mobile-first approach with responsive layouts
Interactive Elements: Hover effects, loading states, and micro-interactions
Advanced Form Features
Input Field Components: Reusable form components with validation
Error Handling: Comprehensive error states with visual indicators
Loading States: Loading spinners and disabled states during form submission
Success Feedback: Success notifications with auto-redirect
🔧 Configuration Clerk Authentication Setup
Create a Clerk account at clerk.com
Create a new application
Copy the publishable key to your .env file
Configure sign-in/sign-up flows as needed
Customization
Colors: Modify tailwind.config.js for custom color schemes
Data: Update files in /src/data/ for colleges, scholarships, and counselors
Styling: Customize components in /src/components/ for UI changes
📱 Features in Detail Profile Management System
Personal Information: Name, email, phone, date of birth, address
Academic Records: Complete 10th and 12th class details with board and percentage
Higher Education: Current education status, college, course, and academic performance
Career Planning: Interests, target exams, preferred locations, and skills
Additional Information: Achievements, extracurricular activities, and certifications
Smart Dashboard
Profile Completion: Real-time calculation and visual progress tracking
Quick Stats: Saved colleges, connected counselors, quiz progress, and scholarships
Recent Activity: Latest interactions and saved items
Action Items: Quick access to incomplete profile sections
College Discovery Platform
Advanced Filtering: Filter by location, course, fees, and ratings
Detailed Information: Comprehensive college profiles with images and details
Save Functionality: Bookmark colleges for later comparison
Application Tracking: Monitor application status and deadlines
Scholarship Management
Comprehensive Database: Wide range of scholarship opportunities
Eligibility Matching: Smart matching based on user profile
Application Deadlines: Track important dates and deadlines
Status Monitoring: Keep track of application progress
🙏 Acknowledgments
Smart India Hackathon: For providing the platform and opportunity
Clerk: For robust authentication services
Tailwind CSS: For the utility-first CSS framework
Lucide: For beautiful and consistent icons
React Community: For the amazing ecosystem and tools
🚀 Deployment
The application can be deployed on various platforms:
Vercel: Recommended for React applications
Netlify: Easy deployment with continuous integration
GitHub Pages: Free hosting for static sites
Heroku: Full-stack deployment platform
❤️ Built With
Built with ❤️ for Smart India Hackathon 2025 Developed with ❤️ by Omkar Shewale 🚀 Empowering students with smart, AI-powered career decisions!
⭐ Don't forget to give this project a star on GitHub if you find it useful! ⭐