Issue 268 #273

Ayaanshaikh12243 · 2026-01-26T20:52:35Z

#269

vercel · 2026-01-26T20:52:39Z

@Ayaanshaikh12243 is attempting to deploy a commit to the Darshan Rajput's projects Team on Vercel.

A member of the Team first needs to authorize it.

Ayaanshaikh12243 · 2026-01-26T20:52:52Z

@Darshan3690 please check sir done this pr as mentioned

Copilot

Pull request overview

This PR implements multiple new resource and learning pages for a career development platform, adding comprehensive sections for web development, AI/ML, coding practice, and career guidance.

Changes:

Added four new resource pages: Web Development Resources, AI/ML Learning Resources, Practice Hub (coding problems), and Career Guidance Hub
Updated navigation bar to include links to the new Practice Hub and Career Guidance pages

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
app/web-dev/page.tsx	New page featuring curated web development resources with filtering by level, type, and search functionality
app/practice-hub/page.tsx	New page with coding practice problems, daily challenges, statistics tracking, and multi-platform problem links
app/career-guidance/page.tsx	New page providing career path information, salary data, interview tips, and company hiring trends
app/ai-ml/page.tsx	New page with AI/ML learning resources including courses, tools, datasets, and documentation
app/components/Navbar.tsx	Added navigation links for "Practice Hub" and "Career Guidance" to the main navigation menu

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-26T20:55:46Z

app/career-guidance/page.tsx

+];
+
+export default function CareerGuidancePage() {
+  const { user } = useUser();


The variable selectedPath is declared but the useUser hook result (variable user) is never used in this component. Consider removing the unused import and hook call to keep the code clean.

Copilot · 2026-01-26T20:55:47Z

app/practice-hub/page.tsx

+};
+
+export default function PracticeHubPage() {
+  const { user } = useUser();


The useUser hook is imported and called but the user variable is never used in this component. Consider removing the unused import and hook call to keep the code clean.

Copilot · 2026-01-26T20:55:47Z

app/practice-hub/page.tsx

+                  {["all", "easy", "medium", "hard"].map((level) => (
+                    <button
+                      key={level}
+                      onClick={() => setSelectedDifficulty(level as "all" | "easy" | "medium" | "hard")}
+                      className={`px-4 py-2 rounded-lg font-semibold transition-all ${
+                        selectedDifficulty === level
+                          ? `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`
+                          : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200"
+                      }`}
+                    >
+                      {level.charAt(0).toUpperCase() + level.slice(1)}
+                    </button>
+                  ))}


When accessing difficultyColors with a dynamic key on line 403, the code doesn't handle the "all" case which could result in undefined access. While the filter buttons ensure only valid difficulty levels are selected, the type checking shows this could be "all" | "easy" | "medium" | "hard". Consider adding a type guard or default case to handle the "all" scenario safely.

Suggested change

{["all", "easy", "medium", "hard"].map((level) => (

<button

key={level}

onClick={() => setSelectedDifficulty(level as "all" | "easy" | "medium" | "hard")}

className={`px-4 py-2 rounded-lg font-semibold transition-all ${

selectedDifficulty === level

? `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`

: "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200"

}`}

>

{level.charAt(0).toUpperCase() + level.slice(1)}

</button>

))}

{["all", "easy", "medium", "hard"].map((level) => {

const isAllLevel = level === "all";

return (

<button

key={level}

onClick={() => setSelectedDifficulty(level as "all" | "easy" | "medium" | "hard")}

className={`px-4 py-2 rounded-lg font-semibold transition-all ${

selectedDifficulty === level

? `${

isAllLevel

? "bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white"

: difficultyColors[level as keyof typeof difficultyColors]

} scale-105`

: "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200"

}`}

>

{level.charAt(0).toUpperCase() + level.slice(1)}

</button>

);

})}

Copilot · 2026-01-26T20:55:47Z

app/career-guidance/page.tsx

+  const { user } = useUser();
+  const [selectedCareerPath, setSelectedCareerPath] = useState<string | null>(null);
+  const [selectedTipCategory, setSelectedTipCategory] = useState<string>("all");
+  const [expandedCompany, setExpandedCompany] = useState<string | null>(null);


The state variable expandedCompany is declared but never used in the component. This suggests incomplete functionality or dead code. Consider either implementing the expansion feature for company details or removing the unused state.

Suggested change

const [expandedCompany, setExpandedCompany] = useState<string | null>(null);

Copilot · 2026-01-26T20:55:48Z

app/practice-hub/page.tsx

+  },
+];
+
+const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra"];


The topic "Binary Search" is used in the problem data (line 106) but is not included in the allTopics array defined on line 254. This means users cannot filter by "Binary Search" in the topic dropdown, even though it's tagged on a problem. Consider adding "Binary Search" to the allTopics array for consistency.

Suggested change

const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra"];

const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra", "Binary Search"];

