Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 192 additions & 0 deletions docs/prd-learn-to-code.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
# PRD: Learn to Code Hub

## Overview

Build `/learn-to-code` as daily.dev's answer to "I want to learn to code — where do I start?" A hub page aggregating hundreds of programmatic SEO leaf pages, each curated by an AI agent with AI-native content (prompts-as-tutorials) and live daily.dev feed data. Captures high-impression "learn to code" head terms at the hub and long-tail beginner intent queries at the leaf level.

---

## User Stories

### Must-have

- As a career changer landing from Google, I want to immediately see paths relevant to my situation ("coding for marketers", "learn to code to get a job") so I don't bounce trying to figure out where to start.
- As a beginner on a leaf page (e.g. `/learn-to-code/python`), I want ready-to-paste prompts for Cursor/Claude Code so I can start building something real in 10 minutes, not finish a 20-hour course first.
- As someone who just vibe-coded something, I want to understand what the AI actually built so I'm learning concepts, not just copy-pasting forever.
- As a user exploring the hub, I want to see what's trending in the beginner community right now (live daily.dev content) so the page feels like a living resource, not a static blog post from 2024.
- As a search engine, I want well-structured JSON-LD, internal links between related leaf pages, and fresh content signals so the hub and leaves rank for their target queries.

### Nice-to-have

- As a returning user, I want to pick up where I left off (last visited leaf page surfaced on the hub).
- As a user finishing a beginner leaf page, I want a "what's next" recommendation linking to adjacent leaf pages.

---

## Architecture

### URL Structure

```
/learn-to-code ← The hub (aggregates everything below)
├── /learn-to-code/build/todo-app ← Use case pages
├── /learn-to-code/build/portfolio-site
├── /learn-to-code/automate/email
├── /learn-to-code/automate/spreadsheets
├── /learn-to-code/python ← Language/tool pages
├── /learn-to-code/javascript
├── /learn-to-code/cursor
├── /learn-to-code/vibe-coding ← Technique pages
├── /learn-to-code/for/designers ← Audience pages
├── /learn-to-code/for/marketers
└── ...hundreds more
```

### pSEO Dimensions

| Dimension | Examples | Long-tail queries captured |
|-----------|----------|---------------------------|
| **Use case** | build a todo app, automate tasks, make a website | "how to build a todo app" |
| **Language/tool** | Python, JavaScript, Cursor, Claude Code | "learn python for beginners" |
| **Audience** | designers, marketers, students, career changers | "coding for marketers" |
| **Technique** | vibe coding, pair programming with AI, test-driven | "vibe coding for beginners" |
| **Goal** | get a job, freelance, build a startup, automate work | "learn to code to get a job" |

---

## Hub Page (`/learn-to-code`)

Four sections:

1. **What do you want to build?** — use case cards linking to leaf pages
2. **Popular paths** — top-visited leaves, ranked by traffic (hardcoded initially, analytics-driven later)
3. **Fresh picks** — recently agent-updated pages, sorted by `lastUpdated`
4. **Trending on daily.dev** — dynamic feed data filtered by beginner/programming-basics tags

All sections render server-side at build time. "Trending on daily.dev" hydrates client-side via TanStack Query against existing feed API.

---

## Leaf Pages (`/learn-to-code/[...slug]`)

Dynamic catch-all route. Each leaf page renders:

1. **What & why** — one paragraph, agent-written, no fluff
2. **Start building** — progressive prompt sequence (3–7 prompts), labeled by tool (Cursor / Claude Code / Replit / generic). Prompts are first-class content — the new tutorials.
3. **Understand what you built** — key concepts the AI used, explained in plain language. Turns vibe-coding into actual learning.
4. **Go deeper** — curated external resources (tutorials, courses, videos, docs). Agent-curated, refreshed for dead links.
5. **Tools** — 2–4 AI coding tools recommended for this use case
6. **Communities** — daily.dev squads + relevant subreddits/discords
7. **Related daily.dev content** — dynamic feed filtered by leaf page's tags
8. **Related pages** — internal links to adjacent leaf pages (powers the pSEO linking mesh)

---

## Data Model

Each leaf page consumes a JSON file at `data/learn-to-code/{slug}.json`:

