Personal Learning Path (PathFlow)

A full-stack web application that generates personalized, actionable learning paths. Enter your skills and goals and PathFlow returns a step-by-step roadmap. The app supports AI-generated content (Google Gemini / OpenAI), progress tracking, and exportable roadmaps.

🌟 Features

User Authentication: Secure registration and login system using JWT tokens
Skill Assessment: Interactive form to input skills, career goals, and learning preferences
AI-Powered Learning Paths: Leverages Google Gemini API to create personalized learning roadmaps
Market Insights: Real-time salary data and market trends for your career goal 💰
Visual Roadmaps: Interactive roadmap generation with downloadable formats
Curated Resources: Integration with free learning platforms (freeCodeCamp, Coursera, Khan Academy)
Progress Tracking: Mark milestones as complete and visualize your learning journey (My Learning)
Study Groups: Join or create community study groups for collaborative learning (coming soon)
Responsive Design: Modern, mobile-friendly interface built with React and Tailwind CSS
Visual Analytics: Progress visualization with Chart.js (planned feature)

� What's new in this repo

Progress Tracking ("My Learning") — save generated paths, mark steps complete, and view progress bars and stats.
Robust AI fallback: Gemini REST / SDK → OpenAI (if configured) → Manual fallback generator (always works).
Markdown rendering for step text (supports bold out of the box).

�💼 Market Insights Feature

The Market Insights feature provides real-time career intelligence to help you understand the market value of your target role:

Key Features:

Salary Ranges: Current industry salary data for your career goal
Hot Job Indicators: Visual badges for high-demand roles 🔥
Top Skills: Most requested skills for your target position
Market Intelligence: Industry trends and growth projections

Supported Career Paths:

Full Stack Developer, Frontend/Backend Developer
Data Scientist, AI/ML Engineer
UX/UI Designer, Product Designer
DevOps Engineer, Cloud Engineer
Mobile Developer (iOS/Android)
Cybersecurity Analyst
Blockchain Developer
And many more...

The feature automatically detects your career goal and displays relevant market data to help you make informed decisions about your learning path.

PathFlow ⬇️

🛠️ Tech Stack

Frontend

React - Modern JavaScript library for building user interfaces
Tailwind CSS - Utility-first CSS framework for rapid UI development
Chart.js - Data visualization library (planned implementation)

Backend

Node.js - JavaScript runtime environment
Express.js - Fast, unopinionated web framework
MongoDB Atlas - Cloud-based NoSQL database
JWT - JSON Web Tokens for secure authentication

AI & APIs

Google Gemini API - Advanced AI for generating personalized learning paths

Development Tools

Postman - API development and testing
Git & GitHub - Version control and collaboration
npm - Package management

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v16 or higher) - Download here
Git - Download here
MongoDB Atlas Account - Create account
Google Gemini API Key - Get API key
Postman (optional, for API testing) - Download here

📥 Installation (local development)

1. Clone the Repository

git clone https://github.com/Umeshinduranga/personal-learning-path.git
cd personal-learning-path

2. Install Dependencies

# Install both client and server dependencies
npm install

# Install client dependencies
cd client
npm install
cd ..

3. Configure Environment Variables

Create a server/.env file with these variables (example values):

# Server
PORT=5000
NODE_ENV=development

# MongoDB (Atlas)
MONGO_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/learning_path

# Authentication
JWT_SECRET=your_super_secret_jwt_key_here

# AI providers
# Google Gemini (recommended free key via Google AI Studio)
GEMINI_API_KEY=your_gemini_api_key_here
GEMINI_MODEL=gemini-2.5-flash

# Optional OpenAI backup (paid)
# OPENAI_API_KEY=sk-your-openai-key

# Client URL (used for CORS)
CLIENT_URL=http://localhost:3000

Notes:

The server expects MONGO_URI (not MONGODB_URI) in server/.env.
The app will gracefully fall back to a manual generator if AI keys are missing or suspended.

4. Start the Application

