AI Career Assistant Agent

• 

  AI Career Assistant: Upload resumes, get job matches, skill gap analysis, and personalized learning roadmaps using AI.

Inspiration

The AI Career Assistant Agent was inspired by the growing need for personalized, AI‑driven career guidance in a competitive job market. Many students and early‑career professionals struggle with unclear roadmaps, mismatched job choices, and vague skill‑gap feedback. We wanted to build a single, interactive UI that combines resume analysis, job matching, skill‑gap detection, and learning roadmap generation, powered by a Groq‑integrated chatbot.

What it does

The AI Career Assistant Agent lets users: Upload their resume (PDF/text) and see a mock parsing result. View demo scores for Job Matches, Skill Gap, and Learning Roadmap with animated progress bars. Click on each section to see targeted suggestions (jobs, skills, and 4‑week study plan). Interact with an AI career chatbot that helps with: Roadmap suggestions (e.g., “4‑week backend developer plan”). Job and skill‑gap guidance. Study tips and basic career‑planning advice. Beginner‑friendly trading / investing pointers (for holistic financial‑planning context). The UI is dark‑mode‑only, modern, responsive, and built with Next.js and Tailwind.

How we built it

Frontend: Next.js 16 + App Router. React Client Components with use client, useState, useEffect. Tailwind CSS for responsive, dark‑mode styling. A floating chatbot panel that talks to the backend. Backend (API): Next.js API Route: frontend/app/api/chat/route.ts. Groq SDK for AI chat completions (Llama‑3 model). Environment‑based API key management via .env.local. Integration:Resume‑analysis and roadmap logic is demo‑only UI (no live parsing). Job‑match, skill‑gap, and roadmap values are animated mock scores. Chatbot dynamically calls Groq to generate real answers about careers, jobs, study plans, and trading basics.

Challenges we ran into

TypeScript / React hydration errors when mixing html / body modifications and Tailwind classes. Groq SDK setup: Installing groq-sdk, properly declaring GROQ_API_KEY in .env.local, and restarting the dev server. Network‑error handling when the API route errors or returns HTML instead of JSON. Making scores feel dynamic even though backend resume parsing isn’t yet live (so we used animation + fake data). Keeping the UI clean and mobile‑friendly while adding a chatbot overlay that doesn’t clutter the page.

Accomplishments that we're proud of

Built a complete, production‑style UI including header, resume upload, feature cards, and a floating chatbot. Integrated Groq LLM inside a Next.js App Router without ejecting or using external wrappers. Created a dark‑mode‑only experience with smooth transitions, hover effects, and responsive layout. Made the app visually demo‑ready for presentations, even though the backend resumes are mocked. Designed a cohesive brand around “AI Career Assistant Agent” with a clear title, tagline, and color scheme.

What we learned

How to structure a modern Next.js 16 App Router project with use client, API routes, and environment variables. How to consume Groq / LLM APIs securely from the backend and expose them safely to the frontend. How to handle HTTP errors and non‑JSON responses gracefully in React. How to think about career‑assistant UX: guiding users from resume → jobs → skill gaps → roadmap → chatbot. How environment‑based configuration (dotenv) works in Next.js and why a restart is needed after .env changes.

What's next for AI Career Assistant Agent

Live resume parsing with backend (FastAPI / Flask) using parsers like PyPDF2, pdfplumber, or pdf2text. Real job‑matching engine connected to job boards / APIs (LinkedIn, Indeed, etc.) or a mock job database. Skill‑gap detection backed by real job‑description comparison (NLP / vector similarity). Exportable roadmap (PDF/Markdown) and calendar‑integration (Google Calendar / Notion). Multi‑user accounts, history, and saved roadmaps. Streaming chat responses (word‑by‑word typing) using Groq streaming or Vercel AI SDK.

Built With

• and
• built-with:-next.js-16
• groq
• groq-sdk
• llm
• react
• tailwind-css
• typescript