Upgrade: week-by-week roadmap, salary impact, portfolio projects, quick wins

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
-.env
 dist/
+.env
 .DS_Store

backend/services/ai.js

@@ -8,7 +8,15 @@ async function callAI(prompt) {
     const res = await fetch('https://api.groq.com/openai/v1/chat/completions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${GROQ_API_KEY}` },
-      body: JSON.stringify({ model: GROQ_MODEL, messages: [{ role: 'user', content: prompt }], temperature: 0.7 }),
+      body: JSON.stringify({
+        model: GROQ_MODEL,
+        messages: [
+          { role: 'system', content: 'You are a world-class career advisor, skill gap analyst, and technical recruiter with 20 years of experience. You provide extremely detailed, actionable analysis. Always return valid JSON only.' },
+          { role: 'user', content: prompt }
+        ],
+        temperature: 0.7,
+        max_tokens: 4096
+      }),
     });
     if (res.ok) { const data = await res.json(); return data.choices[0].message.content; }
     console.warn('Groq failed, falling back to Ollama...');
@@ -24,32 +32,126 @@ async function callAI(prompt) {
 
 function parseJSON(text) {
   try { return JSON.parse(text.trim()); }
-  catch { const m = text.match(/\{[\s\S]*\}/); if (m) return JSON.parse(m[0]); throw new Error('Failed to parse AI response'); }
+  catch {
+    const m = text.match(/\{[\s\S]*\}/);
+    if (m) return JSON.parse(m[0]);
+    throw new Error('Failed to parse AI response');
+  }
 }
 
 async function analyzeGap(jobPosting, userSkills) {
-  const text = await callAI(`You are a career development expert and skill gap analyst.
+  const text = await callAI(`You are a world-class career development expert, technical recruiter, and skill gap analyst.
 
-JOB POSTING:
+=== JOB POSTING ===
 ${jobPosting}
 
-CANDIDATE'S CURRENT SKILLS/RESUME:
+=== CANDIDATE CURRENT SKILLS / RESUME ===
 ${userSkills}
 
-Analyze the gap. Return ONLY valid JSON:
+Perform an exhaustive skill gap analysis. Return ONLY valid JSON (no markdown, no code fences) with this EXACT structure:
+
 {
   "jobTitle": "<extracted job title>",
-  "company": "<extracted company or 'Not specified'>",
-  "matchScore": <1-100>,
-  "matchedSkills": [{"skill":"<name>","level":"<strong|moderate|basic>","note":"<note>"}],
-  "missingSkills": [{"skill":"<name>","importance":"<critical|important|nice-to-have>","difficulty":"<easy|medium|hard>","timeToLearn":"<e.g. 2 weeks>"}],
-  "learningPath": [{"phase":1,"title":"<title>","duration":"<duration>","skills":["<skill>"],"resources":[{"name":"<name>","type":"<course|book|tutorial|project>","free":true}]}],
-  "quickWins": ["<action>"],
-  "resumeTips": ["<tip>"],
-  "verdict": "<Ready to Apply|Almost Ready|Need More Preparation|Significant Gap>"
+  "company": "<extracted company or Not specified>",
+  "matchScore": 75,
+  "verdict": "<Ready to Apply|Almost Ready|Need More Preparation|Significant Gap>",
+
+  "matchedSkills": [
+    {
+      "skill": "<skill name>",
+      "level": "<strong|moderate|basic>",
+      "currentProficiency": "<advanced|intermediate|beginner>",
+      "targetProficiency": "<advanced|intermediate|beginner>",
+      "note": "<how this skill relates to the job>"
+    }
+  ],
+
+  "missingSkills": [
+    {
+      "skill": "<skill name>",
+      "importance": "<critical|important|nice-to-have>",
+      "priorityScore": 8,
+      "difficulty": "<easy|medium|hard>",
+      "timeToLearn": "<e.g. 2 weeks>",
+      "currentProficiency": "none",
+      "targetProficiency": "<advanced|intermediate|beginner>",
+      "salaryImpact": "<estimated annual salary increase in USD if this skill is acquired, e.g. +5000-10000>",
+      "industryDemand": "<very high|high|moderate|low>",
+      "demandTrend": "<rising|stable|declining>",
+      "portfolioProject": "<a specific project idea to demonstrate this skill>"
+    }
+  ],
+
+  "salaryAnalysis": {
+    "estimatedRangeWithCurrentSkills": "<e.g. 80000-95000>",
+    "estimatedRangeWithAllSkills": "<e.g. 110000-130000>",
+    "potentialIncrease": "<e.g. +25000-35000>",
+    "topPayingSkills": ["<skill that adds most salary value>", "<next>", "<next>"]
+  },
+
+  "candidateComparison": {
+    "strengthsVsTypical": ["<what makes this candidate stand out>"],
+    "weaknessesVsTypical": ["<where this candidate falls behind typical applicants>"],
+    "competitiveEdge": "<brief summary of how candidate compares to top applicants for this role>"
+  },
+
+  "quickWins": [
+    {
+      "action": "<specific action to take>",
+      "timeRequired": "<e.g. 2 hours, 1 day>",
+      "impact": "<high|medium|low>"
+    }
+  ],
+
+  "learningRoadmap": [
+    {
+      "week": "<e.g. Week 1-2>",
+      "phase": 1,
+      "title": "<phase title>",
+      "focusSkills": ["<skill>"],
+      "dailyHours": 2,
+      "milestones": ["<what you should be able to do by end of this phase>"],
+      "resources": [
+        {
+          "name": "<specific course/tutorial/book name>",
+          "url": "<actual URL if possible, otherwise empty string>",
+          "type": "<course|tutorial|book|project|video|documentation>",
+          "platform": "<e.g. freeCodeCamp, Coursera, YouTube, MDN, etc.>",
+          "free": true,
+          "estimatedHours": 10
+        }
+      ]
+    }
+  ],
+
+  "portfolioProjects": [
+    {
+      "title": "<project name>",
+      "description": "<what to build>",
+      "skillsDemonstrated": ["<skill>"],
+      "difficulty": "<beginner|intermediate|advanced>",
+      "estimatedTime": "<e.g. 1 week>",
+      "techStack": ["<technology>"]
+    }
+  ],
+
+  "resumeTips": ["<actionable tip to improve resume for this specific role>"],
+
+  "interviewPrep": [
+    "<likely interview question or topic for this role>"
+  ]
 }
 
-Return ONLY JSON, no markdown.`);
+IMPORTANT INSTRUCTIONS:
+- Be extremely specific with resource recommendations - use real course names, real platforms
+- For salary figures, use realistic market data for this role
+- Priority scores should reflect how critical each skill is for getting hired
+- Quick wins should be things achievable in under a week
+- The learning roadmap should be week-by-week for 4-8 weeks
+- Portfolio projects should be impressive enough to discuss in interviews
+- Compare against what a strong candidate for this specific role looks like
+- Return ONLY the JSON object, no other text`);
+
   return parseJSON(text);
 }
 

frontend/src/components/Results.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from "react";
 
 function scoreClass(score) {
   if (score >= 70) return 'good';
@@ -21,9 +21,9 @@ export default function Results({ data, onReset }) {
       {/* Matched Skills */}
       <div className="card">
         <h3>Skills You Have</h3>
-        {a.matchedSkills.map((s, i) => (
+        {(a.matchedSkills||[]).map((s, i) => (
           <span key={i} className={`skill-tag ${s.level}`}>
-            {s.skill}
+            {s.skill}{s.currentProficiency?" ("+s.currentProficiency+")":""}
           </span>
         ))}
       </div>
@@ -31,11 +31,13 @@ export default function Results({ data, onReset }) {
       {/* Missing Skills */}
       <div className="card">
         <h3>Skills to Develop</h3>
-        {a.missingSkills.map((s, i) => (
+        {(a.missingSkills||[]).map((s, i) => (
           <div key={i} className="missing-skill">
             <div>
-              <div className="name">{s.skill}</div>
-              <div className="meta">{s.difficulty} to learn &middot; ~{s.timeToLearn}</div>
+              <div className="name">{s.skill} {s.priorityScore && <span className="priority-score">P{s.priorityScore}/10</span>}</div>
+              <div className="meta">{s.difficulty} to learn &middot; ~{s.timeToLearn}{s.industryDemand && <span className="demand-tag"> &middot; {s.industryDemand} demand{s.demandTrend==="rising"?" ↑":s.demandTrend==="declining"?" ↓":""}</span>}</div>
+              {s.salaryImpact && <div className="salary-inline">Salary impact: {s.salaryImpact}</div>}
+              {s.portfolioProject && <div className="portfolio-inline">Project: {s.portfolioProject}</div>}
             </div>
             <span className={`importance-badge ${s.importance}`}>{s.importance}</span>
           </div>
@@ -45,14 +47,14 @@ export default function Results({ data, onReset }) {
       {/* Learning Path */}
       <div className="card">
         <h3>Learning Path</h3>
-        {a.learningPath.map((phase, i) => (
+        {(a.learningRoadmap||a.learningPath||[]).map((phase, i) => (
           <div key={i} className="phase-card">
             <h4>Phase {phase.phase}: {phase.title}</h4>
-            <div className="duration">{phase.duration}</div>
-            <div className="skills-list">Skills: {phase.skills.join(', ')}</div>
-            {phase.resources.map((r, j) => (
+            <div className="duration">{phase.week||phase.duration}</div>
+            <div className="skills-list">Skills: {(phase.focusSkills||phase.skills||[]).join(', ')}</div>
+            {(phase.resources||[]).map((r, j) => (
               <div key={j} className="resource">
-                <span className="type">[{r.type}]</span> {r.name} {r.free && <span className="free-badge">FREE</span>}
+                <span className="type">[{r.type}]</span> {r.url ? <a href={r.url} target="_blank" rel="noreferrer" style={{color:"var(--accent)"}}>{r.name}</a> : r.name}{r.platform ? " ("+r.platform+")" : ""} {r.free && <span className="free-badge">FREE</span>}
               </div>
             ))}
           </div>
@@ -62,15 +64,61 @@ export default function Results({ data, onReset }) {
       {/* Quick Wins */}
       <div className="card list-card wins">
         <h3>Quick Wins (Do This Week)</h3>
-        <ul>{a.quickWins.map((w, i) => <li key={i}>{w}</li>)}</ul>
+        <ul>{(a.quickWins||[]).map((w, i) => { const item = typeof w==="string"?{action:w}:w; return <li key={i}>{item.action}{item.timeRequired?" ("+item.timeRequired+")":""}{item.impact?" - "+item.impact+" impact":""}</li>; })}</ul>
       </div>
 
       {/* Resume Tips */}
       <div className="card list-card tips">
         <h3>Resume Tailoring Tips</h3>
-        <ul>{a.resumeTips.map((t, i) => <li key={i}>{t}</li>)}</ul>
+        <ul>{(a.resumeTips||[]).map((t, i) => <li key={i}>{t}</li>)}</ul>
       </div>
 
+      {/* Candidate Comparison */}
+      {a.candidateComparison && (
+        <div className="card comparison-card">
+          <h3>How You Compare</h3>
+          <p className="comp-edge">{a.candidateComparison.competitiveEdge}</p>
+          <div className="comp-grid">
+            <div className="comp-col good">
+              <h4>Your Strengths</h4>
+              <ul>{(a.candidateComparison.strengthsVsTypical||[]).map((s,i)=><li key={i}>{s}</li>)}</ul>
+            </div>
+            <div className="comp-col warn">
+              <h4>Areas to Improve</h4>
+              <ul>{(a.candidateComparison.weaknessesVsTypical||[]).map((w,i)=><li key={i}>{w}</li>)}</ul>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Salary Analysis */}
+      {a.salaryAnalysis && (
+        <div className="card salary-card">
+          <h3>Salary Impact Analysis</h3>
+          <div className="salary-grid">
+            <div className="salary-box"><div className="sal-label">Current Skills</div><div className="sal-value">{a.salaryAnalysis.estimatedRangeWithCurrentSkills}</div></div>
+            <div className="salary-arrow">{"→"}</div>
+            <div className="salary-box target"><div className="sal-label">With All Skills</div><div className="sal-value">{a.salaryAnalysis.estimatedRangeWithAllSkills}</div></div>
+          </div>
+          <div className="sal-increase">Potential increase: <strong>{a.salaryAnalysis.potentialIncrease}</strong></div>
+          {a.salaryAnalysis.topPayingSkills && <div className="top-skills"><strong>Highest-value skills:</strong> {a.salaryAnalysis.topPayingSkills.join(", ")}</div>}
+        </div>
+      )}
+
+      {a.portfolioProjects&&a.portfolioProjects.length>0&&(
+        <div className={"card"}>
+          <h3>Portfolio Projects</h3>
+          {a.portfolioProjects.map((p,i)=><div key={i} className={"project-item"}><strong>{p.title}</strong><p>{p.description}</p><div>{p.estimatedTime} | {p.difficulty}</div></div>)}
+        </div>
+      )}
+
+      {a.interviewPrep&&a.interviewPrep.length>0&&(
+        <div className={"card list-card tips"}>
+          <h3>Interview Preparation</h3>
+          <ul>{a.interviewPrep.map((q,i)=><li key={i}>{q}</li>)}</ul>
+        </div>
+      )}
+
       <button className="btn-secondary" onClick={onReset}>Analyze Another Job</button>
     </div>
   );

frontend/src/styles/global.css

@@ -183,3 +183,34 @@ body {
 @keyframes spin { to { transform: rotate(360deg); } }
 
 @media (max-width: 600px) { .header h1 { font-size: 1.6rem; } }
+
+
+.priority-score { font-size:0.75rem; background:rgba(88,166,255,0.15); color:var(--accent); padding:0.1rem 0.4rem; border-radius:8px; margin-left:0.5rem; }
+.demand-tag { color:var(--accent2); font-weight:500; }
+.salary-inline { font-size:0.8rem; color:var(--accent2); margin-top:0.3rem; }
+.portfolio-inline { font-size:0.8rem; color:var(--text-dim); margin-top:0.2rem; font-style:italic; }
+.salary-card { }
+.salary-grid { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin:1rem 0; flex-wrap:wrap; }
+.salary-box { background:var(--bg); padding:1.2rem 1.5rem; border-radius:10px; text-align:center; min-width:180px; }
+.salary-box.target { border:2px solid var(--accent2); }
+.sal-label { font-size:0.8rem; color:var(--text-dim); margin-bottom:0.3rem; }
+.sal-value { font-size:1.4rem; font-weight:700; color:var(--text); }
+.salary-arrow { font-size:2rem; color:var(--accent); }
+.sal-increase { text-align:center; margin-top:1rem; font-size:1.1rem; color:var(--accent2); }
+.top-skills { text-align:center; margin-top:0.8rem; color:var(--text-dim); font-size:0.9rem; }
+.comparison-card { }
+.comp-edge { color:var(--text-dim); font-size:0.95rem; margin-bottom:1rem; line-height:1.5; }
+.comp-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
+.comp-col { background:var(--bg); padding:1rem; border-radius:8px; }
+.comp-col h4 { margin-bottom:0.5rem; font-size:0.9rem; }
+.comp-col.good { border-left:3px solid var(--accent2); }
+.comp-col.good h4 { color:var(--accent2); }
+.comp-col.warn { border-left:3px solid var(--warning); }
+.comp-col.warn h4 { color:var(--warning); }
+.comp-col ul { list-style:none; padding:0; }
+.comp-col li { font-size:0.85rem; color:var(--text-dim); padding:0.3rem 0; }
+.project-item { background:var(--bg); padding:1rem; border-radius:8px; margin-bottom:0.8rem; }
+.project-item strong { color:var(--accent); }
+.project-item p { color:var(--text-dim); font-size:0.9rem; margin:0.4rem 0; }
+.proj-meta { font-size:0.8rem; color:var(--text-dim); }
+@media(max-width:600px){.comp-grid{grid-template-columns:1fr;}.salary-grid{flex-direction:column;}}