Awesome Video Resource Viewer

A production-ready React application for browsing and discovering 2,600+ curated video development resources. Features AI-powered recommendations, admin curation tools, GitHub synchronization, and awesome-lint compliant exports.

If you find this project useful, please ⭐ star this repository!

Features

For Users

• Resource Discovery: Browse 2,600+ curated video development resources
• Advanced Search: Fuzzy search with keyboard shortcut (⌘K)
• 3-Level Navigation: Categories → Subcategories → Sub-subcategories
• Learning Journeys: Guided learning paths for skill development
• Bookmarks & Favorites: Save resources for later
• Mobile-Optimized: Responsive design with WCAG AAA touch targets
• Dark Theme: Pure black cyberpunk aesthetic

For Administrators

• Resource Curation: Approve/reject submissions, edit resources
• Edit Suggestion Queue: Review and merge community contributions
• GitHub Sync: Import from and export to awesome-list repositories
• AI Enrichment: Batch metadata extraction using Claude AI
• Validation: awesome-lint compliance checking and link verification
• Audit Trail: Complete history of all changes

Screenshots

Home Page & Search Interface

Browse 2,600+ resources with advanced fuzzy search (⌘K keyboard shortcut)

Category Navigation

Navigate through the complete 3-level category hierarchy

Learning Journeys

Follow curated learning paths with progress tracking

Admin Dashboard

Manage resources, review submissions, and curate content

Mobile View

Fully responsive design optimized for mobile devices

Technology Stack

Layer	Technologies
Frontend	React 18, TypeScript, Vite, TanStack Query, Wouter
UI	Tailwind CSS, shadcn/ui, Lucide icons
Backend	Express.js, TypeScript, Drizzle ORM
Database	PostgreSQL (Neon-backed)
AI	Anthropic Claude API
Auth	Replit OAuth, local email/password

Quick Start

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Open in browser
# http://localhost:5000

Production

# Build for production
npm run build

# Start production server
npm run start

Documentation

Document	Description
SETUP.md	Development environment setup
ENVIRONMENT_VARIABLES.md	Environment variables reference
ARCHITECTURE.md	System architecture and design
API.md	Complete API reference
API Documentation	Interactive OpenAPI documentation
ADMIN-GUIDE.md	Administrator documentation
CODE-MAP.md	Codebase navigation guide
CONTRIBUTING.md	Contribution guidelines

Project Structure

├── client/src/           # React frontend
│   ├── components/       # Reusable UI components
│   ├── pages/            # Route pages (17 pages)
│   ├── hooks/            # Custom React hooks
│   └── lib/              # Utilities
├── server/               # Express backend
│   ├── ai/               # AI services (Claude, enrichment)
│   ├── github/           # GitHub sync integration
│   ├── validation/       # awesome-lint, link checking
│   ├── routes.ts         # API endpoints (75+ routes)
│   └── storage.ts        # Database layer
├── shared/               # Shared types and schemas
│   └── schema.ts         # Drizzle schema, Zod validation
├── scripts/              # Utility scripts
└── docs/                 # Documentation

Key Features

GitHub Sync

Import resources from any awesome-list repository:

POST /api/admin/import-github
{ "repoUrl": "https://raw.githubusercontent.com/user/repo/main/README.md" }

Export to awesome-lint compliant markdown:

POST /api/admin/export

AI Enrichment

Automatically enhance resources with:

• Page metadata (title, description, OG images)
• AI-generated tags and categorization
• Favicon extraction

awesome-lint Compliance

Exports pass all awesome-lint rules except:

• awesome-contributing: Requires CONTRIBUTING.md in repo
• awesome-github: Requires git repository

Environment Variables

This project requires several environment variables to run. See ENVIRONMENT_VARIABLES.md for:

• Complete list of required and optional variables
• Detailed descriptions and configuration examples
• Platform-specific setup instructions
• Security best practices

Admin Access

Create an admin user:

npx tsx scripts/reset-admin-password.ts

Access admin panel at /admin after login.

API Overview

Category	Endpoints
Resources	CRUD, search, filtering
Categories	3-level hierarchy management
Auth	OAuth, local, session management
Admin	User management, curation, audit
GitHub	Import, export, sync queue
AI	Claude analysis, batch enrichment
Validation	awesome-lint, link checking

See API.md for complete reference.

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT License

Acknowledgments

• Data sourced from krzemienski/awesome-video
• Built with shadcn/ui components
• AI powered by Anthropic Claude
• Deployed on Replit