PROJECT OVERVIEW:
This project aims to build a single-page application (SPA) called 'Kod Düzenleyici Yardımcısı' (Code Editor Assistant). The core problem it solves is the complexity and steep learning curve associated with configuring and managing advanced text editors like Neovim, Vim, and Emacs. Many developers struggle with intricate configuration files (e.g., init.vim, .vimrc, Lua configurations), finding relevant commands, and sharing their setups. This application will provide a centralized, user-friendly platform with AI assistance to streamline these processes. The value proposition is to empower developers by simplifying editor configuration, enhancing productivity through easy access to commands and community-shared setups, and reducing the friction of learning and mastering these powerful tools. It acts as a smart hub for all things related to Neovim/Vim/Emacs configurations and commands.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for rapid UI development and consistent styling.
- State Management: Zustand for efficient global and local state management.
- Routing: React Router DOM for client-side navigation.
- UI Components: Radix UI for accessible and unstyled component primitives, extended with Tailwind CSS.
- Icons: Lucide React for a comprehensive set of icons.
- API Client: Axios for handling HTTP requests to a potential future backend.
- Form Handling: React Hook Form with Zod for schema validation.
- Syntax Highlighting (for code snippets): Prism.js or Highlight.js.
- AI Integration (Conceptual for MVP): Placeholder for integrating with a future AI service (e.g., OpenAI API).
CORE FEATURES:
1. **Configuration & Command Repository**:
* **User Flow**: Users can log in, navigate to 'My Configs' or 'Community'. They can 'Add New Config/Command' via a form. The form includes fields for title, description, language (Vimscript, Lua, Shell), tags (e.g., 'completion', 'lsp', 'navigation'), and the code snippet itself. Users can mark configs as 'public' or 'private'. Public configs are visible in the 'Community' section.
* **Details**: Each config/command item displays its title, author, description, tags, and a syntax-highlighted code block. Users can copy the code snippet with a single click. Public items can be upvoted/favorited.
2. **Search & Discovery**:
* **User Flow**: Users access the 'Discover' or 'Community' page. They see a search bar and filtering options (by tag, language, popularity, recency). Typing a query (e.g., 'auto completion lsp', 'better telescope config') triggers real-time search results. Results are displayed as cards, each linking to the detailed view of a config/command.
* **Details**: Search results are paginated. Filters are applied dynamically. AI-powered search will interpret natural language queries and map them to relevant tags and code semantics.
3. **AI-Powered Assistant (Conceptual)**:
* **User Flow**: Within the search interface or a dedicated 'AI Assistant' panel, users can type natural language questions (e.g., 'How do I configure treesitter for syntax highlighting in Neovim?', 'Show me a good command for fuzzy finding files'). The AI provides a step-by-step explanation and relevant code snippets from the repository or generated based on common patterns.
* **Details**: This feature is a placeholder in the MVP, demonstrating where AI integration would occur. It would involve sending the query to an AI model and displaying the formatted response.
4. **User Profiles & Dotfiles Management**:
* **User Flow**: Logged-in users can visit their profile page. They see a list of their uploaded configs/commands (public and private). They can edit or delete their entries. A section might display their favorited items and upvotes received.
* **Details**: Basic profile management (username, avatar). For dotfiles specifically, a section to link to external GitHub repositories (e.g., `github.com/username/dotfiles`) could be added.
5. **Configuration Validation (Basic)**:
* **User Flow**: When a user uploads a configuration snippet, the system can perform basic syntax checks (e.g., valid Vimscript/Lua syntax using a parser if available) or flag common beginner mistakes based on predefined rules.
* **Details**: This MVP feature focuses on identifying obvious syntax errors or potentially problematic patterns, offering suggestions.
UI/UX DESIGN:
- **Layout**: A clean, responsive dashboard layout. A persistent sidebar for navigation (Discover, My Configs, Community, Profile, Settings). The main content area displays search results, config details, forms, etc. Mobile view will collapse the sidebar into a hamburger menu.
- **Color Palette**: Primary: Dark blue/charcoal (#1A202C). Accent: A vibrant teal or electric blue (#00BCD4 or #2196F3) for interactive elements, buttons, and highlights. Secondary: Light grey (#F7FAFC) for backgrounds and text. Error: Red (#F56565). Success: Green (#48BB78).
- **Typography**: Use a clean, readable sans-serif font like Inter or Roboto for body text. Use a monospace font like Fira Code or Source Code Pro for code blocks and editor-like interfaces.
- **Responsive Design**: Mobile-first approach. Utilize Tailwind CSS's responsive modifiers (sm:, md:, lg:). Ensure all elements are usable and legible on screens from 320px to 1920px+. Sidebar collapses on smaller screens, forms adjust layout.
- **Interactions**: Subtle hover effects on buttons and list items. Smooth transitions for routing and modal popups. Clear loading states (spinners, skeleton screens) for data fetching. Copy-to-clipboard actions provide visual feedback (e.g., checkmark animation).
COMPONENT BREAKDOWN:
- `App.jsx`: Root component, sets up routing and global layout.
- `Layout.jsx`: Main layout component with sidebar and header.
- `Sidebar.jsx`: Navigation component, links to different sections.
- `NavLink.jsx`: Individual navigation link item.
- `SearchBar.jsx`: Input field for search queries.
- `FilterButton.jsx`: Button to open/toggle filter options.
- `ConfigCard.jsx`: Displays a summary of a config/command in lists.
- Props: `config` (object: id, title, description, author, tags, upvotes), `onClick` (function).
- `ConfigDetailView.jsx`: Shows the full details of a config/command.
- Props: `config` (object).
- Includes `CodeBlock.jsx`.
- `CodeBlock.jsx`: Displays syntax-highlighted code.
- Props: `code` (string), `language` (string).
- Includes `CopyButton.jsx`.
- `CopyButton.jsx`: Button to copy text to clipboard.
- Props: `textToCopy` (string).
- `ConfigForm.jsx`: Form for adding/editing configs/commands.
- Props: `initialData` (object, optional), `onSubmit` (function).
- Includes input fields for title, description, tags, etc.
- `ProfilePage.jsx`: Displays user profile information and their configs.
- `AuthButtons.jsx`: Login/Logout buttons.
- `Spinner.jsx`: Loading indicator.
- `ErrorMessage.jsx`: Displays error messages.
DATA MODEL:
- **User**: `{ id: string, username: string, email: string, avatarUrl?: string, createdAt: string }`
- **Config**: `{ id: string, userId: string, title: string, description: string, code: string, language: 'vimscript' | 'lua' | 'shell' | 'other', tags: string[], isPublic: boolean, createdAt: string, updatedAt: string, upvotes: number, author?: User }`
- **State Structure (Zustand)**:
* `authStore`: `{ user: User | null, isLoading: boolean, login: function, logout: function }`
* `configStore`: `{ configs: Config[], activeConfig: Config | null, isLoading: boolean, error: string | null, fetchConfigs: function, fetchConfigById: function, createConfig: function, updateConfig: function, deleteConfig: function }`
* `searchStore`: `{ query: string, filters: object, results: Config[], isSearching: boolean, searchConfigs: function }`
- **Mock Data Format**: JSON objects adhering to the `Config` and `User` structures.
ANIMATIONS & INTERACTIONS:
- **Hover Effects**: Subtle background color change or slight scale-up on `ConfigCard` and `NavLink` components.
- **Transitions**: Smooth fade-in/out for loading states (`Spinner`, `ErrorMessage`). Smooth slide or fade transitions for route changes using `Framer Motion` or CSS transitions.
- **Loading States**: Use `Zustand` selectors to display `isLoading` flags. Show `Spinner.jsx` component or use skeleton loaders (`<div className='animate-pulse bg-gray-700 w-full h-12 rounded'></div>`) while data is being fetched.
- **Micro-interactions**: Button click feedback (slight press effect). `CopyButton` shows a temporary checkmark animation upon successful copy.
- **Form Animations**: Subtle animation when form fields gain focus. Error messages appear with a small fade-in animation.
EDGE CASES:
- **Empty States**: Display user-friendly messages and potential actions when lists are empty (e.g., 'No configurations found. Add your first one!', 'Start searching to discover community configs.').
- **Error Handling**: Catch API errors during fetch, create, update, delete operations. Display user-friendly `ErrorMessage.jsx` component. Implement retry mechanisms for network issues where appropriate.
- **Validation**: Use React Hook Form and Zod for robust form validation. Client-side validation for required fields, formats (e.g., code snippet not empty), and potentially basic syntax checks for Vimscript/Lua before submission.
- **Authentication**: Handle logged-out states gracefully. Prompt users to log in for features like saving configs or favoriting. Secure API endpoints.
- **Accessibility (a11y)**: Use semantic HTML5 elements. Ensure proper ARIA attributes for interactive components, especially custom ones. Keyboard navigability for all interactive elements. Sufficient color contrast.
SAMPLE DATA:
1. **Mock Config 1 (Vimscript)**:
```json
{
"id": "cfg_001",
"userId": "user_123",
"title": "Enable mouse support in Vim",
"description": "Enables mouse support for easier navigation and selection in terminal Vim.",
"code": "set mouse=a\nset ttymouse=xterm2",
"language": "vimscript",
"tags": ["mouse", "navigation", "basic"],
"isPublic": true,
"createdAt": "2023-10-26T10:00:00Z",
"updatedAt": "2023-10-26T10:00:00Z",
"upvotes": 150,
"author": {"id": "user_123", "username": "DevMaster", "avatarUrl": "/avatars/devmaster.png"}
}
```
2. **Mock Config 2 (Lua - Neovim Plugin Setup)**:
```json
{
"id": "cfg_002",
"userId": "user_456",
"title": "Basic Telescope.nvim setup",
"description": "Minimal configuration for Telescope fuzzy finder plugin in Neovim.",
"code": "require('telescope').setup { \n defaults = { \n -- your defaults here \n } \n}",
"language": "lua",
"tags": ["neovim", "telescope", "fuzzy finder", "lsp"],
"isPublic": true,
"createdAt": "2023-11-15T14:30:00Z",
"updatedAt": "2023-11-15T14:30:00Z",
"upvotes": 210,
"author": {"id": "user_456", "username": "LuaNinja", "avatarUrl": "/avatars/lueninja.png"}
}
```
3. **Mock Config 3 (Shell Command)**:
```json
{
"id": "cfg_003",
"userId": "user_789",
"title": "Quick git commit wrapper",
"description": "A simple shell command to quickly add and commit changes.",
"code": "git add . && git commit -m \"WIP\"; echo \"Changes committed.\"",
"language": "shell",
"tags": ["git", "workflow", "command"],
"isPublic": false,
"createdAt": "2024-01-01T09:00:00Z",
"updatedAt": "2024-01-01T09:00:00Z",
"upvotes": 5,
"author": {"id": "user_789", "username": "ShellWizard"}
}
```
4. **Mock Config 4 (AI Search Example - User Query)**:
* User Query: "How to set up language server for python in neovim?"
* AI Interpretation: Maps to tags like 'neovim', 'python', 'lsp', 'configuration'.
* Potential Result Snippet (Conceptual):
```lua
-- Example usingnvim-lspconfig
local lspconfig = require('lspconfig')
lspconfig.pyright.setup({})
```
5. **Mock User 1**: `{ "id": "user_123", "username": "DevMaster", "email": "dev@example.com", "avatarUrl": "/avatars/devmaster.png", "createdAt": "2023-01-01T00:00:00Z" }`
6. **Mock User 2**: `{ "id": "user_456", "username": "LuaNinja", "email": "lua@example.com", "createdAt": "2023-03-10T12:00:00Z" }`
7. **Mock User 3**: `{ "id": "user_789", "username": "ShellWizard", "email": "shell@example.com", "createdAt": "2023-08-20T18:45:00Z" }`
DEPLOYMENT NOTES:
- **Build Tool**: Vite (`npm run build` or `yarn build`).
- **Environment Variables**: Use `.env` files (e.g., `.env.local`, `.env.production`). Key variables: `VITE_API_URL` (for backend API endpoint), `VITE_AI_SERVICE_KEY` (if integrating directly with an AI API).
- **Performance Optimizations**: Code splitting via React Router. Lazy loading components (e.g., `React.lazy`). Image optimization (if any). Minimize bundle size. Use `React.memo` and `useCallback` where appropriate to prevent unnecessary re-renders.
- **Hosting**: Can be deployed on platforms like Vercel, Netlify, or similar static hosting providers.
- **HTTPS**: Ensure HTTPS is enabled on the deployment target.
- **CI/CD**: Setup a CI/CD pipeline (e.g., GitHub Actions) for automated testing and deployment.
- **Error Tracking**: Integrate a service like Sentry for monitoring runtime errors.