You are an expert AI assistant tasked with generating a single-page Server-Side Rendering (SSR) React application using Next.js and Tailwind CSS for a platform called 'Konteyner Krallığı'. This platform aims to educate users about the evolution and practical usage of container technologies, particularly Docker, based on the insights from a Hacker News article discussing 'A decade of Docker containers'. The goal is to provide an interactive learning experience and a useful set of developer tools.
## PROJECT OVERVIEW:
The application, 'Konteyner Krallığı' (Kingdom of Containers), addresses the need for accessible and practical knowledge about containerization. It provides a curated learning path, from the historical context of Docker's rise to hands-on usage, including essential commands and project templates. The core value proposition is to simplify the learning curve for developers and IT professionals interacting with container technologies, offering a blend of educational content and practical tools in a single, streamlined interface.
## TECH STACK:
* **Framework:** Next.js (for SSR and performance benefits)
* **Language:** TypeScript
* **Styling:** Tailwind CSS (with configuration for easy customization)
* **State Management:** React Context API (for global state like theme or user settings) and local component state (useState, useReducer).
* **Routing:** Next.js built-in routing.
* **UI Components:** Custom built components using Tailwind CSS. No heavy third-party UI libraries to ensure a lean build and unique design.
* **Icons:** Heroicons or a similar lightweight SVG icon library.
* **Utilities:** `clsx` or similar for conditional class name manipulation.
## CORE FEATURES:
1. **Interactive Timeline (History of Containers):**
* **User Flow:** Upon landing, the user sees a visually engaging timeline highlighting key milestones in Docker's decade-long journey. Clicking on a milestone reveals a brief description and potentially links to relevant resources. This section is inspired by the provided Hacker News article.
* **Details:** A horizontally scrollable or vertically expanding timeline component. Each point should have a date, a title, and a short descriptive text. It should be responsive and accessible.
2. **Learning Modules (Core Concepts):**
* **User Flow:** Users can navigate to the 'Learn' section. They are presented with a list of modules (e.g., 'Dockerfile Basics', 'Image Management', 'Container Networking', 'Volume Mounting'). Clicking a module opens a dedicated page or modal with text, diagrams, and potentially short embedded videos or interactive code examples.
* **Details:** Each module page should be clearly structured with headings, paragraphs, code blocks (syntax highlighted), and illustrative graphics. Navigation between modules should be intuitive.
3. **Command Library (Practical Tools):**
* **User Flow:** Users access the 'Commands' section. They can browse commands by category or search for a specific command. Each command entry shows the command syntax, a clear explanation, example usage, and a 'Copy to Clipboard' button.
* **Details:** A searchable and filterable list of common Docker commands. Each command should be presented in a clean card format. The 'Copy to Clipboard' functionality should provide visual feedback (e.g., a tooltip confirming the copy action).
4. **Project Templates (Quick Start):**
* **User Flow:** In the 'Templates' section, users can find pre-configured Dockerfile and `docker-compose.yml` files for popular stacks (e.g., Node.js/Express, Python/Flask, Basic Static Site). They can view the file contents and copy them.
* **Details:** Template cards display the stack name and a brief description. Clicking expands to show the content of `Dockerfile` and `docker-compose.yml` with syntax highlighting and copy buttons for each file.
## UI/UX DESIGN:
* **Layout:** A clean, modern, single-page application feel, even with Next.js routing. A persistent navigation sidebar or top navigation bar for easy access to sections (Timeline, Learn, Commands, Templates). Main content area will display the selected section.
* **Color Palette:** Primary: Dark blue/charcoal (#1a202c). Secondary: A vibrant accent color like teal or cyan (#00bcd4 or #4fd1c5) for interactive elements and highlights. Neutral: Grays for text and backgrounds (#f7fafc, #edf2f7, #a0aec0).
* **Typography:** Sans-serif fonts for readability. Use Tailwind's default font stack or a similar clean font like Inter or Poppins. Establish a clear hierarchy with distinct heading sizes (h1, h2, h3) and body text.
* **Responsive Design:** Mobile-first approach. Ensure usability across all device sizes. Navigation should adapt (e.g., hamburger menu on mobile). Content should reflow gracefully. Use Tailwind's responsive modifiers (sm:, md:, lg:).
* **Visual Theme:** A subtle, tech-focused aesthetic. Perhaps abstract background patterns or clean line graphics related to networking or containers.
## COMPONENT BREAKDOWN:
* **`Layout.tsx`:** Main layout component. Includes Header, Navigation, Footer. Manages overall page structure and potentially theme switching.
* Props: `children` (ReactNode)
* **`Header.tsx`:** Application title/logo and possibly global actions.
* Props: None
* **`Navigation.tsx`:** Sidebar or top navigation menu. Links to different sections.
* Props: `currentPath` (string)
* **`TimelineSection.tsx`:** Container for the interactive timeline feature.
* Props: `timelineData` (Array<TimelineEvent>)
* **`TimelineEvent.tsx`:** Renders a single milestone on the timeline.
* Props: `event` (TimelineEvent), `isActive` (boolean), `onClick` (function)
* **`LearningSection.tsx`:** Displays the list of learning modules.
* Props: `modules` (Array<Module>)
* **`ModuleCard.tsx`:** Renders a single learning module card.
* Props: `module` (Module), `onClick` (function)
* **`ModuleView.tsx`:** Displays the content of a selected learning module.
* Props: `module` (Module)
* **`CommandLibrarySection.tsx`:** Container for the command search and display.
* Props: `commands` (Array<Command>)
* **`CommandCard.tsx`:** Renders a single command entry.
* Props: `command` (Command)
* **`SearchInput.tsx`:** Generic search input component.
* Props: `placeholder` (string), `onChange` (function)
* **`CopyButton.tsx`:** Reusable button to copy text to clipboard.
* Props: `textToCopy` (string), `tooltipText` (string)
* **`TemplatesSection.tsx`:** Displays available project templates.
* Props: `templates` (Array<Template>)
* **`TemplateCard.tsx`:** Renders a single template card.
* Props: `template` (Template), `onSelect` (function)
* **`CodeViewer.tsx`:** Displays code blocks with syntax highlighting and copy functionality.
* Props: `code` (string), `language` (string)
## DATA MODEL:
* **`TimelineEvent` Interface:**
```typescript
interface TimelineEvent {
id: string;
date: string; // e.g., '2013'
title: string;
description: string;
imageUrl?: string;
}
```
* **`Module` Interface:**
```typescript
interface Module {
id: string;
title: string;
slug: string;
shortDescription: string;
content: string; // HTML or Markdown string
relatedCommands?: string[]; // IDs or slugs
}
```
* **`Command` Interface:**
```typescript
interface Command {
id: string;
name: string;
syntax: string;
description: string;
example: string;
category: string;
}
```
* **`Template` Interface:**
```typescript
interface Template {
id: string;
name: string;
description: string;
dockerfile: string;
dockerCompose: string;
language: string;
}
```
* **State Management:** Use `useState` for local component state (e.g., input values, modal visibility). Use `useContext` for global state like theme or potentially fetched data that needs to be shared across many components (though for a SPA, passing props down or using libraries like Zustand/Jotai might be considered for larger apps, but Context API is sufficient for MVP).
## ANIMATIONS & INTERACTIONS:
* **Page Transitions:** Subtle fade-in/fade-out transitions between sections using Next.js `useRouter` and a transition library like `Framer Motion` or a simple CSS approach.
* **Hover Effects:** Buttons and interactive cards should have subtle hover effects (e.g., slight scale-up, background color change, shadow increase).
* **Copy Button Feedback:** When the 'Copy to Clipboard' button is clicked, provide immediate visual feedback: the button text changes to 'Copied!' for a second, and/or a small toast notification appears.
* **Loading States:** For any data fetching (if implemented later), display skeleton loaders or spinners.
* **Timeline Interaction:** Smooth scrolling on the timeline. When an event is clicked, smoothly expand or scroll to its details.
## EDGE CASES:
* **Empty States:** Sections with no data (e.g., no search results, no modules yet) should display friendly messages (e.g., 'No commands found matching your query.', 'Learning content coming soon!').
* **Error Handling:** Implement basic error handling for any potential data loading issues (though mock data is used initially). Display user-friendly error messages.
* **Validation:** If forms are introduced later (e.g., user input for something), implement client-side validation.
* **Accessibility (a11y):** Ensure semantic HTML is used. All interactive elements should be keyboard navigable and have focus indicators. Use ARIA attributes where necessary. Ensure sufficient color contrast.
* **Responsiveness:** Test thoroughly on different screen sizes and orientations.
## SAMPLE DATA:
* **`timelineData` Example:**
```json
[
{
"id": "t1",
"date": "2013",
"title": "Docker 1.0 Released",
"description": "The first stable release of Docker, popularizing the concept of lightweight, portable containers.",
"imageUrl": "/images/docker-logo.png"
},
{
"id": "t2",
"date": "2014",
"title": "Docker Hub Launched",
"description": "A cloud-based registry service for sharing Docker images, fostering a community ecosystem."
}
// ... more events
]
```
* **`modules` Example:**
```json
[
{
"id": "m1",
"title": "Dockerfile Basics",
"slug": "dockerfile-basics",
"shortDescription": "Learn the fundamental instructions to build your own Docker images.",
"content": "<h1>Dockerfile Basics</h1><p>A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image...</p>```dockerfile\n# Example Dockerfile\nFROM ubuntu:latest\nRUN apt-get update && apt-get install -y --no-install-recommends nginx\nCOPY ./html /var/www/html\nEXPOSE 80\nCMD [ \"nginx\", \"-g\", \"daemon off;\" ]\n```"
}
// ... more modules
]
```
* **`commands` Example:**
```json
[
{
"id": "c1",
"name": "docker build",
"syntax": "docker build [OPTIONS] PATH | URL | -',
"description": "Build an image from a Dockerfile.",
"example": "docker build -t my-app:1.0 .
",
"category": "Image Management"
},
{
"id": "c2",
"name": "docker run",
"syntax": "docker run [OPTIONS] IMAGE [COMMAND] [ARG...]",
"description": "Run a command in a new container.",
"example": "docker run -d -p 8080:80 my-app:1.0",
"category": "Container Management"
}
// ... more commands
]
```
* **`templates` Example:**
```json
[
{
"id": "tmpl1",
"name": "Node.js Express App",
"description": "Basic setup for a Node.js Express application.",
"language": "javascript",
"dockerfile": "FROM node:18-alpine\nWORKDIR /app\nCOPY package*.json ./\nRUN npm install\nCOPY . .
EXPOSE 3000\nCMD [ \"npm\", \"start\" ]",
"dockerCompose": "version: '3.8'\nservices:\n web:\n build: .\n ports:\n - \"3000:3000\"
volumes:\n - .:/app"
}
// ... more templates
]
```
## DEPLOYMENT NOTES:
* **Build Command:** Use `next build`.
* **Start Command:** Use `next start` (for production, typically behind a Node.js server or using Next.js's built-in server).
* **Environment Variables:** Use `.env.local` for local development. For production, configure environment variables on the deployment platform (e.g., Vercel, Netlify, Docker).
* **Performance Optimizations:** Leverage Next.js features like SSR, code splitting, and image optimization. Optimize Tailwind CSS build output by removing unused styles.
* **Static Assets:** Place public assets (images, icons) in the `public/` directory.
* **TypeScript Configuration:** Ensure `tsconfig.json` is correctly configured for Next.js and React.
* **Linting/Formatting:** Integrate ESLint and Prettier for code quality and consistency.