You are an expert AI coding assistant tasked with building a single-page Progressive Web Application (PWA) called 'Kod Aşkı' (Code Love). This application aims to reignite the passion for coding in experienced developers by providing a unique environment that blends nostalgic coding experiences with modern AI assistance. The core idea is to allow developers, particularly those who started their careers in eras like VB6, classic ASP, or COM components, to relive the excitement of learning and building with these older technologies, or to apply similar foundational concepts to modern development.
**1. PROJECT OVERVIEW:**
Kod Aşkı is designed to address the common phenomenon where experienced developers might feel a waning passion for coding due to the rapid pace of technological change. The HN post highlights how tools like Claude Code can bring back the 'midnight hour' energy. This platform will provide a specialized environment that facilitates this by offering simulated retro coding environments, AI-powered guidance tailored to these older paradigms, and a community space for sharing. The primary value proposition is to provide a 'time machine' for developers to reconnect with their foundational learning experiences, boosting morale, and potentially sparking new creative avenues by applying timeless principles to modern challenges.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for a fast development server and build process).
- **Styling:** Tailwind CSS for utility-first styling, ensuring rapid UI development and responsiveness.
- **State Management:** Zustand for simple and efficient global state management. Local state will be used for component-specific logic.
- **Routing:** React Router DOM for handling navigation within the single-page application.
- **UI Components:** Radix UI for accessible and unstyled UI primitives, styled with Tailwind CSS.
- **AI Integration:** Placeholder for future API calls to a backend service (initially mocked) for AI code analysis and suggestions. We'll simulate AI responses for the MVP.
- **Local Storage:** To persist user preferences, code snippets, and project states locally.
- **Icons:** Lucide React for a comprehensive set of open-source icons.
**3. CORE FEATURES (MVP):**
* **a) Retro Coding Sandbox:**
* **Description:** A simulated development environment where users can write and run code reminiscent of older technologies. This includes a text editor, a simulated console output, and basic project file management.
* **User Flow:**
1. User navigates to the 'Sandbox' section.
2. Selects a 'Retro Environment' (e.g., 'Simulated VB6', 'Classic ASP Snippets').
3. The editor loads with basic syntax highlighting for the selected environment.
4. User writes code.
5. User clicks 'Run'.
6. Simulated output appears in the console area. For MVP, actual execution isn't required; we'll simulate common outputs based on keywords or simple logic.
* **b) AI Code Nostalgia Assistant:**
* **Description:** An AI assistant that analyzes the code written in the sandbox. It provides feedback, suggestions, and explanations contextualized within the chosen retro paradigm or by drawing parallels to older programming concepts.
* **User Flow:**
1. While in the Sandbox, the user clicks the 'AI Assist' button.
2. The AI analyzes the current code snippet.
3. A side panel displays suggestions like: 'This logic is similar to how you'd handle data in VB6 forms,' or 'Consider this approach for managing state, reminiscent of early web frameworks.'
4. For MVP, AI responses will be mock responses triggered by specific keywords or code structures.
* **c) Project Showcase & Community:**
* **Description:** A gallery where users can share their 'retro-inspired' projects. Each project can have a title, description, technologies used, and a link to the code (e.g., GitHub Gist or a simple text paste).
* **User Flow:**
1. User navigates to the 'Showcase' section.
2. Clicks 'Add New Project'.
3. Fills in project details (title, description, tech stack - tags like 'VB6', 'ASP', 'COM').
4. Optionally pastes a code snippet or link.
5. The project appears in the gallery.
6. Other users can view, comment (MVP: disable comments, focus on viewing), and 'appreciate' (like) projects.
* **d) Environment Selector & Configuration:**
* **Description:** Allows users to choose the 'flavor' of their retro coding experience. This could range from specific language emulations to conceptual frameworks.
* **User Flow:**
1. Upon entering the Sandbox, a dropdown or set of buttons allows selection (e.g., 'VB6', 'Classic ASP', 'COM+ Concepts', 'Early Java').
2. The editor's syntax highlighting and the AI Assistant's context adapt based on the selection.
**4. UI/UX DESIGN:**
- **Layout:** A clean, minimalist dashboard layout. The main navigation (Sandbox, Showcase, Settings) is on the left sidebar. The central area displays the active feature (editor, gallery, etc.).
- **Color Palette:** A primary dark theme reminiscent of old IDEs (e.g., deep blues, grays, blacks) with vibrant accent colors (like electric blue, neon green, or orange) for interactive elements, buttons, and code highlighting. Secondary light theme option available.
- **Typography:** Use a clear, readable sans-serif font for UI elements (e.g., Inter or Manrope). For the code editor, a monospaced font like 'Fira Code' or 'Source Code Pro' is essential, with support for ligatures.
- **Responsiveness:** Mobile-first design. The sidebar collapses into a hamburger menu on smaller screens. The code editor and console need to be responsive, possibly using horizontal scrolling or adjustable pane sizes.
- **Component Hierarchy:** Top-level `App` component, routing handled by `React Router`. Major sections like `SandboxPage`, `ShowcasePage`, `SettingsPage`. `SandboxPage` contains `Editor`, `ConsoleOutput`, `AIResultsPanel`, `EnvironmentSelector`. `ShowcasePage` contains `ProjectCard` and `ProjectForm`. `Editor` uses a library like `react-codemirror` or `monaco-editor` (if feasible for MVP, otherwise a simpler textarea with syntax highlighting).
**5. DATA MODEL:**
- **State Management (Zustand):**
- `editorState`: { `currentCode`: string, `currentLanguage`: string, `projectId`: string | null }
- `aiState`: { `suggestions`: string[], `isLoading`: boolean, `error`: string | null }
- `projectState`: { `projects`: Project[], `isLoading`: boolean }
- `userPrefs`: { `theme`: 'dark' | 'light', `fontSize`: number }
- **Local Storage:** Persist `userPrefs`, potentially cache drafts of `currentCode`.
- **Mock Data Format:**
- `Project` object:
```json
{
"id": "uuid",
"title": "string",
"description": "string",
"techTags": ["string"],
"codeSnippet": "string", // Or "codeUrl": "string"
"createdAt": "timestamp",
"likes": "number"
}
```
- `MockAISuggestion` object:
```json
{
"triggerKeywords": ["string"],
"suggestionText": "string",
"context": "string" // e.g., 'VB6', 'ASP', 'General'
}
```
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component. Sets up routing, global layout, and theme provider.
- **`MainLayout.jsx`:** Contains the sidebar navigation and the main content area where different pages are rendered.
- **`Sidebar.jsx`:** Navigation menu component. Links to different sections. Handles collapsing/expanding.
- **`SandboxPage.jsx`:** Container for the coding sandbox features. Manages state related to the editor and AI.
- **`EnvironmentSelector.jsx`:** Dropdown or buttons to select the coding environment. Props: `onSelectEnvironment`, `currentEnvironment`.
- **`CodeEditor.jsx`:** The actual code editor component. Uses a library or textarea. Props: `code`, `language`, `onChange`, `fontSize`.
- **`ConsoleOutput.jsx`:** Displays simulated or actual output. Props: `output`.
- **`AIButton.jsx`:** Button to trigger AI analysis. Props: `onClick`, `isLoading`.
- **`AIResultsPanel.jsx`:** Displays AI suggestions. Props: `suggestions`, `isLoading`, `error`.
- **`ShowcasePage.jsx`:** Displays the project gallery and the form to add new projects.
- **`ProjectCard.jsx`:** Displays a single project in the gallery. Props: `project` (object).
- **`ProjectForm.jsx`:** Form for submitting new projects. Props: `onSubmit`, `initialData` (for editing).
- **`ProjectGallery.jsx`:** Renders a list of `ProjectCard` components. Props: `projects`.
- **`SettingsPage.jsx`:** User preferences like theme selection, font size.
- **`Button.jsx`:** Reusable button component. Props: `children`, `onClick`, `variant`, `isLoading`.
- **`Input.jsx`:** Reusable input field. Props: `value`, `onChange`, `label`, `type`.
- **`Modal.jsx`:** For confirmations or displaying detailed info.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out for content changes using Framer Motion or simple CSS transitions.
- **Button Hovers:** Slight scale-up or background color change on interactive elements.
- **Loading States:** Skeletons loaders for the project gallery. Spinner indicators within buttons (`AIButton`, submit buttons) and potentially around the code editor when AI is processing.
- **Code Editor:** Smooth scrolling, syntax highlighting animations (subtle color shifts).
- **Sidebar Collapse:** Smooth sliding animation.
- **Micro-interactions:** A subtle animation when 'liking' a project.
**8. EDGE CASES:**
- **Empty States:** Display friendly messages and clear calls to action when the sandbox is empty, the project gallery has no projects, or AI has no suggestions.
- **Error Handling:** Gracefully handle errors during mock AI calls or potential future API interactions. Display user-friendly error messages.
- **Validation:** Basic validation for the project submission form (title, description are required).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes, keyboard navigation for all interactive elements, and sufficient color contrast, especially for the dark theme.
- **Code Editor:** Handle large code inputs, syntax errors without crashing the UI.
- **Responsiveness:** Ensure usability across different screen sizes and devices. Test editor pane resizing and scrolling.
**9. SAMPLE DATA:**
* **Mock Projects (for Showcase):**
1. `{
"id": "p1",
"title": "VB6 Customer Manager",
"description": "A simple CRUD application built using Visual Basic 6, simulating data entry and retrieval from a mock database.",
"techTags": ["VB6", "COM", "ADO"],
"codeSnippet": "' Example VB6 Code Snippet...\nPrivate Sub cmdSave_Click()\n ' Save customer data\nEnd Sub",
"createdAt": "2023-10-27T10:00:00Z",
"likes": 15
}`
2. `{
"id": "p2",
"title": "Classic ASP Product Catalog",
"description": "A basic web page displaying products fetched from a simulated Access database using Classic ASP.",
"techTags": ["ASP", "VBScript", "ADO"],
"codeSnippet": "' Example ASP Code Snippet...\n<%\n Set rs = Server.CreateObject(\"ADODB.Recordset\")\n rs.Open \"SELECT * FROM Products\", conn\n%>",
"createdAt": "2023-10-26T15:30:00Z",
"likes": 22
}`
3. `{
"id": "p3",
"title": "Early JavaScript DOM Manipulation",
"description": "Experimenting with basic DOM manipulation using vanilla JavaScript, before the era of frameworks.",
"techTags": ["JavaScript", "DOM", "HTML"],
"codeSnippet": "// Example JS Code Snippet...\ndocument.getElementById('myElement').innerHTML = 'Hello World!';",
"createdAt": "2023-10-25T09:15:00Z",
"likes": 30
}`
* **Mock AI Suggestions:**
1. `{
"triggerKeywords": ["loop", "for"],
"suggestionText": "In classic VB6, you might use a `For...Next` loop. Ensure your loop counter variable is declared correctly (e.g., `Dim i As Integer`).",
"context": "VB6"
}`
2. `{
"triggerKeywords": ["database", "query"],
"suggestionText": "For Classic ASP, using `ADODB.Recordset` is common. Remember to handle potential `Null` values from the database and close your recordset properly to free up resources.",
"context": "ASP"
}`
3. `{
"triggerKeywords": ["state", "variable"],
"suggestionText": "Managing state in early web applications often involved hidden form fields, query parameters, or simple session variables. Avoid complex global state for simpler scenarios.",
"context": "General Web Dev"
}`
4. `{
"triggerKeywords": ["button", "click"],
"suggestionText": "In VB6, event handlers like `Button_Click()` were central. Ensure your logic within the event is concise or call separate procedures for clarity.",
"context": "VB6"
}`
**10. DEPLOYMENT NOTES:**
- **Build Process:** Use `vite build` for optimized production builds. Vite offers fast builds and efficient output.
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., `VITE_API_ENDPOINT` if a backend is added later). Ensure sensitive keys are not committed to version control.
- **Performance Optimizations:**
- Code Splitting: Vite handles this automatically to some extent. Ensure major libraries are not bundled unnecessarily.
- Lazy Loading: Load components like `SettingsPage` or heavy UI elements only when needed.
- Image Optimization: If any images are added, use optimization tools.
- Memoization: Use `React.memo` for components that might re-render unnecessarily.
- **PWA Configuration:** Add a `manifest.json` and a service worker (using Vite plugin) for offline capabilities and installability.
- **Hosting:** Recommend static site hosting platforms like Vercel, Netlify, or GitHub Pages for easy deployment.