This is a replica of one of my old project "the media_down wizard project" where I used antD (ant Design) with styled components, rebuilt with:

• Next.js - React framework
• shadcn/ui - UI component library
• Tailwind CSS - Styling
• React - UI library
• TypeScript - Type safety

First, install dependencies:

npm install

Set up your YouTube API key (see YouTube Data API Overview):

# Create .env.local file
echo "YOUTUBE_API_KEY=your_api_key_here" > .env.local

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

This project uses a modern, type-safe architecture:

• Next.js 15 - React framework with App Router
• shadcn/ui - UI component library
• Tailwind CSS - Styling
• React Query (TanStack Query) - Data fetching and caching
• TypeScript - Type safety

The functionality is a bit meh... because my main goal is to focus on architecture, types, and UI with this stack rather than feature depth. Might consider that later...

• Next.js Route Handlers handle server-side API routes (/app/api/youtube/*)
  • Keep YouTube API keys secure on the server
  • Handle error responses
• React Query manages client-side data fetching
  • Automatic caching and refetching
  • Loading and error states
  • Optimistic updates support
• Native Fetch (no axios needed)
  • Built-in, no extra dependencies
  • Works perfectly with React Query

1. Security: API keys stay server-side (API route handlers)
2. Performance: React Query caches responses automatically
3. Developer Experience: Better loading/error handling
4. Simplicity: No axios needed - fetch is sufficient

• YouTube video search
• YouTube video information retrieval
• YouTube comments fetching
• Video ID extraction from URLs
• YouTube video downloader (requires backend service like yt-dlp)
• AI comment generator (requires AI service integration)

• GET /api/youtube/search?q=query - Search YouTube videos
• GET /api/youtube/video?videoId=ID - Get video information
• GET /api/youtube/comments?videoId=ID - Get video comments

app/
  api/youtube/        # API routes for YouTube
  downloader/         # Downloader page
  comment-generator/  # Comment generator page
  search/             # Search page
lib/
  api/                # API client functions
  hooks/              # React Query hooks
  providers.tsx       # React Query provider
components/ui/        # shadcn/ui components