```ts
type LeafPageData = {
slug: string; // e.g. "python" or "build/todo-app"
title: string;
description: string; // one paragraph — SEO meta + page intro
dimension: 'language' | 'usecase' | 'audience' | 'technique' | 'goal';
tags: string[]; // daily.dev tag slugs for feed + related content
prompts: Prompt[];
concepts: Concept[]; // "understand what you built"
resources: Resource[];
tools: Tool[];
communities: Community[];
relatedSlugs: string[]; // internal linking mesh
lastUpdated: string; // ISO date, agent stamps on refresh
};

type Prompt = {
step: number;
title: string;
body: string; // the actual prompt text
tools: ('cursor' | 'claude-code' | 'replit' | 'generic')[];
};

type Concept = {
name: string;
explanation: string; // plain language, 2-3 sentences
};

type Resource = {
title: string;
url: string;
type: 'video' | 'article' | 'course' | 'docs';
free: boolean;
};

type Tool = {
name: string;
url: string;
description: string; // one-line rationale
};

type Community = {
name: string;
url: string;
platform: 'dailydev' | 'reddit' | 'discord' | 'other';
};
```

A manifest file (`data/learn-to-code/manifest.json`) lists all slugs, titles, dimensions, and `lastUpdated`. Used by `getStaticPaths` and the hub page.

---

## The Curation Agent

Separate system that outputs JSON files. Responsibilities:

- Discover and curate quality resources across the web per page
- Generate/curate starter prompts per use case, versioned for different tools
- Write "understand what you built" concept explainers
- Refresh existing recommendations (dead links, outdated content)
- Identify new leaf pages worth creating (trending queries, emerging tools)
- Pull relevant daily.dev content per topic
- Stamp `lastUpdated` on each refresh

---

## Rendering & Performance

- `getStaticProps` + ISR with `revalidate: 3600` for leaf pages
- `fallback: 'blocking'` — pages generate on first request
- Pre-generate top ~50 leaf pages at build time once data is seeded
- Hub: ISR with `revalidate: 300` (5 min)

---

## SEO

- **Leaf JSON-LD**: `HowTo` schema for prompt sequence (each prompt = `HowToStep`), `CollectionPage` for resources, `BreadcrumbList`
- **Hub JSON-LD**: `CollectionPage` of featured leaf pages + `FAQPage` for common questions
- **Title pattern**: `"Learn [Topic] — Prompts, Resources & Community | daily.dev"`
- Canonical URLs enforced, no duplicate content across dimension combos
- `sr-only` anchor links to related leaf pages for link equity

---

## Technical Details

- **Routing**: `pages/learn-to-code/index.tsx` (hub) + `pages/learn-to-code/[...slug].tsx` (all leaves)
- **Feed integration**: Existing `HorizontalFeed` + `TAG_FEED_QUERY` filtered by leaf's tags
- **Squads integration**: Existing Squads API filtered by tags
- **Layout**: `PageWrapperLayout`, `getFooterNavBarLayout(getLayout(...))`, `max-w-6xl`
- **No new GraphQL**: All dynamic data uses existing queries. Leaf content is file-based.

---

## Out of Scope