Start both frontend and backend in development mode (concurrently):

npm run dev

Or start services individually:

# Backend
cd server
npm start

# Frontend
cd client
npm start

The application will automatically:

Start the backend server on http://localhost:5000
Launch the React frontend on http://localhost:3000
Open your default browser to the application

You should see output similar to:

[server] Server running on port 5000
[server] Connected to MongoDB
[client] Compiled successfully!
[client] Local: http://localhost:3000

📖 Usage

Getting Started with the Application

Access the App: Navigate to http://localhost:3000 (opens automatically)
Register/Login: Create an account or sign in to access personalized features
Complete Assessment: Fill out the comprehensive assessment form including:
- Current technical skills
- Career aspirations
- Preferred learning style
- Available time commitment
Generate Learning Path: Receive a customized learning roadmap with:
- Step-by-step milestones
- Curated free resources
- Estimated completion times
Track Progress: Mark completed milestones and monitor your learning journey
Join Community: Connect with study groups and fellow learners (coming soon)

API Testing & Useful Endpoints

If you want to test the API endpoints directly:

User Registration

Method: POST
URL: http://localhost:5000/api/auth/register
Headers: Content-Type: application/json
Body:

{
  "email": "john.doe@example.com",
  "password": "securepassword123",
  "name": "John Doe"
}

User Login

Method: POST
URL: http://localhost:5000/api/auth/login
Headers: Content-Type: application/json
Body:

{
  "email": "john.doe@example.com",
  "password": "securepassword123"
}

Method: POST
URL: http://localhost:5000/api/assessment/submit (if present)

Progress Tracking API (new)

Use these endpoints to fetch and update saved learning paths:

GET /api/paths/my-paths — fetch all paths for the authenticated user
GET /api/paths/:id — fetch a single path
PATCH /api/paths/:id/steps/:stepIndex — toggle completion of a step
PATCH /api/paths/:id/metadata — update metadata (notes, tags, targetDate)
DELETE /api/paths/:id — delete a path

All paths require Authorization header: Authorization: Bearer <authToken> Note: The frontend stores the auth token under authToken in localStorage.

Headers:
- Content-Type: application/json
- Authorization: Bearer <your_jwt_token>
Body:

{
  "currentSkills": ["JavaScript", "HTML", "CSS"],
  "careerGoals": "Full-Stack Web Developer",
  "learningStyle": "visual",
  "timeCommitment": "10 hours per week",
  "experience": "beginner"
}

📁 Project Structure

personal-learning-path/
├── 📁 server/                 # Backend code
│   ├── 📁 models/             # MongoDB schemas (User, Group)
│   ├── 📁 routes/             # API routes (auth, assessment, community)
│   ├── 📁 services/           # Resource fetching logic
│   └── 📄 server.js           # Main server file
├── 📁 client/                 # Frontend code
│   ├── 📁 src/                # React components and pages
│   │   ├── 📁 components/     # Reusable components (forms, results, etc.)
│   │   ├── 📄 App.js          # Main app component
│   │   └── 📄 index.js        # React entry point
│   ├── 📁 public/             # Static assets
│   └── 📄 package.json        # Client dependencies
├── 📄 .env                    # Environment variables (root level)
├── 📄 package.json            # Main package.json with start scripts
└── 📄 README.md               # Project documentation

🔌 API Endpoints (summary)

Authentication (`/api/auth`)

POST /register - register a new user
POST /login - obtain JWT token

Learning Paths & Progress (`/api/paths`)

GET /my-paths - user paths
PATCH /:id/steps/:stepIndex - toggle a step

Generation endpoints

POST /generate-path — generate a learning path (AI first, fallback to manual)
POST /generate-roadmap-steps — simplified step generation (for canvas/exports)

🔧 Development Scripts

# Start both client and server in development mode
npm start

# Start only the server
npm run server

# Start only the client
npm run client

# Install dependencies for both client and server
npm run install-all

# Build client fo

PathFlow

Install / Use

README