[V0_FILE]typescriptreact:file="components/difficulty-badge.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" interface DifficultyBadgeProps { difficulty: "Easy" | "Medium" | "Hard" } export function DifficultyBadge({ difficulty }: DifficultyBadgeProps) { const variants = { Easy: "bg-green-100 text-green-800 hover:bg-green-100", Medium: "bg-yellow-100 text-yellow-800 hover:bg-yellow-100", Hard: "bg-red-100 text-red-800 hover:bg-red-100", } return ( {difficulty} ) } [V0_FILE]typescriptreact:file="components/code-block.tsx" isMerged="true" "use client" import { useState } from "react" import { Copy, Check } from "lucide-react" import { Button } from "@/components/ui/button" interface CodeBlockProps { content: string } export function CodeBlock({ content }: CodeBlockProps) { const [copiedCode, setCopiedCode] = useState(null) const copyToClipboard = async (code: string) => { try { await navigator.clipboard.writeText(code) setCopiedCode(code) setTimeout(() => setCopiedCode(null), 2000) } catch (err) { console.error("Failed to copy code:", err) } } // Parse markdown-like content const parseContent = (text: string) => { const parts = text.split(/```(\w+)?\n([\s\S]*?)```/g) const elements = [] for (let i = 0; i < parts.length; i++) { if (i % 3 === 0) { // Regular text content if (parts[i].trim()) { elements.push(

{parts[i].split("\n").map((line, lineIndex) => { if (line.startsWith("## ")) { return (

{line.replace("## ", "")}

) } if (line.startsWith("### ")) { return (

{line.replace("### ", "")}

) } if (line.trim() === "") { return
} // Handle inline code const processedLine = line.replace( /`([^`]+)`/g, '$1', ) return (

) })}

, ) } } else if (i % 3 === 1) { // Language identifier (skip) continue } else { // Code block content const language = parts[i - 1] || "text" const code = parts[i].trim() if (code) { elements.push(

{language}

                {code}

, ) } } } return elements } return

