How I Built a Personalized Learning Path Generator Using daily.dev + GPT-4o

The Problem

I spend a lot of time on daily.dev.
Bookmarking articles, following tags, and building a reading history that reflects my interests and knowledge gaps.

But I never had a structured way to act on that data.

Bookmarks pile up.

Articles get read in random order.

There’s no real curriculum—just noise.

DevPath changes that.

What It Does

DevPath connects to your daily.dev profile and uses GPT-4o to turn your reading activity into a structured, stage-based learning path.

How It Works

1. Paste your daily.dev Personal Access Token and OpenAI API key.
2. Choose up to 3 focus topics.
3. Answer a few quick background questions (experience, role, goals, learning style).
4. DevPath pulls your bookmarks, followed tags, and tech stack via the daily.dev API.
5. GPT-4o selects 12–18 relevant articles and organizes them into 3–5 stages—from foundational to advanced—with a clear reason for each.
6. Get a shareable URL that works in any browser.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• AI: OpenAI GPT-4o
• Data: daily.dev Public API
• Styling: Tailwind CSS v4 + CSS variables
• Persistence: localStorage only (no database)
• Deployment: Vercel

Key Technical Decisions

No backend, no database

Everything runs in the browser. Paths are stored in localStorage—no accounts, no signup. This kept the architecture extremely lean for a 72-hour build.

User-provided API keys

DevPath doesn’t proxy OpenAI requests. You bring your own API key, so you control costs, and your data never touches my servers. Generating a path typically costs a few cents.

Cross-browser sharing via URL encoding

localStorage isn’t shareable across devices, so I compress the full path JSON using lz-string and encode it into a ?d= URL parameter. When opened elsewhere, it decodes, restores to localStorage, and cleans the URL-no backend required.

Prompt personalization via background questions

User responses (experience, role, goals, learning style) are injected directly into the GPT-4o prompt, allowing it to tailor depth and complexity appropriately.

Reliable structured output with JSON mode

Using response_format: { type: "json_object" } ensures consistent, parseable responses—no fragile parsing or error handling needed.

What I Learned

• The daily.dev API provides a surprisingly rich signal-bookmarks, tags, and tech stack together give a strong picture of developer intent.
• GPT-4o performs well at curriculum design when given a structured context.
• lz-string is highly effective for URL-based state sharing (compresses JSON by ~60–70%).
• Next.js App Router + Server Actions kept API interactions clean and fully server-side without extra routing complexity.

Try It

Live: https://devpath-gules.vercel.app/

You’ll need:

• A daily.dev Personal Access Token (Plus required): https://app.daily.dev/settings/api
• An OpenAI API key: https://platform.openai.com/api-keys

Built for the #dailydevhackathon - feedback is welcome.