449 lines
15 KiB
TypeScript
449 lines
15 KiB
TypeScript
export interface CodeSnippet {
|
|
fileName: string;
|
|
language: string;
|
|
code: string;
|
|
description?: string;
|
|
}
|
|
|
|
export interface ResourceDownload {
|
|
title: string;
|
|
type: 'zip' | 'github' | 'pdf' | 'link';
|
|
url: string;
|
|
size?: string;
|
|
}
|
|
|
|
export interface VideoChapter {
|
|
time: string;
|
|
seconds: number;
|
|
title: string;
|
|
}
|
|
|
|
export interface VideoLesson {
|
|
id: string;
|
|
slug: string;
|
|
title: string;
|
|
youtubeId: string;
|
|
youtubeUrl: string;
|
|
thumbnailUrl: string;
|
|
duration: string;
|
|
publishDate: string;
|
|
category: string;
|
|
tags: string[];
|
|
viewsCount: number;
|
|
downloadCount: number;
|
|
likesCount: number;
|
|
summary: string;
|
|
notesMarkdown: string[];
|
|
codeSnippets: CodeSnippet[];
|
|
downloads: ResourceDownload[];
|
|
chapters: VideoChapter[];
|
|
isFeatured?: boolean;
|
|
}
|
|
|
|
export interface Cheatsheet {
|
|
id: string;
|
|
slug: string;
|
|
title: string;
|
|
category: string;
|
|
description: string;
|
|
tags: string[];
|
|
lastUpdated: string;
|
|
items: {
|
|
command: string;
|
|
description: string;
|
|
example?: string;
|
|
}[];
|
|
}
|
|
|
|
export const CATEGORIES = [
|
|
"Next.js",
|
|
"React",
|
|
"Python & AI",
|
|
"Tailwind CSS",
|
|
"Docker & DevOps",
|
|
"JavaScript"
|
|
];
|
|
|
|
export const MOCK_VIDEOS: VideoLesson[] = [
|
|
{
|
|
id: "vid-1",
|
|
slug: "nextjs-16-app-router-full-course",
|
|
title: "Next.js 16 App Router & Server Actions Complete Masterclass (Code & Project)",
|
|
youtubeId: "dQw4w9WgXcQ",
|
|
youtubeUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
|
thumbnailUrl: "https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?w=800&auto=format&fit=crop&q=80",
|
|
duration: "42:15",
|
|
publishDate: "2026-07-15",
|
|
category: "Next.js",
|
|
tags: ["Next.js 16", "App Router", "Server Actions", "TypeScript", "Tailwind CSS v4"],
|
|
viewsCount: 24500,
|
|
downloadCount: 4120,
|
|
likesCount: 1890,
|
|
isFeatured: true,
|
|
summary: "In this tutorial, we build a full-stack Next.js 16 application from scratch covering App Router architecture, proxy.ts middleware, Server Actions, and PostgreSQL integration.",
|
|
notesMarkdown: [
|
|
"📌 In Next.js 16, using `proxy.ts` is recommended over deprecated `middleware.ts`.",
|
|
"📌 Server Actions functions are declared with `'use server'` directive and can be invoked directly from client components.",
|
|
"📌 Data fetching revalidation uses `revalidatePath` or `revalidateTag` helpers.",
|
|
"📌 Form handling UX is significantly improved using `useActionState` and `useFormStatus` hooks."
|
|
],
|
|
codeSnippets: [
|
|
{
|
|
fileName: "app/actions.ts",
|
|
language: "typescript",
|
|
description: "Server Action function handling form submission",
|
|
code: `'use server'
|
|
|
|
import { revalidatePath } from 'next/cache';
|
|
|
|
export async function submitProjectIdea(formData: FormData) {
|
|
const title = formData.get('title') as string;
|
|
const description = formData.get('description') as string;
|
|
|
|
if (!title || title.length < 3) {
|
|
return { success: false, error: 'Title must be at least 3 characters long.' };
|
|
}
|
|
|
|
// Database insertion simulation
|
|
console.log('Saved Idea:', { title, description });
|
|
|
|
revalidatePath('/ideas');
|
|
return { success: true, message: 'Your idea was submitted successfully!' };
|
|
}`
|
|
},
|
|
{
|
|
fileName: "proxy.ts",
|
|
language: "typescript",
|
|
description: "Next.js 16 proxy configuration (middleware alternative)",
|
|
code: `import { NextRequest, NextResponse } from 'next/server';
|
|
import createMiddleware from 'next-intl/middleware';
|
|
import { routing } from '@/i18n/routing';
|
|
|
|
const intlMiddleware = createMiddleware(routing);
|
|
|
|
export async function proxy(request: NextRequest) {
|
|
// Admin route protection example
|
|
if (request.nextUrl.pathname.includes('/admin')) {
|
|
// Auth check logic
|
|
}
|
|
return intlMiddleware(request);
|
|
}
|
|
|
|
export const config = {
|
|
matcher: ['/((?!api|_next|_vercel|.*\\\\..*).*)']
|
|
};`
|
|
},
|
|
{
|
|
fileName: "components/IdeaForm.tsx",
|
|
language: "tsx",
|
|
description: "Client Form component using useActionState",
|
|
code: `'use client';
|
|
|
|
import { useActionState } from 'react';
|
|
import { submitProjectIdea } from '@/app/actions';
|
|
|
|
export function IdeaForm() {
|
|
const [state, formAction, isPending] = useActionState(submitProjectIdea, null);
|
|
|
|
return (
|
|
<form action={formAction} className="space-y-4 max-w-md p-6 bg-slate-900 rounded-xl border border-slate-800">
|
|
<h3 className="text-xl font-bold text-white">Add New Idea</h3>
|
|
|
|
<div>
|
|
<label className="block text-sm text-slate-400 mb-1">Idea Title</label>
|
|
<input name="title" required className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white" />
|
|
</div>
|
|
|
|
<button disabled={isPending} className="w-full py-2.5 bg-red-600 hover:bg-red-500 text-white rounded-lg font-medium">
|
|
{isPending ? 'Submitting...' : 'Share Idea'}
|
|
</button>
|
|
|
|
{state?.error && <p className="text-red-400 text-sm">{state.error}</p>}
|
|
{state?.success && <p className="text-emerald-400 text-sm">{state.message}</p>}
|
|
</form>
|
|
);
|
|
}`
|
|
}
|
|
],
|
|
downloads: [
|
|
{
|
|
title: "Full Project Source Code (Starter Pack)",
|
|
type: "zip",
|
|
url: "https://github.com/ayrisdev/nextjs-16-starter/archive/refs/heads/main.zip",
|
|
size: "4.2 MB"
|
|
},
|
|
{
|
|
title: "GitHub Repository",
|
|
type: "github",
|
|
url: "https://github.com/ayrisdev/nextjs-16-starter"
|
|
},
|
|
{
|
|
title: "Lesson Notes & Architecture (PDF Document)",
|
|
type: "pdf",
|
|
url: "#",
|
|
size: "1.8 MB"
|
|
}
|
|
],
|
|
chapters: [
|
|
{ time: "00:00", seconds: 0, title: "Introduction & Demo" },
|
|
{ time: "04:15", seconds: 255, title: "Next.js 16 Project Setup & Structure" },
|
|
{ time: "11:30", seconds: 690, title: "Routing & Middleware with proxy.ts" },
|
|
{ time: "21:00", seconds: 1260, title: "Form Handling via Server Actions" },
|
|
{ time: "32:45", seconds: 1965, title: "PostgreSQL & Prisma Integration" },
|
|
{ time: "40:00", seconds: 2400, title: "Deployment & Summary" }
|
|
]
|
|
},
|
|
{
|
|
id: "vid-2",
|
|
slug: "python-ai-agent-automation",
|
|
title: "Building Autonomous AI Agents with Python (CrewAI & Gemini API)",
|
|
youtubeId: "dQw4w9WgXcQ",
|
|
youtubeUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
|
thumbnailUrl: "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&auto=format&fit=crop&q=80",
|
|
duration: "28:50",
|
|
publishDate: "2026-07-10",
|
|
category: "Python & AI",
|
|
tags: ["Python", "CrewAI", "Gemini API", "AI Agents", "Automation"],
|
|
viewsCount: 18200,
|
|
downloadCount: 3200,
|
|
likesCount: 1450,
|
|
summary: "Build an autonomous AI agent in Python that crawls web data, summarizes tech news, and generates structured reports automatically.",
|
|
notesMarkdown: [
|
|
"🤖 AI agents are configured with role, goal, and backstory.",
|
|
"🤖 Equip agents with real-time web search using Serper API or Tavily.",
|
|
"🤖 Gemini 1.5 Flash provides high token throughput with minimal latency."
|
|
],
|
|
codeSnippets: [
|
|
{
|
|
fileName: "agent.py",
|
|
language: "python",
|
|
description: "CrewAI Agent Definition",
|
|
code: `from crewai import Agent, Task, Crew, Process
|
|
from langchain_google_genai import ChatGoogleGenerativeAI
|
|
import os
|
|
|
|
# Initialize Gemini LLM
|
|
llm = ChatGoogleGenerativeAI(
|
|
model="gemini-1.5-flash",
|
|
google_api_key=os.getenv("GEMINI_API_KEY")
|
|
)
|
|
|
|
# Researcher Agent
|
|
researcher = Agent(
|
|
role='Tech Researcher',
|
|
goal='Discover top AI trends from the past 24 hours',
|
|
backstory='You are an expert technology journalist following AI developments.',
|
|
verbose=True,
|
|
llm=llm
|
|
)
|
|
|
|
# Task Definition
|
|
task1 = Task(
|
|
description='Summarize 2026 AI trends in 5 bullet points.',
|
|
expected_output='A markdown list with 5 key takeaways.',
|
|
agent=researcher
|
|
)
|
|
|
|
crew = Crew(
|
|
agents=[researcher],
|
|
tasks=[task1],
|
|
process=Process.sequential
|
|
)
|
|
|
|
result = crew.kickoff()
|
|
print(result)`
|
|
}
|
|
],
|
|
downloads: [
|
|
{
|
|
title: "Python AI Agent Project Files",
|
|
type: "zip",
|
|
url: "#",
|
|
size: "2.1 MB"
|
|
},
|
|
{
|
|
title: "GitHub Repository",
|
|
type: "github",
|
|
url: "https://github.com/ayrisdev/python-ai-agent"
|
|
}
|
|
],
|
|
chapters: [
|
|
{ time: "00:00", seconds: 0, title: "Introduction & What is an AI Agent?" },
|
|
{ time: "05:20", seconds: 320, title: "Installing Dependencies (CrewAI & Gemini)" },
|
|
{ time: "14:10", seconds: 850, title: "Agent & Task Coding" },
|
|
{ time: "24:00", seconds: 1440, title: "Testing & Output Review" }
|
|
]
|
|
},
|
|
{
|
|
id: "vid-3",
|
|
slug: "tailwind-css-v4-tricks-and-setup",
|
|
title: "Modern UI Design with Tailwind CSS v4: Tricks, Themes & Components",
|
|
youtubeId: "dQw4w9WgXcQ",
|
|
youtubeUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
|
thumbnailUrl: "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?w=800&auto=format&fit=crop&q=80",
|
|
duration: "35:10",
|
|
publishDate: "2026-07-02",
|
|
category: "Tailwind CSS",
|
|
tags: ["Tailwind CSS v4", "OKLCH", "CSS Grid", "UI Design", "Shadcn"],
|
|
viewsCount: 31000,
|
|
downloadCount: 5400,
|
|
likesCount: 2600,
|
|
summary: "Learn CSS-first configuration in Tailwind CSS v4 using `@import \"tailwindcss\";`, OKLCH color spaces, and advanced glassmorphism component design.",
|
|
notesMarkdown: [
|
|
"🎨 In Tailwind v4, `@theme` directive in `globals.css` replaces `tailwind.config.js`.",
|
|
"🎨 OKLCH color space ensures consistent perceived contrast across light and dark modes.",
|
|
"🎨 `@custom-variant dark` provides flexible dark mode scoping."
|
|
],
|
|
codeSnippets: [
|
|
{
|
|
fileName: "globals.css",
|
|
language: "css",
|
|
description: "Tailwind CSS v4 Theme Configuration",
|
|
code: `@import "tailwindcss";
|
|
|
|
@theme inline {
|
|
--color-primary: oklch(0.65 0.22 260);
|
|
--color-accent: oklch(0.72 0.19 145);
|
|
--radius-lg: 1rem;
|
|
}
|
|
|
|
:root {
|
|
--background: oklch(0.98 0.01 250);
|
|
--foreground: oklch(0.15 0.02 250);
|
|
}`
|
|
}
|
|
],
|
|
downloads: [
|
|
{
|
|
title: "Tailwind v4 UI Starter Pack",
|
|
type: "zip",
|
|
url: "#",
|
|
size: "1.2 MB"
|
|
}
|
|
],
|
|
chapters: [
|
|
{ time: "00:00", seconds: 0, title: "What's New in Tailwind v4" },
|
|
{ time: "08:30", seconds: 510, title: "Defining Color Palettes with @theme" },
|
|
{ time: "20:15", seconds: 1215, title: "Building Glassmorphism Cards" }
|
|
]
|
|
},
|
|
{
|
|
id: "vid-4",
|
|
slug: "docker-container-nextjs-deploy",
|
|
title: "Deploying Next.js & PostgreSQL Applications using Docker & Coolify",
|
|
youtubeId: "dQw4w9WgXcQ",
|
|
youtubeUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
|
thumbnailUrl: "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=800&auto=format&fit=crop&q=80",
|
|
duration: "31:45",
|
|
publishDate: "2026-06-25",
|
|
category: "Docker & DevOps",
|
|
tags: ["Docker", "Docker Compose", "Coolify", "Next.js", "DevOps"],
|
|
viewsCount: 15400,
|
|
downloadCount: 2900,
|
|
likesCount: 1120,
|
|
summary: "Production-ready multi-stage Dockerfile and docker-compose setup to deploy Next.js applications seamlessly to VPS or Coolify.",
|
|
notesMarkdown: [
|
|
"🐳 Setting `output: 'standalone'` in Next.js reduces image size from 1GB to 120MB.",
|
|
"🐳 Define a dummy `DATABASE_URL` during Prisma generate step inside Dockerfile."
|
|
],
|
|
codeSnippets: [
|
|
{
|
|
fileName: "Dockerfile",
|
|
language: "dockerfile",
|
|
description: "Optimized Multi-stage Dockerfile",
|
|
code: `FROM node:20-alpine AS base
|
|
|
|
FROM base AS deps
|
|
WORKDIR /app
|
|
COPY package*.json ./
|
|
RUN npm ci
|
|
|
|
FROM base AS builder
|
|
WORKDIR /app
|
|
COPY --from=deps /app/node_modules ./node_modules
|
|
COPY . .
|
|
ENV NEXT_TELEMETRY_DISABLED=1
|
|
ENV DATABASE_URL="postgresql://dummy:dummy@localhost:5432/dummy"
|
|
RUN npx prisma generate
|
|
RUN npm run build
|
|
|
|
FROM base AS runner
|
|
WORKDIR /app
|
|
ENV NODE_ENV=production
|
|
ENV PORT=3000
|
|
|
|
COPY --from=builder /app/public ./public
|
|
COPY --from=builder /app/.next/standalone ./
|
|
COPY --from=builder /app/.next/static ./.next/static
|
|
|
|
EXPOSE 3000
|
|
CMD ["node", "server.js"]`
|
|
}
|
|
],
|
|
downloads: [
|
|
{
|
|
title: "Dockerfile & Docker Compose Template",
|
|
type: "zip",
|
|
url: "#",
|
|
size: "350 KB"
|
|
}
|
|
],
|
|
chapters: [
|
|
{ time: "00:00", seconds: 0, title: "Introduction" },
|
|
{ time: "06:00", seconds: 360, title: "Writing Multi-stage Dockerfile" },
|
|
{ time: "18:20", seconds: 1100, title: "Coolify & VPS Integration" }
|
|
]
|
|
}
|
|
];
|
|
|
|
export const MOCK_CHEATSHEETS: Cheatsheet[] = [
|
|
{
|
|
id: "cs-1",
|
|
slug: "git-komutlari-hizli-rehber",
|
|
title: "Essential Git & GitHub Commands Cheatsheet",
|
|
category: "DevOps & Tooling",
|
|
description: "Handy reference for daily Git workflow, branching, and conflict resolution commands.",
|
|
tags: ["Git", "GitHub", "Terminal"],
|
|
lastUpdated: "2026-07-20",
|
|
items: [
|
|
{ command: "git checkout -b feature/new-feature", description: "Creates a new branch and switches to it." },
|
|
{ command: "git status", description: "Lists modified and untracked files." },
|
|
{ command: "git commit -m 'feat: add new page'", description: "Saves changes with a descriptive commit message." },
|
|
{ command: "git push origin feature/new-feature", description: "Pushes the branch to remote repository." },
|
|
{ command: "git log --oneline -n 5", description: "Displays last 5 commits in clean single line format." }
|
|
]
|
|
},
|
|
{
|
|
id: "cs-2",
|
|
slug: "nextjs-app-router-cheatsheet",
|
|
title: "Next.js App Router File Structure & Route Handlers",
|
|
category: "Next.js",
|
|
description: "Special file conventions (page, layout, loading, error) and their responsibilities.",
|
|
tags: ["Next.js", "App Router", "React"],
|
|
lastUpdated: "2026-07-18",
|
|
items: [
|
|
{ command: "app/[locale]/page.tsx", description: "Main page component for the route." },
|
|
{ command: "app/layout.tsx", description: "Root layout component wrapping all pages." },
|
|
{ command: "app/loading.tsx", description: "Suspense fallback displayed while page loads." },
|
|
{ command: "app/error.tsx", description: "Client-side Error Boundary component." },
|
|
{ command: "app/api/route.ts", description: "REST API Endpoint handlers (GET, POST, PUT, DELETE)." }
|
|
]
|
|
},
|
|
{
|
|
id: "cs-3",
|
|
slug: "docker-temel-komutlar",
|
|
title: "Quick Docker & Container Command Reference",
|
|
category: "Docker & DevOps",
|
|
description: "Commands for building, running, inspecting logs, and cleaning container resources.",
|
|
tags: ["Docker", "Containers", "DevOps"],
|
|
lastUpdated: "2026-07-12",
|
|
items: [
|
|
{ command: "docker build -t app-name .", description: "Builds a Docker image from Dockerfile in current directory." },
|
|
{ command: "docker run -d -p 3000:3000 --name my-app app-name", description: "Runs container in detached mode with port forwarding." },
|
|
{ command: "docker compose up -d --build", description: "Rebuilds and launches Docker Compose services." },
|
|
{ command: "docker logs -f my-app", description: "Follows live container output logs." },
|
|
{ command: "docker system prune -af", description: "Removes all unused containers, networks, and images." }
|
|
]
|
|
}
|
|
];
|