🧠 LearnFlow

"Discover the best podcasts, videos, and articles to learn anything — personalized to your learning style."

LearnFlow is an AI-powered learning resource curation platform that uses Cloudflare Workers AI (Llama 3.3) to intelligently rank and recommend educational content from YouTube, Spotify, and NewsData.io based on your preferred learning style.

🎯 Overview

The Internet is overflowing with educational content, but finding high-quality, relevant resources is time-consuming. LearnFlow solves this by:

Searching multiple content sources simultaneously (YouTube videos, Spotify podcasts, articles)
AI-powered ranking using Llama 3.3 to identify the most valuable resources
Personalized recommendations tailored to your learning style (Visual 🎥, Listener 🎧, or Reader 📖)
Explainable AI - each recommendation includes a brief explanation of why it was recommended

✨ Features

Core Features

🔍 Topic Search - Search any subject you want to learn about
🎨 Learning Style Selection - Choose between Visual, Listener, or Reader preferences
🤖 AI-Powered Curation - Intelligent ranking using Cloudflare Workers AI (Llama 3.3)
💡 Explainable Recommendations - Each resource includes "Why this was recommended"
⭐ Favorites - Save resources to localStorage for later access
📱 Responsive Design - Works seamlessly on mobile and desktop

Technical Features

⚡ Edge Computing - Powered by Cloudflare Workers for global performance
🚀 Serverless Architecture - Fully serverless with Cloudflare Pages + Workers
🔒 Type-Safe - Built with TypeScript for better developer experience
🎨 Modern UI - Built with Next.js 14, Tailwind CSS, and responsive design

🏗️ Architecture

Frontend (Next.js + Tailwind)
│
├── /search → topic + style input
├── /favorites → localStorage bookmarks
│
└── Cloudflare Worker (Backend API)
     ├── Fetch YouTube videos
     ├── Fetch Spotify podcasts
     ├── Fetch NewsData.io articles
     ├── Merge + normalize JSON
     ├── Send to Workers AI (Llama 3.3) for reasoning
     └── Return top N recommendations

Deployment:

Frontend → Cloudflare Pages
Backend → Cloudflare Workers
Memory/State → Cloudflare KV (optional, for trending topics)

🛠️ Tech Stack

Frontend

Next.js 14 (App Router) - React framework with SSR
TypeScript - Type-safe development
Tailwind CSS - Utility-first styling
CSS Transitions - Native animations

Backend

Cloudflare Workers - Serverless edge functions
TypeScript - Type-safe backend code
Wrangler 3 - Development and deployment CLI

AI & APIs

Cloudflare Workers AI - Llama 3.3 8B Instruct model
YouTube Data API v3 - Video content
Spotify Web API - Podcast content
NewsData.io API - Article content

Storage

LocalStorage - Client-side favorites persistence
Cloudflare KV - Optional server-side state (trending topics)

📋 Prerequisites

Before you begin, ensure you have:

Node.js 18.x or later
npm or yarn package manager
Cloudflare account with Workers AI enabled
API Keys for:
- YouTube Data API v3
- Spotify Web API (Client ID and Secret)
- NewsData.io API

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/yourusername/cf_ai_learnflow.git
cd cf_ai_learnflow

2. Install Dependencies

Frontend

npm install
# or
yarn install

Backend (Worker)

cd worker
npm install
# or
yarn install

3. Set Up Environment Variables

Frontend (`.env.local`)

NEXT_PUBLIC_WORKER_URL=https://your-worker.your-subdomain.workers.dev

Backend (Worker - `wrangler.toml` or Cloudflare Dashboard)

[vars]
YOUTUBE_API_KEY=your_youtube_api_key
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
NEWSDATA_API_KEY=your_newsdata_api_key

Or set them in Cloudflare Dashboard:

Go to Workers & Pages → Your Worker → Settings → Variables
Add each variable as a secret

4. Get API Keys

YouTube Data API v3

Go to Google Cloud Console
Create a new project or select existing
Enable YouTube Data API v3
Create credentials (API Key)
Copy the API key

Spotify Web API

Go to Spotify Developer Dashboard
Create a new app
Copy Client ID and Client Secret
Note: You'll use Client Credentials flow for authentication

NewsData.io API

Go to NewsData.io
Sign up for a free account
Get your API key from the dashboard

5. Configure Cloudflare

Enable Workers AI

Log in to Cloudflare Dashboard
Go to Workers & Pages → AI
Enable Workers AI for your account
Note your Account ID (needed for wrangler.toml)

Update `wrangler.toml`

name = "learnflow-worker"
main = "src/index.ts"
compatibility_date = "2024-01-01"

account_id = "your-cloudflare-account-id"

[ai]
binding = "AI"

6. Run Development Servers

Frontend

npm run dev
# or
yarn dev

Open http://localhost:3000

