An AI-powered career discovery and exploration platform built with Next.js
Discover your ideal career path with AI-driven insights, interactive onboarding, and detailed career exploration.
- 🎯 Smart Onboarding — A 10-question interest questionnaire that adapts to your strengths
- 🤖 AI Chatbot — Powered by Google Gemini for real-time career guidance
- 🧭 Career Discovery — Swipeable career cards with match scores based on your interests
- 📖 Deep Career Exploration — Detailed career pages with roadmaps, day-in-the-life sections, and YouTube embeds
- 🎓 Scholarships — Curated scholarship opportunities relevant to your career goals
- 📊 Personal Dashboard — Track your career progress, saved paths, and recommendations
- 🔔 Notifications — Stay updated on opportunities and milestones
- 👤 Profile Management — Manage your personal preferences and saved careers
- 💎 Glassmorphic Material 3 UI — Stunning frosted glass design with expressive animations
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router + Turbopack) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Animations | Motion (Framer Motion) |
| Icons | Lucide React |
| AI | Google Generative AI |
| Runtime | Bun |
| Charts | Recharts |
careerland/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── page.tsx # Root redirect
│ │ ├── layout.tsx # Global layout with AuthProvider
│ │ ├── login/ # Login page
│ │ ├── signup/ # Signup page
│ │ ├── onboarding/ # 10-question interest quiz
│ │ ├── know-you-better/ # Choose Questionnaire / Counsellor / Fill Data
│ │ ├── questionnaire/ # Detailed career interest questionnaire
│ │ ├── career-suggestions/ # Swipeable career card discovery
│ │ ├── career/[id]/ # Dynamic career detail page
│ │ ├── careers/ # All careers listing
│ │ ├── dashboard/ # Main dashboard
│ │ ├── recommendations/ # AI career recommendations
│ │ ├── scholarships/ # Scholarship finder
│ │ ├── counsellor/ # Talk to a career counsellor
│ │ ├── fill-data/ # Manual data entry
│ │ ├── interests-summary/ # Summary of user interests
│ │ ├── notifications/ # Notification center
│ │ └── profile/ # User profile page
│ │
│ ├── components/ # Reusable components
│ │ ├── Layout.tsx # Main app layout with glassmorphic sidebar
│ │ ├── Chatbot.tsx # AI Chatbot powered by Gemini
│ │ ├── ProtectedRoute.tsx # Auth guard wrapper
│ │ ├── context/
│ │ │ └── AuthContext.tsx # Global auth state management
│ │ ├── lib/
│ │ │ └── utils.ts # Utility functions (cn, etc.)
│ │ └── ui/ # Base UI component library
│ │ ├── Button.tsx # Button variants
│ │ ├── Card.tsx # Glassmorphic card component
│ │ └── Input.tsx # Form input component
│ │
│ └── assets/
│ └── index.css # Global styles, CSS variables, glassmorphic theme
│
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies
- Bun installed on your machine
- Node.js 18+ (optional, Bun handles everything)
# Clone the repository
git clone https://github.com/your-username/careerland.git
cd careerland
# Install dependencies with Bun
bun installbun run devOpen http://localhost:3000 in your browser.
bun run build
bun run startCareerLand uses a Glassmorphic Material 3 Expressive design language:
- Glass Cards —
bg-white/45 backdrop-blur-2xl border border-white/60 - Blur Gradients — Soft indigo/blue radial gradients as ambient lighting blobs
- Base Background —
linear-gradient(135deg, #eef2ff, #f8faff, #e0f2fe) - Primary Gradient —
linear-gradient(135deg, #3b82f6, #6366f1)(Blue → Indigo) - Typography — Outfit (body) + Space Grotesk (display headings)
- Border Radius — Rounded-2xl to rounded-3xl for soft expressive feel
- Animations — Framer Motion for page transitions, hover states, and card swipes
.glass /* bg-white/45 backdrop-blur-xl border-white/60 */
.glass-strong /* bg-white/65 backdrop-blur-2xl border-white/75 */
.text-gradient /* Blue → Indigo gradient text */
.blob-blue /* Indigo blur blob */
.blob-sky /* Sky blue blur blob */
.blob-violet /* Violet blur blob */| Route | Description |
|---|---|
/login |
Glassmorphic login with logo |
/signup |
Create account with animated glass card |
/onboarding |
10-question swipeable card quiz |
/know-you-better |
Choose your discovery path |
/questionnaire |
Detailed 30-question interest rating |
/career-suggestions |
Tinder-style career swipe cards |
/career/[id] |
Full career detail with roadmap, YouTube embed |
/dashboard |
Stats, recommendations, daily tips |
/careers |
Browse all career paths |
/scholarships |
Scholarship opportunities |
/recommendations |
AI-personalized career list |
/counsellor |
Chat with AI career counsellor |
/profile |
User profile and settings |
/notifications |
Notification center |
CareerLand uses a client-side auth context (AuthContext) with localStorage persistence. In production, this should be replaced with a proper backend auth system (e.g., Firebase Auth, Supabase, or NextAuth.js).
The Chatbot and Recommendations features are powered by Google Generative AI (Gemini). To enable these features:
- Get an API key from Google AI Studio
- Add it to your
.env.local:
NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_hereContributions are welcome! Please follow these steps:
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Made with ❤️ by the CareerLand Team
Helping students discover their career potential, one step at a time.