Turn your current skills into a personalized journey toward your dream career.
Live Demo · GitHub · Installation · API Docs
- 🤖 Real AI-Powered Roadmaps: Highly customized, dynamic step-by-step guidance tailored specifically to your background and aspirations.
- 🧭 Goal-Based Journeys: Personalized milestones customized to your starting point and destination.
- 📅 Flexible Durations: Support for 4 weeks, 8 weeks, 12 weeks, and 6 months timelines.
- ⚡ Multi-Provider AI Gateway:
- Groq Cloud (
console.groq.com) — Ultra-fast inference with Llama 3.3 70B and active model discovery. - xAI Grok (
console.x.ai) — Deep reasoning using Grok 2, Grok 3, and xAI's chat completion models. - Google Gemini (
aistudio.google.com) — Fast structured outputs with Gemini models. - OpenRouter (
openrouter.ai) — Flexible routing across dozens of open and proprietary LLMs.
- Groq Cloud (
- 🚫 No Hardcoded Mock Fallbacks: Guaranteed genuine AI-generated content; descriptive server error responses if an API key or provider is unavailable.
- 🌌 Cinematic Visuals: Custom animated interactive star field, ambient glow, and depth grain.
- 🎨 Editorial Aesthetics: Elegant typography pairing Cormorant Garamond with DM Sans.
- 📱 Fully Responsive: Seamless layout across mobile, tablet, and desktop screens.
- 🔒 Zero Client Secret Exposure: All AI credentials remain strictly protected on the backend server.
Current Situation
↓
Dream / Goal
↓
Journey Duration
↓
AI Roadmap Gateway (Groq / xAI Grok / Gemini / OpenRouter)
↓
Personalized Weekly Roadmap (Live AI Generation)
┌─────────────────────────────────────────┐
│ Vite + React Frontend │
│ (Configurable via VITE_API_URL) │
└────────────────────┬────────────────────┘
│
│ POST /roadmap
↓
┌─────────────────────────────────────────┐
│ Node.js + Express Backend │
│ (Port 3000) │
└────────────────────┬────────────────────┘
│
↓
┌─────────────────────────────┐
│ AI Engine Selection │
│ (API_PROVIDER setting) │
└──────────────┬──────────────┘
┌───────────┼───────────┬───────────┐
↓ ↓ ↓ ↓
Groq Cloud xAI Grok Gemini OpenRouter
(GROQ_API_KEY)(XAI/GROK_KEY)(GEMINI_KEY)(OPENROUTER_KEY)
- Node.js:
18.0.0or higher - npm:
9.0.0or higher
git clone https://github.com/AmitDas4321/PathAI.git
cd PathAI
npm installCopy the sample environment file to .env:
cp .env.example .envConfigure your .env settings:
# AI Provider Selection: 'groq' (default), 'grok' (or 'xai'), 'gemini', or 'openrouter'
API_PROVIDER=groq
# 1. Groq (https://console.groq.com/keys)
GROQ_API_KEY=gsk_your_groq_key_here
# 2. xAI Grok (https://console.x.ai)
GROK_API_KEY=xai-your_xai_key_here
XAI_API_KEY=xai-your_xai_key_here
# 3. Google Gemini (https://aistudio.google.com)
GEMINI_API_KEY=your_gemini_key_here
# 4. OpenRouter (https://openrouter.ai/keys)
OPENROUTER_API_KEY=your_openrouter_key_here
# Server Port
PORT=3000| Provider | API_PROVIDER Value |
Required Environment Variable | Model Discovery & Defaults |
|---|---|---|---|
| Groq Cloud (Default) | groq |
GROQ_API_KEY |
Auto-discovers active chat models (llama-3.3-70b-versatile, llama-3.1-8b-instant, deepseek-r1-distill-llama-70b) |
| xAI Grok | grok or xai |
GROK_API_KEY / XAI_API_KEY |
Auto-discovers available xAI models (grok-2, grok-beta, grok-3, grok-2-1212) |
| Google Gemini | gemini |
GEMINI_API_KEY |
gemini-3.7-flash / gemini-2.5-flash with JSON Schema constraint |
| OpenRouter | openrouter |
OPENROUTER_API_KEY |
x-ai/grok-2-1212 / google/gemini-2.5-flash |
ℹ️ Smart Provider Routing:
- If you provide a key starting with
gsk_, PathAI automatically routes to Groq.- If you provide a key starting with
xai-, PathAI automatically routes to xAI Grok.- If an API key is missing or an upstream AI outage occurs, the server returns an explicit error banner with a retry button instead of displaying artificial fallback text.
Start the development server (runs Express + Vite on port 3000):
npm run devThe application will be accessible at http://localhost:3000.
PathAI frontend is decoupled and can communicate with any custom or deployed backend (e.g., Render, Railway, Fly.io, Cloud Run).
To point your frontend to an external API, update your .env:
VITE_API_URL=https://pathai-backend-hs9e.onrender.comThe frontend will automatically dispatch requests to ${VITE_API_URL}/roadmap.
Build the static frontend bundle:
npm run buildThe optimized static assets will be output in the dist/ directory, ready to deploy to Vercel, Netlify, Cloudflare Pages, or Firebase Hosting.
To run the compiled backend in production:
npm startPOST /roadmap
Content-Type: application/json{
"from": "Student",
"to": "Developer",
"dur": "6 months"
}{
"subtitle": "A path carved in code, from dreams to creation.",
"weeks": [
{
"number": 1,
"title": "Awakening Curiosity",
"focus": "Ignite the spark of wonder in the world of code.",
"steps": [
"Research basic programming concepts",
"Join an online coding community",
"Set up your development environment"
],
"tools": [
"Codecademy",
"Visual Studio Code"
]
}
]
}PathAI delivers an immersive, editorial experience:
- Typography: Cormorant Garamond for poetic display headers and DM Sans for crisp, legible UI controls.
- Canvas Stars: Twinkling, drifting multi-layered celestial stars rendered on HTML5 canvas.
- Ambient Lighting: Dynamic radial gradient backdrop that reacts to user scrolling depth.
- Timeline Cards: Alternating milestone cards with subtle border illumination and glowing nodes.
- Micro-Interactions: Progressive form disclosure, glowing focus rings, and silky smooth transitions.
PathAI/
├── assets/
│ └── pathai-preview.png # Preview showcase graphic
├── src/
│ ├── App.tsx # Main frontend interactive experience
│ ├── index.css # Custom styling & animations
│ ├── main.tsx # React application root entry
│ ├── types.ts # Shared TypeScript data models
│ └── vite-env.d.ts # Vite client environment types
├── server.ts # Express backend & AI provider gateway
├── .env.example # Template environment configuration
├── .gitignore # Git ignore rules
├── index.html # HTML shell & font definitions
├── metadata.json # Applet metadata
├── package.json # NPM scripts & dependencies
├── tsconfig.json # TypeScript compilation setup
├── vite.config.ts # Vite bundler configuration
└── README.md # Project documentation
Distributed under the MIT License. See LICENSE for more information.
Built with ⚡ using React, TypeScript & Node.js
Crafted with ❤️ by Amit Das