- User accounts / personalization / progress tracking
- Generating leaf page JSON files (agent's job)
- A/B testing hub layout variants
- Mobile app surfaces
- User-submitted resources or community curation
- Search/filter UI within the hub
- Localization / non-English pages
147 changes: 147 additions & 0 deletions packages/webapp/data/learn-to-code/automate-your-workflow.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
{
"slug": "automate-your-workflow",
"title": "Automate Your Workflow",
"description": "You don't need to be a programmer to automate repetitive tasks. If you can describe what you do manually, AI can help you write a script to do it automatically. Reclaim hours every week by automating the boring stuff.",
"dimension": "goal",
"tags": ["python", "automation", "scripting", "productivity"],
"projectDescription": "You'll build scripts that do your boring work for you — organizing messy downloads folders, batch renaming files, sending automated email reports, and monitoring websites for changes. Each script saves you real time every week.",
"outcomes": [
"Write Python scripts that automate repetitive file and folder tasks",
"Schedule scripts to run automatically without any manual trigger",
"Pull data from external services like Google Sheets and send formatted reports",
"Build a personal dashboard to monitor and manage all your automations"
],
"aiTips": [
"Describe your manual workflow step by step before asking for a script — the more precise the input, the more useful the output",
"Always ask the AI to add logging to scripts that will run unattended so you can debug failures later",
"Test scripts on a small sample of real data before pointing them at your full Downloads folder or live spreadsheet",
"Ask the AI to add a dry-run mode that prints what the script would do without actually doing it"
],
"prompts": [
{
"step": 1,
"title": "Automate file organization",
"body": "Write a Python script that watches my Downloads folder and automatically organizes files into subfolders by type: Images (jpg, png, gif, svg), Documents (pdf, docx, xlsx), Videos (mp4, mov), Code (py, js, html, css), and Archives (zip, tar, gz). Move each file to the right folder as soon as it appears.",
"tools": ["cursor", "claude-code", "generic"],
"difficulty": "beginner",
"timeEstimate": "~30 min",
"stuckTip": "If the file watcher doesn't trigger, ask the AI to show you how to test the script manually first by passing a folder path as a command-line argument."
},
{
"step": 2,
"title": "Batch rename files",
"body": "Create a Python script that batch renames files in a folder. It should support: adding a prefix or suffix, replacing text in filenames, converting to lowercase, adding sequential numbers, and inserting the date. Show a preview of changes before applying them. Add an undo feature that can reverse the last rename operation.",
"tools": ["cursor", "claude-code", "generic"],
"difficulty": "beginner",
"timeEstimate": "~30 min",
"stuckTip": "If the undo feature is confusing to implement, ask the AI to save a rename log as a JSON file that can be replayed in reverse."
},
{
"step": 3,
"title": "Automate email reports",
"body": "Write a Python script that reads data from a Google Sheet (using the gspread library), generates a summary report with key metrics and a chart, and sends it as a formatted HTML email using smtplib. Set it up to run automatically every Monday at 9am using a cron job or schedule library.",
"tools": ["cursor", "claude-code"],
"difficulty": "intermediate",
"timeEstimate": "~60 min",
"stuckTip": "If Google Sheets authentication fails, ask the AI to walk you through creating a service account and sharing the sheet with it."
},
{
"step": 4,
"title": "Build a web scraper",
"body": "Create a Python script that monitors a webpage for changes. It should: fetch the page at regular intervals, compare with the previous version, and send me a notification (desktop notification or email) when something changes. Add support for monitoring multiple URLs from a config file.",
"tools": ["cursor", "claude-code"],
"difficulty": "stretch",
"timeEstimate": "~60 min",
"stuckTip": "If the comparison produces false positives (timestamps changing), ask the AI to extract only the relevant content section rather than comparing the full HTML."
},
{
"step": 5,
"title": "Create a personal automation dashboard",
"body": "Build a web-based dashboard that shows all my automations: which ones are running, their last execution time, success/failure status, and logs. Add buttons to run each automation manually. Include a simple form to add new scheduled tasks. Use Flask for the backend and store automation status in SQLite.",
"tools": ["cursor", "claude-code"],
"difficulty": "stretch",
"timeEstimate": "~90 min",
"stuckTip": "Start with a static dashboard that reads from a hardcoded SQLite file before wiring up live automation status — get the UI right first."
}
],
"concepts": [
{
"name": "File System Operations",
"explanation": "Python's os and pathlib modules let you create, move, rename, and delete files and folders programmatically. Every automation starts with understanding how to interact with the file system."
},
{
"name": "Scheduling and Cron Jobs",
"explanation": "Cron (Linux/Mac) and Task Scheduler (Windows) run scripts automatically at set times. This is how you make automation truly hands-free — your script runs while you sleep."
},
{
"name": "APIs and Web Requests",
"explanation": "The requests library lets Python talk to any web service. Read data from Google Sheets, send Slack messages, check the weather — if a service has an API, you can automate it."
},
{
"name": "Error Handling and Logging",
"explanation": "Automations run unattended, so they need to handle errors gracefully. Logging records what happened so you can debug failures. Try/except blocks prevent one error from crashing everything."
}
],
"resources": [
{
"title": "Automate the Boring Stuff with Python",
"url": "https://automatetheboringstuff.com/",
"type": "article",
"free": true
},
{
"title": "Python Automation Tutorial — freeCodeCamp",
"url": "https://www.freecodecamp.org/news/python-automation-scripts/",
"type": "article",
"free": true
},
{
"title": "Real Python — Task Automation",
"url": "https://realpython.com/tutorials/automation/",
"type": "article",
"free": true
},
{
"title": "Zapier — No-Code Automation",
"url": "https://zapier.com/",
"type": "docs",
"free": false
}
],
"tools": [
{
"name": "Claude Code",
"url": "https://docs.anthropic.com/en/docs/claude-code",
"description": "Describe your manual workflow and let AI write the automation script"
},
{
"name": "Cursor",
"url": "https://cursor.sh",
"description": "AI code editor — great for building and testing automation scripts"
},
{
"name": "Zapier",
"url": "https://zapier.com",
"description": "No-code automation for connecting apps — good starting point before Python"
}
],
"communities": [
{
"name": "r/automate",
"url": "https://reddit.com/r/automate",
"platform": "reddit"
},
{
"name": "r/learnpython",
"url": "https://reddit.com/r/learnpython",
"platform": "reddit"
},
{
"name": "Indie Hackers",
"url": "https://indiehackers.com",
"platform": "other"
}
],
"relatedSlugs": ["python", "for/marketers", "for/data-analysts"],
"lastUpdated": "2026-03-10"
}
Loading
Loading