Backend (Worker)

cd worker
npm run dev
# or
wrangler dev

📁 Project Structure

cf_ai_learnflow/
├── Docs/                      # Project documentation
│   ├── Implementation.md      # Implementation plan
│   ├── project_structure.md   # Project structure details
│   └── UI_UX_doc.md           # UI/UX guidelines
├── src/                       # Frontend source (Next.js)
│   ├── app/                   # App Router pages
│   ├── components/            # React components
│   ├── lib/                   # Utilities and helpers
│   └── hooks/                 # Custom React hooks
├── worker/                    # Cloudflare Worker backend
│   ├── src/
│   │   ├── index.ts           # Worker entry point
│   │   ├── api/               # API integration functions
│   │   └── ai/                # AI prompt templates
│   └── wrangler.toml          # Worker configuration
├── public/                    # Static assets
├── .env.example              # Example environment variables
├── README.md                 # This file
└── PROMPTS.md                # AI prompts documentation

For detailed structure, see Docs/project_structure.md

🚢 Deployment

Deploy Frontend to Cloudflare Pages

Via GitHub Integration (Recommended)
- Push your code to GitHub
- Go to Cloudflare Dashboard → Workers & Pages → Create Application
- Select Pages → Connect to Git
- Select your repository
- Build settings:
  - Framework preset: Next.js
  - Build command: npm run build
  - Build output directory: .next

Via Wrangler CLI

npm run build
npx wrangler pages deploy .next

Deploy Backend Worker

cd worker
npm run deploy
# or
wrangler publish

Set Environment Variables

Go to Cloudflare Dashboard → Workers & Pages → Your Worker
Settings → Variables and Secrets
Add all required API keys as secrets

🧪 Development

Available Scripts

Frontend

npm run dev - Start development server
npm run build - Build for production
npm run start - Start production server
npm run lint - Run ESLint

Backend (Worker)

npm run dev - Start local development server
npm run deploy - Deploy to Cloudflare
npm run type-check - Type check TypeScript

Development Workflow

Start both servers (frontend and worker)
Make changes to frontend or worker code
Test locally before deploying
Deploy worker first, then frontend
Update frontend env variable with worker URL if needed

Testing

Manual testing with various topics
Test all three learning styles
Verify favorites persistence
Test error scenarios
Cross-browser testing (Chrome, Firefox, Safari)

📚 Documentation

Implementation Plan - Detailed implementation stages
Project Structure - File organization
UI/UX Documentation - Design system and guidelines
PROMPTS.md - AI prompts used for ranking

🔗 Resources

Official Documentation

API Documentation

🎯 Success Criteria

✅ Deployed demo on Cloudflare Pages + Workers
✅ 5+ working recommendations per search
✅ Functional favorites persistence via localStorage
✅ README & PROMPTS files clear and complete
✅ All API integrations working correctly
✅ Responsive design works on mobile and desktop

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

This project is created for the Cloudflare AI application submission.

🙏 Acknowledgments

Built for Cloudflare's AI application challenge
Uses Cloudflare Workers AI with Meta's Llama 3.3 model
Powered by Cloudflare's edge network

📬 Contact

For questions or issues, please open an issue on GitHub.

Built with ❤️ using Cloudflare Workers AI

Name		Name	Last commit message	Last commit date
Latest commit History 77 Commits
.cursor		.cursor
Docs		Docs
public		public
src		src
worker		worker
.env.example		.env.example
.gitignore		.gitignore
LearnFlow_PRD.md		LearnFlow_PRD.md
README.md		README.md
architecture.md		architecture.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🧠 LearnFlow

🎯 Overview

✨ Features

Core Features

Technical Features

🏗️ Architecture

🛠️ Tech Stack

Frontend

Backend

AI & APIs

Storage

📋 Prerequisites

🚀 Getting Started

1. Clone the Repository

2. Install Dependencies

Frontend

Backend (Worker)

3. Set Up Environment Variables

Frontend (.env.local)

Backend (Worker - wrangler.toml or Cloudflare Dashboard)

4. Get API Keys

YouTube Data API v3

Spotify Web API

NewsData.io API

5. Configure Cloudflare

Enable Workers AI

Update wrangler.toml

6. Run Development Servers

Frontend

Backend (Worker)

📁 Project Structure

🚢 Deployment

Deploy Frontend to Cloudflare Pages

Deploy Backend Worker

Set Environment Variables

🧪 Development

Available Scripts

Frontend

Backend (Worker)

Development Workflow

Testing

📚 Documentation

🔗 Resources

Official Documentation

API Documentation

🎯 Success Criteria

🤝 Contributing

📝 License

🙏 Acknowledgments

📬 Contact

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Frontend (`.env.local`)

Backend (Worker - `wrangler.toml` or Cloudflare Dashboard)

Update `wrangler.toml`

Packages