Copilot · 2026-01-26T20:55:48Z

app/practice-hub/page.tsx

+  },
+];
+
+const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra"];


The topic "Math" is used in the problem data (line 134) but is not included in the allTopics array. This means users cannot filter by "Math" in the topic dropdown, even though it's tagged on a problem. Consider adding "Math" to the allTopics array for consistency.

Suggested change

const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra"];

const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Math", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra"];

Copilot · 2026-01-26T20:55:48Z

app/practice-hub/page.tsx

+"use client";
+
+import React, { useState, useMemo } from "react";
+import Link from "next/link";


Unused import Link.

Suggested change

import Link from "next/link";

vercel · 2026-01-27T02:23:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
the-dev-pocket-961a	Error		Jan 27, 2026 2:24am

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 12 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-27T02:27:47Z

app/practice-hub/page.tsx

+                      onClick={() => setSelectedDifficulty(level as "all" | "easy" | "medium" | "hard")}
+                      className={`px-4 py-2 rounded-lg font-semibold transition-all ${
+                        selectedDifficulty === level
+                          ? `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`


The difficultyColors object doesn't include an "all" key, but the code tries to access it when selectedDifficulty is "all" (line 403). This will cause a runtime error. Consider either adding "all" to difficultyColors or adding a conditional check to skip applying difficulty colors when level is "all".

Suggested change

? `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`

? level === "all"

? "bg-blue-500 text-white scale-105"

: `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`

Copilot · 2026-01-27T02:27:47Z

app/practice-hub/page.tsx

+  const stats = {
+    totalProblems: codingProblems.length,
+    completedProblems: codingProblems.filter((p) => p.completed).length,
+    totalAttempts: codingProblems.reduce((sum, p) => sum + (p.attempts || 0), 0),
+    currentStreak: 5,


The currentStreak is hardcoded to 5. This should be dynamically calculated or fetched from user data to provide accurate information. Hardcoded values like this make the statistics misleading for users.

Suggested change

const stats = {

totalProblems: codingProblems.length,

completedProblems: codingProblems.filter((p) => p.completed).length,

totalAttempts: codingProblems.reduce((sum, p) => sum + (p.attempts || 0), 0),

currentStreak: 5,

const currentStreak =

(user?.publicMetadata?.["currentStreak"] as number | undefined) ?? 0;

const stats = {

totalProblems: codingProblems.length,

completedProblems: codingProblems.filter((p) => p.completed).length,

totalAttempts: codingProblems.reduce((sum, p) => sum + (p.attempts || 0), 0),

currentStreak,

Copilot · 2026-01-27T02:27:47Z

app/career-guidance/page.tsx

+              <button
+                key={category}
+                onClick={() => setSelectedTipCategory(category)}
+                className={`px-6 py-2 rounded-full font-semibold transition-all ${
+                  selectedTipCategory === category
+                    ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg"
+                    : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-blue-500"
+                }`}
+              >
+                {category === "all" ? "All Tips" : category.replace("-", " ").charAt(0).toUpperCase() + category.replace("-", " ").slice(1)}
+              </button>


The filter buttons lack proper ARIA attributes for accessibility. Consider adding aria-pressed={selectedTipCategory === category} to indicate the button's current state to screen reader users.

Copilot · 2026-01-27T02:27:48Z

app/practice-hub/page.tsx

+export default function PracticeHubPage() {
+  const { user } = useUser();
+  const [selectedDifficulty, setSelectedDifficulty] = useState<"all" | "easy" | "medium" | "hard">("all");
+  const [selectedTopic, setSelectedTopic] = useState<string>("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [completedOnly, setCompletedOnly] = useState(false);
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+
+  // Filter problems
+  const filteredProblems = useMemo(() => {
+    return codingProblems.filter((problem) => {
+      const matchesDifficulty = selectedDifficulty === "all" || problem.difficulty === selectedDifficulty;
+      const matchesTopic = selectedTopic === "all" || problem.topics.includes(selectedTopic);
+      const matchesSearch =
+        problem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        problem.description.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCompleted = !completedOnly || problem.completed;
+
+      return matchesDifficulty && matchesTopic && matchesSearch && matchesCompleted;
+    });
+  }, [selectedDifficulty, selectedTopic, searchQuery, completedOnly]);
+
+  // Calculate stats
+  const stats = {
+    totalProblems: codingProblems.length,
+    completedProblems: codingProblems.filter((p) => p.completed).length,
+    totalAttempts: codingProblems.reduce((sum, p) => sum + (p.attempts || 0), 0),
+    currentStreak: 5,
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-purple-900">
+      {/* Hero Section */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-12">
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="text-center mb-16">
+          <h1 className="text-5xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 mb-4">
+            Coding Practice Hub
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Master DSA, competitive programming, and interview questions with daily challenges, curated problems, and progress tracking.
+          </p>
+        </motion.div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-12">
+          {[
+            { label: "Problems Solved", value: stats.completedProblems, total: stats.totalProblems, icon: "✓" },
+            { label: "Total Attempts", value: stats.totalAttempts, icon: "🎯" },
+            { label: "Current Streak", value: `${stats.currentStreak} days`, icon: "🔥" },
+            { label: "Progress", value: `${Math.round((stats.completedProblems / stats.totalProblems) * 100)}%`, icon: "📈" },
+          ].map((stat, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: index * 0.1 }}
+              className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow"
+            >
+              <div className="text-3xl mb-2">{stat.icon}</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">{stat.value}</div>
+              {stat.total && <div className="text-xs text-gray-500 dark:text-gray-400">of {stat.total}</div>}
+              <div className="text-sm text-gray-600 dark:text-gray-400 mt-2">{stat.label}</div>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Daily Challenge Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="bg-gradient-to-r from-orange-400 via-red-400 to-pink-400 rounded-2xl p-8 mb-12 text-white shadow-xl"
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-3xl">⭐</span>
+            <h2 className="text-2xl font-bold">Today&apos;s Coding Challenge</h2>
+          </div>
+          <div className="bg-white/10 backdrop-blur rounded-xl p-6">
+            <h3 className="text-xl font-semibold mb-2">{dailyChallenges[0].problem.title}</h3>
+            <p className="text-white/90 mb-4">{dailyChallenges[0].problem.description}</p>
+            <div className="flex flex-wrap gap-3 items-center">
+              <span className={`px-3 py-1 rounded-full text-sm font-medium bg-white/20`}>Difficulty: {dailyChallenges[0].problem.difficulty}</span>
+              <span className={`px-3 py-1 rounded-full text-sm font-medium bg-white/20`}>Time Limit: {dailyChallenges[0].timeLimit} min</span>
+              <div className="flex gap-2 ml-auto">
+                {dailyChallenges[0].problem.platforms.map((platform) => (
+                  <a
+                    key={platform.name}
+                    href={platform.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="px-4 py-2 bg-white text-red-500 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
+                  >
+                    Solve on {platform.name}
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Filters Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 mb-8"
+        >
+          <div className="flex flex-col gap-6">
+            {/* Search Bar */}
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Search problems by title or topic..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full px-6 py-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:outline-none transition"
+              />
+              <span className="absolute right-4 top-3 text-gray-400">🔍</span>
+            </div>
+
+            {/* Filter Controls */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {/* Difficulty Filter */}
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Difficulty Level</label>
+                <div className="flex flex-wrap gap-2">
+                  {["all", "easy", "medium", "hard"].map((level) => (
+                    <button
+                      key={level}
+                      onClick={() => setSelectedDifficulty(level as "all" | "easy" | "medium" | "hard")}
+                      className={`px-4 py-2 rounded-lg font-semibold transition-all ${
+                        selectedDifficulty === level
+                          ? `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`
+                          : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200"
+                      }`}
+                    >
+                      {level.charAt(0).toUpperCase() + level.slice(1)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Topic Filter */}
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Topic</label>
+                <select
+                  value={selectedTopic}
+                  onChange={(e) => setSelectedTopic(e.target.value)}
+                  className="w-full px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:outline-none"
+                >
+                  <option value="all">All Topics</option>
+                  {allTopics.map((topic) => (
+                    <option key={topic} value={topic}>
+                      {topic}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* View & Status Controls */}
+              <div className="flex flex-col gap-3">
+                <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">View Options</label>
+                <div className="flex gap-2 items-center">
+                  <button
+                    onClick={() => setViewMode(viewMode === "grid" ? "list" : "grid")}
+                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                  >
+                    {viewMode === "grid" ? "📋 List" : "🔲 Grid"}
+                  </button>
+                  <button
+                    onClick={() => setCompletedOnly(!completedOnly)}
+                    className={`px-4 py-2 rounded-lg font-semibold transition-all ${
+                      completedOnly ? "bg-green-500 text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
+                    }`}
+                  >
+                    {completedOnly ? "✓ Completed" : "All"}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Results Count */}
+            <div className="text-sm text-gray-600 dark:text-gray-400 pt-4 border-t border-gray-200 dark:border-gray-700">
+              Showing {filteredProblems.length} of {codingProblems.length} problems
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Problems Section */}
+        <div className="mb-12">
+          {filteredProblems.length > 0 ? (
+            <div className={viewMode === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" : "space-y-4"}>
+              {filteredProblems.map((problem, index) => (
+                <motion.div
+                  key={problem.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.05 }}
+                  className="group bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all hover:-translate-y-2 overflow-hidden"
+                >
+                  {/* Completion Status Indicator */}
+                  {problem.completed && (
+                    <div className="h-1 bg-gradient-to-r from-green-400 to-emerald-600"></div>
+                  )}
+
+                  <div className="p-6">
+                    {/* Title and Status */}
+                    <div className="flex items-start justify-between gap-4 mb-3">
+                      <h3 className="text-lg font-bold text-gray-900 dark:text-white group-hover:text-blue-600 transition">{problem.title}</h3>
+                      {problem.completed && <span className="text-2xl">✅</span>}
+                    </div>
+
+                    {/* Description */}
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{problem.description}</p>
+
+                    {/* Difficulty & Attempts */}
+                    <div className="flex items-center gap-2 mb-4">
+                      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${difficultyColors[problem.difficulty]}`}>
+                        {problem.difficulty.charAt(0).toUpperCase() + problem.difficulty.slice(1)}
+                      </span>
+                      {problem.attempts !== undefined && problem.attempts > 0 && (
+                        <span className="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+                          {problem.attempts} attempt{problem.attempts > 1 ? "s" : ""}
+                        </span>
+                      )}
+                    </div>
+
+                    {/* Topics */}
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {problem.topics.map((topic) => (
+                        <span
+                          key={topic}
+                          className="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs rounded-md"
+                        >
+                          {topic}
+                        </span>
+                      ))}
+                    </div>
+
+                    {/* Platforms */}
+                    <div className="flex flex-wrap gap-2 mb-6">
+                      {problem.platforms.map((platform) => (
+                        <span key={platform.name} className={`px-2 py-1 text-xs rounded-md font-semibold ${platformColors[platform.name]}`}>
+                          {platform.name}
+                        </span>
+                      ))}
+                    </div>
+
+                    {/* Action Buttons */}
+                    <div className="flex gap-2">
+                      {problem.platforms.map((platform) => (
+                        <a
+                          key={platform.name}
+                          href={platform.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex-1 px-3 py-2 bg-blue-500 text-white text-sm font-semibold rounded-lg hover:bg-blue-600 transition-colors text-center"
+                        >
+                          {platform.name}
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          ) : (
+            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-12 text-center">
+              <p className="text-xl text-gray-600 dark:text-gray-400">No problems found matching your filters.</p>
+              <button
+                onClick={() => {
+                  setSelectedDifficulty("all");
+                  setSelectedTopic("all");
+                  setSearchQuery("");
+                  setCompletedOnly(false);
+                }}
+                className="mt-6 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+              >
+                Reset Filters
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Platform Links Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 mb-12"
+        >
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Popular Practice Platforms</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[
+              { name: "LeetCode", url: "https://leetcode.com", description: "1900+ problems, contests, and subscriptions" },
+              { name: "HackerRank", url: "https://www.hackerrank.com", description: "Interview prep, competitive programming" },
+              { name: "CodeSignal", url: "https://codesignal.com", description: "Interview simulations and assessments" },
+              { name: "HackerEarth", url: "https://www.hackerearth.com", description: "Hackathons and coding challenges" },
+              { name: "AtCoder", url: "https://atcoder.jp", description: "Japanese competitive programming platform" },
+              { name: "Codeforces", url: "https://codeforces.com", description: "Competitive programming contests" },
+            ].map((platform) => (
+              <a
+                key={platform.name}
+                href={platform.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 rounded-xl hover:shadow-lg transition-all hover:-translate-y-1 border border-gray-200 dark:border-gray-600"
+              >
+                <div className="font-semibold text-gray-900 dark:text-white mb-1">{platform.name}</div>
+                <div className="text-sm text-gray-600 dark:text-gray-300">{platform.description}</div>
+              </a>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Tips Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+          className="bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 dark:from-indigo-900/30 dark:via-purple-900/30 dark:to-pink-900/30 rounded-2xl p-8"
+        >
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">💡 Pro Tips for Success</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {[
+              {
+                title: "Consistency is Key",
+                description: "Solve at least one problem daily to maintain your streak and build momentum.",
+              },
+              {
+                title: "Start with Easy Problems",
+                description: "Build confidence by mastering easy problems before moving to medium and hard.",
+              },
+              {
+                title: "Focus on One Topic",
+                description: "Master one data structure or algorithm at a time for better understanding.",
+              },
+              {
+                title: "Track Your Progress",
+                description: "Review completed problems weekly and analyze patterns in your mistakes.",
+              },
+              {
+                title: "Understand, Don't Memorize",
+                description: "Focus on understanding the approach rather than memorizing solutions.",
+              },
+              {
+                title: "Join Communities",
+                description: "Participate in contests and discussions to learn from other programmers.",
+              },
+            ].map((tip, index) => (
+              <div key={index} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md">
+                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">{tip.title}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{tip.description}</p>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}


The new Practice Hub page lacks test coverage. Since the repository has comprehensive tests for other pages (e.g., tests/dashboard/), consider adding tests to cover the filtering logic, state management, and user interactions.

Copilot · 2026-01-27T02:27:48Z

app/practice-hub/page.tsx

+                    <button
+                      key={level}
+                      onClick={() => setSelectedDifficulty(level as "all" | "easy" | "medium" | "hard")}
+                      className={`px-4 py-2 rounded-lg font-semibold transition-all ${
+                        selectedDifficulty === level
+                          ? `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`
+                          : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200"
+                      }`}
+                    >
+                      {level.charAt(0).toUpperCase() + level.slice(1)}
+                    </button>


The filter buttons lack proper ARIA attributes for accessibility. Consider adding aria-pressed={selectedDifficulty === level} to indicate the button's current state to screen reader users.

Copilot · 2026-01-27T02:27:48Z

app/practice-hub/page.tsx

+"use client";
+
+import React, { useState, useMemo } from "react";
+import Link from "next/link";


The 'Link' component is imported but never used in this file. Remove the unused import to keep the code clean.

Suggested change

import Link from "next/link";

Copilot · 2026-01-27T02:27:49Z

app/practice-hub/page.tsx

+              <input
+                type="text"
+                placeholder="Search problems by title or topic..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full px-6 py-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:outline-none transition"


The search input lacks an associated label element. For better accessibility, add a label with a htmlFor attribute, even if it's visually hidden using sr-only classes. This helps screen reader users understand the purpose of the input field.

Copilot · 2026-01-27T02:27:49Z

app/career-guidance/page.tsx

+              <thead>
+                <tr className="border-b-2 border-gray-200 dark:border-gray-700">
+                  <th className="text-left py-4 px-4 font-semibold text-gray-900 dark:text-white">Experience Level</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Frontend</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Backend</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">DevOps</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Full Stack</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Mobile</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Data Science</th>
+                </tr>
+              </thead>
+              <tbody>
+                {salaryChartData.map((row, idx) => (
+                  <tr key={idx} className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
+                    <td className="py-4 px-4 font-semibold text-gray-900 dark:text-white">{row.level}</td>


The table lacks proper accessibility attributes. Consider adding a caption element or aria-label to the table to describe its purpose, and scope attributes to th elements (scope="col" for column headers) to improve screen reader navigation.

Suggested change

<thead>

<tr className="border-b-2 border-gray-200 dark:border-gray-700">

<th className="text-left py-4 px-4 font-semibold text-gray-900 dark:text-white">Experience Level</th>

<th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Frontend</th>

<th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Backend</th>

<th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">DevOps</th>

<th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Full Stack</th>

<th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Mobile</th>

<th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Data Science</th>

</tr>

</thead>

<tbody>

{salaryChartData.map((row, idx) => (

<tr key={idx} className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">

<td className="py-4 px-4 font-semibold text-gray-900 dark:text-white">{row.level}</td>

<caption className="sr-only">

Estimated annual salary ranges in thousands of dollars by experience level and specialization.

</caption>

<thead>

<tr className="border-b-2 border-gray-200 dark:border-gray-700">

<th scope="col" className="text-left py-4 px-4 font-semibold text-gray-900 dark:text-white">Experience Level</th>

<th scope="col" className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Frontend</th>

<th scope="col" className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Backend</th>

<th scope="col" className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">DevOps</th>

<th scope="col" className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Full Stack</th>

<th scope="col" className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Mobile</th>

<th scope="col" className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Data Science</th>

</tr>

</thead>

<tbody>

{salaryChartData.map((row, idx) => (

<tr key={idx} className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">

<th scope="row" className="py-4 px-4 font-semibold text-gray-900 dark:text-white">{row.level}</th>

Copilot · 2026-01-27T02:27:49Z

app/career-guidance/page.tsx

+export default function CareerGuidancePage() {
+  const { user } = useUser();
+  const [selectedCareerPath, setSelectedCareerPath] = useState<string | null>(null);
+  const [selectedTipCategory, setSelectedTipCategory] = useState<string>("all");
+  const [expandedCompany, setExpandedCompany] = useState<string | null>(null);
+
+  const filteredTips = useMemo(() => {
+    return selectedTipCategory === "all" ? interviewTips : interviewTips.filter((tip) => tip.category === selectedTipCategory);
+  }, [selectedTipCategory]);
+
+  const selectedPath = careerPaths.find((path) => path.id === selectedCareerPath);
+
+  const demandColors = {
+    high: "bg-green-100 text-green-800",
+    medium: "bg-yellow-100 text-yellow-800",
+    low: "bg-red-100 text-red-800",
+  };
+
+  const hiringRateColors = {
+    actively: "bg-green-500",
+    moderately: "bg-yellow-500",
+    slowly: "bg-red-500",
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-purple-900">
+      {/* Hero Section */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-12">
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="text-center mb-16">
+          <h1 className="text-5xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 mb-4">
+            Career Guidance Hub
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Navigate your tech career with insights on roles, salaries, skills, and interview preparation from industry professionals.
+          </p>
+        </motion.div>
+
+        {/* Career Paths Section */}
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }} className="mb-16">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">Career Paths in Tech</h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+            {careerPaths.map((path, index) => (
+              <motion.button
+                key={path.id}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: index * 0.05 }}
+                onClick={() => setSelectedCareerPath(selectedCareerPath === path.id ? null : path.id)}
+                className={`text-left p-6 rounded-xl shadow-lg transition-all transform hover:scale-105 ${
+                  selectedCareerPath === path.id
+                    ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-2xl ring-2 ring-blue-300"
+                    : "bg-white dark:bg-gray-800 hover:shadow-xl"
+                }`}
+              >
+                <div className="text-4xl mb-3">{path.icon}</div>
+                <h3 className={`text-xl font-bold mb-2 ${selectedCareerPath === path.id ? "text-white" : "text-gray-900 dark:text-white"}`}>
+                  {path.name}
+                </h3>
+                <p className={`text-sm mb-4 ${selectedCareerPath === path.id ? "text-blue-100" : "text-gray-600 dark:text-gray-400"}`}>
+                  {path.description}
+                </p>
+                <div className="flex gap-2 flex-wrap">
+                  <span className={`px-2 py-1 rounded text-xs font-semibold ${selectedCareerPath === path.id ? "bg-white/20 text-white" : demandColors[path.demandLevel]}`}>
+                    {path.demandLevel.charAt(0).toUpperCase() + path.demandLevel.slice(1)} Demand
+                  </span>
+                  <span className={`px-2 py-1 rounded text-xs font-semibold ${selectedCareerPath === path.id ? "bg-white/20 text-white" : "bg-blue-100 text-blue-800"}`}>
+                    {path.jobsAvailable.toLocaleString()} jobs
+                  </span>
+                </div>
+              </motion.button>
+            ))}
+          </div>
+
+          {/* Detailed Career Path Info */}
+          {selectedPath && (
+            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-8">
+              <div className="flex items-center gap-4 mb-8 pb-8 border-b border-gray-200 dark:border-gray-700">
+                <span className="text-5xl">{selectedPath.icon}</span>
+                <div>
+                  <h3 className="text-3xl font-bold text-gray-900 dark:text-white">{selectedPath.name}</h3>
+                  <p className="text-gray-600 dark:text-gray-400 mt-2">Growth Rate: {selectedPath.growthRate}% annually</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                {/* Salary Ranges */}
+                <div>
+                  <h4 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Salary Expectations</h4>
+                  <div className="space-y-4">
+                    {selectedPath.salaryRanges.map((salary, idx) => (
+                      <div key={idx} className="p-4 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 rounded-lg">
+                        <div className="flex justify-between items-center mb-2">
+                          <span className="font-semibold text-gray-900 dark:text-white capitalize">{salary.level}</span>
+                          <span className="text-xs text-gray-600 dark:text-gray-400">{salary.experience}</span>
+                        </div>
+                        <div className="relative w-full h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                          <div
+                            className="h-full bg-gradient-to-r from-green-400 to-emerald-600 rounded-full"
+                            style={{ width: `${(salary.max / 350000) * 100}%` }}
+                          ></div>
+                          <div
+                            className="absolute top-0 h-full border-l-2 border-blue-600"
+                            style={{ left: `${(salary.min / 350000) * 100}%` }}
+                          ></div>
+                        </div>
+                        <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                          {salary.currency}
+                          {(salary.min / 1000).toFixed(0)}K - {salary.currency}
+                          {(salary.max / 1000).toFixed(0)}K
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Required Skills */}
+                <div>
+                  <h4 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Required Skills</h4>
+                  <div className="space-y-4">
+                    {selectedPath.requiredSkills.map((skillGroup, idx) => (
+                      <div key={idx} className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 rounded-lg">
+                        <h5 className="font-semibold text-gray-900 dark:text-white mb-3">{skillGroup.category}</h5>
+                        <div className="flex flex-wrap gap-2">
+                          {skillGroup.skills.map((skill, sidx) => (
+                            <span key={sidx} className="px-3 py-1 bg-white dark:bg-gray-600 text-purple-600 dark:text-purple-300 text-sm rounded-full font-medium">
+                              {skill}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </motion.div>
+
+        {/* Salary Comparison Chart */}
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 mb-16">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">Salary Comparison by Role & Experience</h2>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b-2 border-gray-200 dark:border-gray-700">
+                  <th className="text-left py-4 px-4 font-semibold text-gray-900 dark:text-white">Experience Level</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Frontend</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Backend</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">DevOps</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Full Stack</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Mobile</th>
+                  <th className="text-right py-4 px-4 font-semibold text-gray-900 dark:text-white">Data Science</th>
+                </tr>
+              </thead>
+              <tbody>
+                {salaryChartData.map((row, idx) => (
+                  <tr key={idx} className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
+                    <td className="py-4 px-4 font-semibold text-gray-900 dark:text-white">{row.level}</td>
+                    <td className="py-4 px-4 text-right text-gray-700 dark:text-gray-300">${row.frontend}K</td>
+                    <td className="py-4 px-4 text-right text-gray-700 dark:text-gray-300">${row.backend}K</td>
+                    <td className="py-4 px-4 text-right text-gray-700 dark:text-gray-300">${row.devops}K</td>
+                    <td className="py-4 px-4 text-right text-gray-700 dark:text-gray-300">${row.fullstack}K</td>
+                    <td className="py-4 px-4 text-right text-gray-700 dark:text-gray-300">${row.mobile}K</td>
+                    <td className="py-4 px-4 text-right text-gray-700 dark:text-gray-300">${row.ds}K</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </motion.div>
+
+        {/* Interview Preparation Tips */}
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }} className="mb-16">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">Interview Preparation Guide</h2>
+
+          {/* Category Filter */}
+          <div className="flex flex-wrap gap-3 mb-8">
+            {["all", "technical", "behavioral", "system-design", "preparation"].map((category) => (
+              <button
+                key={category}
+                onClick={() => setSelectedTipCategory(category)}
+                className={`px-6 py-2 rounded-full font-semibold transition-all ${
+                  selectedTipCategory === category
+                    ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg"
+                    : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-blue-500"
+                }`}
+              >
+                {category === "all" ? "All Tips" : category.replace("-", " ").charAt(0).toUpperCase() + category.replace("-", " ").slice(1)}
+              </button>
+            ))}
+          </div>
+
+          {/* Tips Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {filteredTips.map((tip, index) => (
+              <motion.div
+                key={tip.id}
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: index * 0.05 }}
+                className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-all"
+              >
+                <div className="flex items-start gap-4 mb-4">
+                  <div className="text-2xl">
+                    {tip.category === "technical" && "💻"}
+                    {tip.category === "behavioral" && "🤝"}
+                    {tip.category === "system-design" && "🏗️"}
+                    {tip.category === "preparation" && "📝"}
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">{tip.title}</h3>
+                    <div className="flex gap-2">
+                      <span className={`px-2 py-1 text-xs rounded font-semibold capitalize ${
+                        tip.difficulty === "beginner"
+                          ? "bg-green-100 text-green-800"
+                          : tip.difficulty === "intermediate"
+                            ? "bg-yellow-100 text-yellow-800"
+                            : "bg-red-100 text-red-800"
+                      }`}>
+                        {tip.difficulty}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <p className="text-gray-600 dark:text-gray-400 text-sm">{tip.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Company Hiring Trends */}
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }} className="mb-16">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">Company Hiring Trends</h2>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {companyHiringTrends.map((company, index) => (
+              <motion.div
+                key={company.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.05 }}
+                className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all"
+              >
+                {/* Company Header */}
+                <div className="p-6 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 border-b border-gray-200 dark:border-gray-700">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <span className="text-4xl">{company.logo}</span>
+                      <h3 className="text-xl font-bold text-gray-900 dark:text-white">{company.company}</h3>
+                    </div>
+                    <span
+                      className={`px-3 py-1 rounded-full text-sm font-semibold text-white ${
+                        company.hiringRate === "actively"
+                          ? hiringRateColors.actively
+                          : company.hiringRate === "moderately"
+                            ? hiringRateColors.moderately
+                            : hiringRateColors.slowly
+                      }`}
+                    >
+                      {company.hiringRate.charAt(0).toUpperCase() + company.hiringRate.slice(1)} Hiring
+                    </span>
+                  </div>
+                </div>
+
+                {/* Company Details */}
+                <div className="p-6 space-y-4">
+                  {/* Key Metrics */}
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="p-3 bg-blue-50 dark:bg-gray-700 rounded-lg">
+                      <div className="text-xs text-gray-600 dark:text-gray-400 mb-1">Average Salary</div>
+                      <div className="text-lg font-bold text-gray-900 dark:text-white">${(company.averageSalary / 1000).toFixed(0)}K</div>
+                    </div>
+                    <div className="p-3 bg-purple-50 dark:bg-gray-700 rounded-lg">
+                      <div className="text-xs text-gray-600 dark:text-gray-400 mb-1">Time to Hire</div>
+                      <div className="text-lg font-bold text-gray-900 dark:text-white">{company.timeToHire}</div>
+                    </div>
+                  </div>
+
+                  {/* Open Roles */}
+                  <div>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">Actively Hiring For:</h4>
+                    <div className="flex flex-wrap gap-2">
+                      {company.roles.map((role, idx) => (
+                        <span key={idx} className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-lg">
+                          {role}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Specializations */}
+                  <div>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">Specializations:</h4>
+                    <div className="flex flex-wrap gap-2">
+                      {company.specializations.map((spec, idx) => (
+                        <span key={idx} className="px-3 py-1 bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-900/30 dark:to-purple-900/30 text-blue-700 dark:text-blue-300 text-xs rounded-lg font-semibold">
+                          {spec}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Career Tips Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+          className="bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 dark:from-indigo-900/30 dark:via-purple-900/30 dark:to-pink-900/30 rounded-2xl p-8 mb-12"
+        >
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">🎯 Career Development Tips</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {[
+              {
+                title: "Build a Strong Portfolio",
+                description: "Showcase your best projects on GitHub. Quality > Quantity. Contribute to open-source projects.",
+              },
+              {
+                title: "Network Actively",
+                description: "Attend tech meetups, conferences, and webinars. Build relationships on LinkedIn and Twitter.",
+              },
+              {
+                title: "Keep Learning",
+                description: "Stay updated with latest technologies. Take courses, read blogs, and follow industry leaders.",
+              },
+              {
+                title: "Negotiate Smartly",
+                description: "Research salary ranges on Levels.fyi and Blind. Don't accept the first offer. Know your worth.",
+              },
+              {
+                title: "Specialize & Generalize",
+                description: "Have expertise in one area but be competent across the stack. Versatility makes you valuable.",
+              },
+              {
+                title: "Mentor & Lead",
+                description: "Help junior developers. Leadership skills are critical for growth into senior roles and management.",
+              },
+            ].map((tip, index) => (
+              <div key={index} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md">
+                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">{tip.title}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{tip.description}</p>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.6 }}
+          className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-2xl p-8 text-center text-white shadow-2xl"
+        >
+          <h2 className="text-3xl font-bold mb-4">Ready to Advance Your Career?</h2>
+          <p className="text-lg mb-6 max-w-2xl mx-auto">
+            Create a personalized roadmap, connect with mentors, and track your progress towards your dream role.
+          </p>
+          <div className="flex gap-4 justify-center flex-wrap">
+            <Link
+              href="/create-roadmap"
+              className="px-8 py-3 bg-white text-purple-600 font-bold rounded-lg hover:bg-gray-100 transition-colors"
+            >
+              Create Roadmap
+            </Link>
+            <Link
+              href="/dashboard"
+              className="px-8 py-3 bg-white/20 border-2 border-white text-white font-bold rounded-lg hover:bg-white/30 transition-colors"
+            >
+              View Dashboard
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}


The new Career Guidance page lacks test coverage. Since the repository has comprehensive tests for other pages (e.g., tests/dashboard/), consider adding tests to cover the filtering logic, state management, and user interactions.

Copilot · 2026-01-27T02:27:49Z

app/career-guidance/page.tsx

+  const { user } = useUser();
+  const [selectedCareerPath, setSelectedCareerPath] = useState<string | null>(null);
+  const [selectedTipCategory, setSelectedTipCategory] = useState<string>("all");
+  const [expandedCompany, setExpandedCompany] = useState<string | null>(null);


The state variable 'expandedCompany' is declared but never used in the component. Remove this unused state to keep the code clean.

Suggested change

const [expandedCompany, setExpandedCompany] = useState<string | null>(null);

Ayaanshaikh12243 added 4 commits January 26, 2026 12:54

ISSUE-263

580fc79

ISSUE-264

8ae0d3b

Coding Practice Hub

a5543a5

#269

Career Guidance:

71810fa

Copilot AI review requested due to automatic review settings January 26, 2026 20:52

Merge branch 'main' into ISSUE-268

ce5ab92

Copilot started reviewing on behalf of Ayaanshaikh12243 January 26, 2026 20:52 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

Darshan3690 requested a review from Copilot January 27, 2026 02:23

Darshan3690 assigned Ayaanshaikh12243 Jan 27, 2026

Darshan3690 added the ECWoC26 contributors start submitting pull requests label Jan 27, 2026

Copilot started reviewing on behalf of Darshan3690 January 27, 2026 02:23 View session

Darshan3690 merged commit e9336df into Darshan3690:main Jan 27, 2026
6 of 8 checks passed

ecwoc-sentinel bot added the ECWoC26-L3 label Jan 27, 2026

vercel bot had a problem deploying to Preview January 27, 2026 02:24 Failure

Copilot AI reviewed Jan 27, 2026

View reviewed changes

	const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra"];
	const allTopics = ["Arrays", "String", "Trees", "Graphs", "Dynamic Programming", "Hash Table", "Two Pointers", "Sliding Window", "BFS", "DFS", "Dijkstra", "Binary Search"];

-                          ? `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`
+                          ? level === "all"
+                            ? "bg-blue-500 text-white scale-105"
+                            : `${difficultyColors[level as keyof typeof difficultyColors]} scale-105`

Uh oh!

Issue 268 #273

Issue 268 #273

Uh oh!

Conversation

Ayaanshaikh12243 commented Jan 26, 2026

Uh oh!

vercel bot commented Jan 26, 2026

Uh oh!

Ayaanshaikh12243 commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

vercel bot commented Jan 27, 2026 •

edited

Loading