{parseContent(content)}

} [V0_FILE]typescriptreact:file="app/blog/[slug]/layout.tsx" isMerged="true" import type React from "react" export default function BlogPostLayout({ children, }: { children: React.ReactNode }) { return children } [V0_FILE]typescriptreact:file="components/blog-header.tsx" isEdit="true" isMerged="true" import { Search, Filter } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { ThemeToggle } from "@/components/theme-toggle" export function BlogHeader() { return (

Algorithm Mastery

All Posts Arrays & Strings Trees & Graphs Dynamic Programming Sorting & Searching

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Playfair_Display, Source_Sans_3 } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" const playfairDisplay = Playfair_Display({ subsets: ["latin"], display: "swap", variable: "--font-playfair", }) const sourceSans = Source_Sans_3({ subsets: ["latin"], display: "swap", variable: "--font-source-sans", }) export const metadata: Metadata = { title: "Algorithm Mastery Blog", description: "Master algorithms and data structures with expert problem-solving insights", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { useTheme } from "@/components/theme-provider" export function ThemeToggle() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } return ( ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match algorithm blog design brief */ /* YouTube light theme colors */ --background: oklch(1 0 0); /* Pure white like YouTube */ --foreground: oklch(0.15 0 0); /* Dark text like YouTube */ --card: oklch(1 0 0); /* White cards */ --card-foreground: oklch(0.15 0 0); /* Dark text on cards */ --popover: oklch(1 0 0); /* White popover */ --popover-foreground: oklch(0.15 0 0); /* Dark text on popover */ --primary: oklch(0.55 0.22 25); /* YouTube red #ff0000 */ --primary-foreground: oklch(1 0 0); /* White text on red */ --secondary: oklch(0.96 0.005 240); /* Light gray like YouTube sidebar */ --secondary-foreground: oklch(0.15 0 0); /* Dark text on light gray */ --muted: oklch(0.96 0.005 240); /* Light gray backgrounds */ --muted-foreground: oklch(0.45 0.01 240); /* Muted text */ --accent: oklch(0.55 0.22 25); /* YouTube red accent */ --accent-foreground: oklch(1 0 0); /* White text on red accent */ --destructive: oklch(0.55 0.22 25); /* YouTube red for destructive actions */ --destructive-foreground: oklch(1 0 0); /* White text */ --border: oklch(0.9 0.005 240); /* Light gray borders */ --input: oklch(1 0 0); /* White inputs */ --ring: oklch(0.55 0.22 25 / 0.3); /* YouTube red focus ring */ --chart-1: oklch(0.55 0.22 25); /* YouTube red */ --chart-2: oklch(0.45 0.01 240); /* Dark gray */ --chart-3: oklch(0.65 0.15 45); /* Orange accent */ --chart-4: oklch(0.55 0.15 160); /* Green accent */ --chart-5: oklch(0.6 0.2 250); /* Blue accent */ --radius: 0.5rem; /* Corner rounding for cards */ --sidebar: oklch(0.96 0.005 240); /* Light gray sidebar */ --sidebar-foreground: oklch(0.15 0 0); /* Dark text */ --sidebar-primary: oklch(0.55 0.22 25); /* YouTube red */ --sidebar-primary-foreground: oklch(1 0 0); /* White text */ --sidebar-accent: oklch(0.9 0.005 240); /* Lighter gray accent */ --sidebar-accent-foreground: oklch(0.15 0 0); /* Dark text */ --sidebar-border: oklch(0.9 0.005 240); /* Light gray border */ --sidebar-ring: oklch(0.55 0.22 25 / 0.3); /* YouTube red focus ring */ } .dark { --background: oklch(0.08 0 0); /* Netflix dark background #141414 */ --foreground: oklch(0.95 0 0); /* Light text like Netflix */ --card: oklch(0.12 0 0); /* Slightly lighter dark for cards */ --card-foreground: oklch(0.95 0 0); /* Light text on cards */ --popover: oklch(0.12 0 0); /* Dark popover */ --popover-foreground: oklch(0.95 0 0); /* Light text on popover */ --primary: oklch(0.55 0.22 25); /* Netflix red #e50914 */ --primary-foreground: oklch(1 0 0); /* White text on red */ --secondary: oklch(0.15 0 0); /* Dark gray like Netflix UI */ --secondary-foreground: oklch(0.95 0 0); /* Light text */ --muted: oklch(0.15 0 0); /* Dark muted backgrounds */ --muted-foreground: oklch(0.65 0 0); /* Muted light text */ --accent: oklch(0.55 0.22 25); /* Netflix red accent */ --accent-foreground: oklch(1 0 0); /* White text on red accent */ --destructive: oklch(0.55 0.22 25); /* Netflix red for destructive */ --destructive-foreground: oklch(1 0 0); /* White text */ /* Increased border contrast for better visibility in dark mode */ --border: oklch(0.3 0 0); /* Lighter dark borders for better contrast */ --input: oklch(0.15 0 0); /* Dark inputs */ --ring: oklch(0.55 0.22 25 / 0.5); /* Netflix red focus ring */ --chart-1: oklch(0.55 0.22 25); /* Netflix red */ --chart-2: oklch(0.65 0 0); /* Light gray */ --chart-3: oklch(0.769 0.188 70.08); /* Orange */ --chart-4: oklch(0.627 0.265 303.9); /* Purple */ --chart-5: oklch(0.645 0.246 16.439); /* Yellow */ --sidebar: oklch(0.1 0 0); /* Very dark sidebar */ --sidebar-foreground: oklch(0.95 0 0); /* Light text */ --sidebar-primary: oklch(0.55 0.22 25); /* Netflix red */ --sidebar-primary-foreground: oklch(1 0 0); /* White text */ --sidebar-accent: oklch(0.15 0 0); /* Dark accent */ --sidebar-accent-foreground: oklch(0.95 0 0); /* Light text */ /* Increased sidebar border contrast for consistency */ --sidebar-border: oklch(0.3 0 0); /* Lighter dark border for consistency */ --sidebar-ring: oklch(0.55 0.22 25 / 0.5); /* Netflix red focus ring */ } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/pagination.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight } from "lucide-react" interface PaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) { const getVisiblePages = () => { const delta = 2 const range = [] const rangeWithDots = [] for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) { range.push(i) } if (currentPage - delta > 2) { rangeWithDots.push(1, "...") } else { rangeWithDots.push(1) } rangeWithDots.push(...range) if (currentPage + delta < totalPages - 1) { rangeWithDots.push("...", totalPages) } else if (totalPages > 1) { rangeWithDots.push(totalPages) } return rangeWithDots } if (totalPages <= 1) return null return (

{getVisiblePages().map((page, index) => (

{page === "..." ? ( ... ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { BlogHeader } from "@/components/blog-header" import { BlogPostCard } from "@/components/blog-post-card" import { Pagination } from "@/components/pagination" const blogPosts = [ { id: "1", title: "Mastering Two Pointers: Solving Array Problems Efficiently", summary: "Learn the two-pointer technique to solve array and string problems with optimal time complexity. We'll explore classic problems like finding pairs, removing duplicates, and palindrome validation.", difficulty: "Easy" as const, category: "Arrays & Strings", tags: ["Two Pointers", "Arrays", "Optimization"], readTime: "8 min read", publishedAt: "2024-01-15", }, { id: "2", title: "Dynamic Programming: From Recursion to Memoization", summary: "Understand how to transform recursive solutions into efficient dynamic programming algorithms. We'll cover the Fibonacci sequence, coin change, and longest common subsequence problems.", difficulty: "Medium" as const, category: "Dynamic Programming", tags: ["DP", "Memoization", "Recursion"], readTime: "12 min read", publishedAt: "2024-01-12", }, { id: "3", title: "Graph Traversal: BFS vs DFS Deep Dive", summary: "Compare breadth-first search and depth-first search algorithms with practical implementations. Learn when to use each approach and solve real-world graph problems.", difficulty: "Medium" as const, category: "Trees & Graphs", tags: ["BFS", "DFS", "Graph Theory"], readTime: "10 min read", publishedAt: "2024-01-10", }, { id: "4", title: "Advanced Tree Algorithms: Segment Trees and Fenwick Trees", summary: "Dive into advanced tree data structures for range queries and updates. Perfect for competitive programming and handling large datasets efficiently.", difficulty: "Hard" as const, category: "Trees & Graphs", tags: ["Segment Tree", "Fenwick Tree", "Range Queries"], readTime: "15 min read", publishedAt: "2024-01-08", }, { id: "5", title: "Binary Search: Beyond Finding Elements", summary: "Explore advanced binary search applications including finding boundaries, searching in rotated arrays, and solving optimization problems with binary search on answers.", difficulty: "Medium" as const, category: "Sorting & Searching", tags: ["Binary Search", "Optimization", "Problem Solving"], readTime: "9 min read", publishedAt: "2024-01-05", }, { id: "6", title: "Sliding Window Technique: Maximum Efficiency", summary: "Master the sliding window pattern for solving substring and subarray problems. Learn fixed-size and variable-size window approaches with practical examples.", difficulty: "Easy" as const, category: "Arrays & Strings", tags: ["Sliding Window", "Subarray", "Optimization"], readTime: "7 min read", publishedAt: "2024-01-03", }, { id: "7", title: "Heap Data Structure: Priority Queues in Action", summary: "Learn how to implement and use heaps for solving priority-based problems. Cover min-heap, max-heap, and their applications in algorithms like Dijkstra's shortest path.", difficulty: "Medium" as const, category: "Data Structures", tags: ["Heap", "Priority Queue", "Graph Algorithms"], readTime: "11 min read", publishedAt: "2024-01-01", }, { id: "8", title: "Backtracking: Exploring All Possibilities", summary: "Master the backtracking technique for solving constraint satisfaction problems. Learn to generate permutations, combinations, and solve N-Queens problem.", difficulty: "Hard" as const, category: "Recursion & Backtracking", tags: ["Backtracking", "Recursion", "Constraint Satisfaction"], readTime: "13 min read", publishedAt: "2023-12-28", }, { id: "9", title: "Trie Data Structure: Efficient String Operations", summary: "Implement and use Trie (prefix tree) for efficient string searching, auto-completion, and word validation. Perfect for building search engines and spell checkers.", difficulty: "Medium" as const, category: "Data Structures", tags: ["Trie", "String Processing", "Search"], readTime: "10 min read", publishedAt: "2023-12-25", }, { id: "10", title: "Union-Find: Disjoint Set Operations", summary: "Learn the Union-Find data structure for efficiently handling disjoint sets. Essential for solving connectivity problems and implementing Kruskal's algorithm.", difficulty: "Medium" as const, category: "Data Structures", tags: ["Union-Find", "Disjoint Sets", "Graph Connectivity"], readTime: "9 min read", publishedAt: "2023-12-22", }, ] const POSTS_PER_PAGE = 6 export default function BlogPage() { const [currentPage, setCurrentPage] = useState(1) const totalPages = Math.ceil(blogPosts.length / POSTS_PER_PAGE) const startIndex = (currentPage - 1) * POSTS_PER_PAGE const endIndex = startIndex + POSTS_PER_PAGE const currentPosts = blogPosts.slice(startIndex, endIndex) const handlePageChange = (page: number) => { setCurrentPage(page) // Scroll to top when page changes window.scrollTo({ top: 0, behavior: "smooth" }) } return (

Latest Algorithm Insights

Enhance your problem-solving skills with expert tutorials and in-depth algorithm analysis

{currentPosts.map((post) => ( ))}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" type Theme = "light" | "dark" interface ThemeContextType { theme: Theme setTheme: (theme: Theme) => void } const ThemeContext = createContext({ theme: "light", setTheme: () => {}, }) export function useTheme() { return useContext(ThemeContext) } interface ThemeProviderProps { children: React.ReactNode attribute?: string defaultTheme?: Theme enableSystem?: boolean disableTransitionOnChange?: boolean } export function ThemeProvider({ children, defaultTheme = "light" }: ThemeProviderProps) { const [theme, setThemeState] = useState(defaultTheme) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const savedTheme = localStorage.getItem("theme") as Theme | null const initialTheme = savedTheme || defaultTheme setThemeState(initialTheme) document.documentElement.classList.toggle("dark", initialTheme === "dark") }, [defaultTheme]) const setTheme = (newTheme: Theme) => { setThemeState(newTheme) localStorage.setItem("theme", newTheme) document.documentElement.classList.toggle("dark", newTheme === "dark") } const contextValue = { theme, setTheme } return {children} } [V0_FILE]typescriptreact:file="components/blog-post-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { DifficultyBadge } from "./difficulty-badge" import { Clock } from "lucide-react" interface BlogPost { id: string title: string summary: string difficulty: "Easy" | "Medium" | "Hard" category: string tags: string[] readTime: string publishedAt: string } interface BlogPostCardProps { post: BlogPost } export function BlogPostCard({ post }: BlogPostCardProps) { return (

{post.title}

{/* Apply orange styling to all categories */} {post.category} {post.tags.slice(0, 2).map((tag) => ( {tag} ))}

{post.summary}

{post.readTime}

) } [V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isEdit="true" isQuickEdit="true" import { ArrowLeft, Calendar, Clock, User } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { DifficultyBadge } from "@/components/difficulty-badge" import { CodeBlock } from "@/components/code-block" import { BlogHeader } from "@/components/blog-header" // Sample blog post data - in a real app, this would come from a CMS or database const blogPost = { id: "two-pointers-technique", title: "Mastering Two Pointers: Solving Array Problems Efficiently", content: ` The two-pointer technique is one of the most elegant and efficient approaches for solving array and string problems. This pattern involves using two pointers that traverse the data structure in a coordinated manner, often leading to optimal O(n) time complexity solutions. ## Understanding the Two-Pointer Pattern The two-pointer technique works by maintaining two references (pointers) to elements in an array or string. These pointers can move: - **Towards each other** (convergent approach) - **In the same direction** (sliding window approach) - **At different speeds** (fast and slow pointers) ## Classic Problem: Two Sum in Sorted Array Let's start with a fundamental example. Given a sorted array and a target sum, find two numbers that add up to the target. \`\`\`python def two_sum_sorted(nums, target): """ Find two numbers in a sorted array that sum to target. Time: O(n), Space: O(1) """ left, right = 0, len(nums) - 1 while left < right: current_sum = nums[left] + nums[right] if current_sum == target: return [left, right] elif current_sum < target: left += 1 # Need larger sum else: right -= 1 # Need smaller sum return [] # No solution found # Example usage nums = [2, 7, 11, 15] target = 9 result = two_sum_sorted(nums, target) print(f"Indices: {result}") # Output: [0, 1] \`\`\` The beauty of this approach lies in its simplicity and efficiency. By leveraging the sorted property, we can make intelligent decisions about which pointer to move. ## Advanced Example: Container With Most Water Here's a more complex problem that demonstrates the power of two pointers: \`\`\`javascript function maxArea(height) { /** * Find the container that can hold the most water * Time: O(n), Space: O(1) */ let left = 0; let right = height.length - 1; let maxWater = 0; while (left < right) { // Calculate current area const width = right - left; const currentHeight = Math.min(height[left], height[right]); const currentArea = width * currentHeight; maxWater = Math.max(maxWater, currentArea); // Move the pointer with smaller height if (height[left] < height[right]) { left++; } else { right--; } } return maxWater; } // Example const heights = [1, 8, 6, 2, 5, 4, 8, 3, 7]; console.log(maxArea(heights)); // Output: 49 \`\`\` ## Key Insights and Best Practices ### When to Use Two Pointers 1. **Sorted arrays or strings** - The sorted property enables intelligent pointer movement 2. **Finding pairs or triplets** - Especially when looking for specific sums 3. **Palindrome problems** - Compare characters from both ends 4. **Removing duplicates** - Maintain unique elements efficiently ### Common Patterns \`\`\`cpp // Pattern 1: Convergent pointers int left = 0, right = n - 1; while (left < right) { // Process current pair if (condition) { left++; } else { right--; } } // Pattern 2: Same direction (sliding window) int slow = 0, fast = 0; while (fast < n) { // Expand window fast++; // Contract window if needed while (window_invalid) { slow++; } } \`\`\` ## Time and Space Complexity The two-pointer technique typically achieves: - **Time Complexity**: O(n) - single pass through the data - **Space Complexity**: O(1) - only using two pointer variables This is a significant improvement over brute force O(n²) approaches that check all pairs. ## Practice Problems To master this technique, try solving these problems: 1. **Remove Duplicates from Sorted Array** 2. **Valid Palindrome** 3. **3Sum Problem** 4. **Trapping Rain Water** 5. **Sort Colors (Dutch National Flag)** Each problem will help you recognize different variations of the two-pointer pattern and build your intuition for when to apply this technique. ## Conclusion The two-pointer technique is a fundamental algorithmic pattern that every programmer should master. Its elegance lies in transforming complex O(n²) problems into efficient O(n) solutions through clever pointer manipulation. Practice with various problems to develop the intuition for recognizing when this pattern applies. `, difficulty: "Easy" as const, category: "Arrays & Strings", tags: ["Two Pointers", "Arrays", "Optimization"], author: "Sarah Chen", readTime: "8 min read", publishedAt: "2024-01-15", } export default function BlogPostPage() { return (

{/* Header with back navigation */} {/* Back navigation bar */}

{/* Article content */}

{/* Article header */}

{/* Apply orange styling to all categories */} {blogPost.category} {blogPost.tags.map((tag) => ( {tag} ))}

{blogPost.title}

{blogPost.author}

{new Date(blogPost.publishedAt).toLocaleDateString()}

{blogPost.readTime}

{/* Article body */}

{/* Article footer */}

) }