DevPath AI 🚀

AI-Powered Developer Career Navigator

"Your personal senior dev mentor, available 24/7."

DevPath AI solves the biggest problem beginner developers face:
not knowing what to learn, how to practice, or what they're doing wrong.

---

✦ What It Does

Feature	Description
Goal Setup	3-step onboarding. Claude generates a personalized week-by-week roadmap.
My Roadmap	Ask unlimited follow-up questions about your plan. Curated resource library.
Code Review	Paste any code. Get a senior dev's structured review with fixes and lessons.
Mock Interview	Live conversational AI interview with a score + improvement breakdown.
Project Ideas	5 portfolio-worthy ideas matched to your exact skills and interests.
Portfolio Analyzer	Honest recruiter-style feedback with a score and rewritten bio.

---

🏗 Architecture

devpath-ai/
│
├── index.html                    # SEO, OG tags, JSON-LD, Google Fonts
├── vite.config.js                # Build config (code splitting)
├── package.json
│
├── public/
│   ├── favicon.svg
│   └── manifest.json             # PWA manifest
│
└── src/
    ├── main.jsx                  # Entry providers + CSS imports
    ├── App.jsx                   # Shell layout + in-memory router
    │
    ├── styles/
    │   ├── variables.css         # All design tokens (dark + light themes)
    │   ├── globals.css           # Reset, base, layout, shared utilities
    │   └── animations.css        # Keyframes + utility classes
    │
    ├── context/
    │   ├── ThemeContext.jsx       # Dark/light mode with localStorage
    │   └── AppContext.jsx         # Global state (API key, profile, nav, stats)
    │
    ├── hooks/
    │   └── useClaude.js          # Reusable hook loading/error/result state
    │
    ├── utils/
    │   ├── claudeApi.js          # Centralized Claude API client + system prompts
    │   ├── constants.js          # Dropdown data, goal catalogs, nav items
    │   └── helpers.js            # Pure utility functions
    │
    ├── components/
    │   ├── layout/
    │   │   ├── Sidebar.jsx/css   # Collapsible nav + mobile drawer
    │   │   └── Topbar.jsx/css    # Breadcrumb + API status + theme toggle
    │   │
    │   ├── ui/
    │   │   ├── Button.jsx/css    # Variants: primary, brand, secondary, ghost, danger
    │   │   ├── Card.jsx/css      # Surface container with compound slots
    │   │   └── AIResponse.jsx/css # Branded AI output renderer
    │   │
    │   └── shared/
    │       └── PageHeader.jsx/css # Consistent page title block
    │
    └── pages/
        ├── Dashboard.jsx/css     # Stats + daily brief + quick actions
        ├── GoalSetup.jsx/css     # 3-step onboarding form
        ├── Roadmap.jsx/css       # Roadmap viewer + follow-up Q&A
        ├── CodeReview.jsx/css    # Split editor + AI review panel
        ├── MockInterview.jsx/css # Live chat-style interview
        ├── ProjectIdeas.jsx/css  # Project generator
        ├── PortfolioAnalyzer.jsx/css # Portfolio feedback
        └── Settings.jsx/css     # API key, profile, theme

---

🤖 Claude API Integration

All API calls centralized in src/utils/claudeApi.js.
Every feature uses a distinct, tuned system prompt.

Page	How Claude is used
Dashboard	Personalized daily motivational brief
Goal Setup	Generates full week-by-week roadmap from profile
Roadmap	Answers follow-up questions in context
Code Review	Structured 7-section senior dev review
Mock Interview	Multi-turn conversational interview with scoring
Project Ideas	5 detailed project ideas with build breakdowns
Portfolio Analyzer	Recruiter-style feedback with rewritten bio

---

🎨 Design System

• Fonts: Syne (display) + DM Sans (body) + Space Mono (code/UI)
• Dark theme: #0A0C12 base with #00E5FF cyan accent
• Light theme: #F5F1EC base with #006882 teal accent
• CSS architecture: Pure CSS custom properties no framework needed
• Responsive: CSS Grid, mobile sidebar drawer, touch-friendly targets

---

🚀 Running Locally

git clone https://github.com/your-username/devpath-ai
cd devpath-ai
npm install
npm run dev

Then open http://localhost:5173 and add your Anthropic API key in Settings.

📦 Deploying

# Vercel (recommended)
npm run build
vercel --prod

# GitHub Pages
# Set base: '/devpath-ai/' in vite.config.js, then:
npm run build && gh-pages -d dist

---

🏆 Themes

• ✅ Software Development & Engineering
• ✅ Artificial Intelligence & Machine Learning
• ✅ Business Management & Consultancy Solutions

---

🔑 Tech Stack

Layer	Technology
Frontend	React 18 + Vite 5
Styling	Pure CSS (custom properties, no framework)
AI	Anthropic Claude API (claude-sonnet-4-20250514)
State	React Context API + useState
Storage	localStorage (API key + profile only)
Deployment	Vercel / GitHub Pages

---

MIT License