YouTube Learning Channels

A static web app that displays a curated collection of educational YouTube channels for developers, with metadata fetched from the YouTube API.

Features

• Displays YouTube channels organized by categories and subcategories
• Fetches and displays channel metadata (description, thumbnail, subscriber count, video count)
• Responsive design with dark mode support
• Static site generation with Astro

Prerequisites

• Node.js (v16 or later)
• YouTube Data API key

Getting Started

1. Clone the repository:

   git clone <repository-url>
   cd youtube-learning-channels

2. Install dependencies:

   npm install

3. Create a .env file in the root directory and add your YouTube API key:

   YOUTUBE_API_KEY=your_api_key_here
   

4. Start the development server:

   npm run dev

5. Build for production:

   npm run build

Getting a YouTube API Key

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the YouTube Data API v3
4. Create credentials (API key)
5. Copy the API key and add it to your .env file

Project Structure

• src/components/ - Astro components
• src/pages/ - Astro pages
• src/utils/ - Utility functions
• src/types/ - TypeScript type definitions
• public/ - Static assets
• categorized_channels.md - Source data for channels

Contributing

Feel free to submit issues and enhancement requests!

pnpm create astro@latest -- --template basics

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

To learn more about the folder structure of an Astro project, refer to our guide on project structure.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm astro ...	Run CLI commands like astro add, astro check
pnpm astro -- --help	Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.