You are an expert AI coding assistant tasked with generating a single-page React application for a web-based CAD tool, inspired by SolveSpace. The application should be a Single Page Application (SPA) built with React and styled with Tailwind CSS. This prompt will guide the AI through the entire development process, from project setup to deployment considerations.
**1. PROJECT OVERVIEW:**
**Application Name:** Tarayıcı Tabanlı Proje Çizim Aracı (Browser-Based Project Drawing Tool)
**Problem Solved:** Traditional CAD software can be complex, resource-intensive, and costly. There's a need for an accessible, browser-based solution that allows users to create and share 2D/3D parametric designs easily, without requiring powerful hardware or expensive licenses. This tool aims to democratize CAD by providing a robust, yet user-friendly, online alternative.
**Value Proposition:** Empower engineers, designers, students, and hobbyists to design, prototype, and collaborate on projects directly in their web browser. Offers the power of parametric CAD with the convenience of cloud accessibility, seamless sharing, and a gentle learning curve, all built on an open-source foundation.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development server and build process)
- **Styling:** Tailwind CSS (with headless UI components for accessibility and customization)
- **State Management:** Zustand (lightweight and easy to use for global and local state)
- **Routing:** React Router DOM (for potential future multi-page expansion, though MVP is single page)
- **Drawing Canvas:** A suitable JavaScript canvas library or WebGL renderer optimized for CAD operations. Consider libraries like `fabric.js` for 2D or explore WebGL frameworks if 3D performance is critical. For this MVP, we'll focus on integrating a 2D canvas initially, with placeholders for 3D.
- **API/Backend (for MVP persistence):** Mock Service Worker (MSW) for simulating API calls for saving/loading projects. For a real backend, consider Node.js/Express or a BaaS like Firebase.
- **Icons:** Heroicons or Lucide React
**3. CORE FEATURES (MVP):**
**a) 2D/3D Parametric CAD Interface:**
- **User Flow:** User lands on the main canvas page. The interface displays a central drawing canvas, a toolbar for drawing tools, a properties panel for selected objects, and a menu bar.
- **Functionality:** Users can select tools (line, circle, arc, etc.), click and drag on the canvas to create shapes. Shapes are parametric, meaning their properties (e.g., radius, length) can be modified later.
- **3D Placeholder:** While the core MVP focuses on 2D, include a toggle or button to switch to a conceptual 3D view. This might initially just display extruded 2D shapes or a wireframe, with a clear "3D functionality coming soon" message.
**b) Toolbar & Tools:**
- **User Flow:** User clicks an icon in the toolbar to select a drawing tool. The active tool is highlighted. Clicking on the canvas executes the tool's action.
- **Functionality:** Implement Line, Circle, Arc, Rectangle tools. Implement a Selection tool to pick and modify objects.
**c) Properties Panel:**
- **User Flow:** When an object is selected on the canvas, its properties (e.g., coordinates, dimensions, color) appear in a side panel. User can input new values to modify the object parametrically.
- **Functionality:** Dynamically display and allow editing of parameters based on the selected object type.
**d) Cloud Save & Load:**
- **User Flow:** User clicks 'Save' in the menu. A modal appears asking for a project name. After naming, the project data is saved. Later, user clicks 'Load', sees a list of saved projects, selects one, and the canvas loads that project.
- **Functionality:** Simulate API calls using MSW. Store project data (likely as JSON) in mock storage. Display a simple list of project titles.
**e) Project Sharing:**
- **User Flow:** User clicks 'Share'. A modal shows a unique URL for the current project state. User copies this URL to share.
- **Functionality:** Generate a unique identifier for the current project state and construct a shareable URL (e.g., `app.com/view/{projectId}`). The linked page will load the project in a read-only view.
**4. UI/UX DESIGN:**
- **Layout:** Main layout consists of a header (menu bar), a left sidebar (tool selection), a central canvas area, and a right sidebar (properties panel). The layout should be responsive.
- **Color Palette:** Clean and professional. Primary: `#1E3A8A` (Dark Blue), Secondary: `#3B82F6` (Bright Blue) for accents/hovers, Neutral: `#F3F4F6` (Light Gray) for backgrounds, `#FFFFFF` (White) for cards/modals, Text: `#1F2937` (Dark Gray).
- **Typography:** Sans-serif font like Inter or Poppins. Clear hierarchy for headings, labels, and body text.
- **Responsive Design:** Utilize Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`). The canvas should adapt to different screen sizes. Sidebars might collapse or become drawers on smaller screens.
- **Canvas Interaction:** Smooth zooming and panning are essential. Clear visual feedback for selected tools and objects.
**5. DATA MODEL:**
- **Project Structure (JSON):**
```json
{
"id": "string (uuid)",
"name": "string",
"createdAt": "timestamp",
"updatedAt": "timestamp",
"elements": [
{
"id": "string (uuid)",
"type": "line" | "circle" | "arc" | "rectangle" | "extruded_shape",
"parameters": { ... }, // e.g., { x1, y1, x2, y2 } for line; { cx, cy, r } for circle
"style": { "color": "string", "strokeWidth": number },
"constraints": [ ... ] // For future parametric functionality
}
],
"viewState": { "zoom": number, "panX": number, "panY": number, "mode": "2d" | "3d" }
}
```
- **State Management (Zustand):**
- `useStore` hook with slices for:
- `editorState`: { currentTool, selectedElementId, canvasState (zoom, pan) }
- `projectState`: { projectId, projectName, elements: [], history: [] } // History for undo/redo
- `uiState`: { sidebarOpen, modalOpen, loadingStatus }
- Mock API functions interacting with `localStorage` or a mock backend via MSW.
**6. COMPONENT BREAKDOWN:**
- **`App.js`:** Main application component, sets up routing (if needed), global layout.
- **`Header.js`:** Contains application title, menu items (File, Edit, View), Save/Load/Share buttons.
- **`Toolbar.js`:** Renders tool icons. Manages active tool state.
- **`Canvas.js`:** The main drawing area. Renders elements, handles user input (mouse events), manages zoom/pan.
- Props: `elements`, `width`, `height`, `selectedElementId`, `activeTool`, `onElementCreate`, `onElementSelect`, `onViewChange`
- **`PropertiesPanel.js`:** Displays and allows editing of the selected element's properties.
- Props: `selectedElement`, `onParameterChange`
- **`ElementRenderer.js`:** (Potentially within `Canvas.js` or separate) Renders individual shapes based on their type and parameters.
- Props: `element`
- **`ToolbarButton.js`:** Individual button component for the toolbar.
- **`Modal.js`:** Generic modal component for Save/Load dialogs.
- **`ProjectList.js`:** Component to display saved projects in the Load modal.
- **`ShareModal.js`:** Component for displaying the shareable link.
**7. ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color change or slight scale-up on toolbar icons and menu items on hover.
- **Tool Selection:** Visual highlight on the active toolbar icon. Smooth transition for the highlight.
- **Loading States:** Display a subtle spinner or progress indicator when loading projects or saving. Use Tailwind's `animate-spin` or custom CSS.
- **Element Selection:** A clear visual indicator (e.g., bounding box with handles, border highlight) when an element is selected on the canvas.
- **Canvas Transitions:** Smooth zoom/pan animations. Consider using `react-spring` or CSS transitions for a polished feel.
- **Form Interactions:** Highlight input fields on focus within the Properties Panel.
**8. EDGE CASES:**
- **Empty State (Canvas):** Display a helpful message or visual cue when the canvas is empty (e.g., "Start drawing by selecting a tool from the left toolbar.").
- **Empty State (Project List):** Message like "No saved projects found. Click 'Save' to create your first project." in the Load modal.
- **Error Handling:** Gracefully handle errors during API calls (save/load). Display user-friendly error messages (e.g., "Failed to save project. Please try again."). Use `try...catch` blocks.
- **Validation:** Validate user input in the Properties Panel (e.g., ensure dimensions are positive numbers). Provide inline validation feedback.
- **Accessibility (a11y):** Ensure all interactive elements have proper ARIA attributes, keyboard navigation support (tabbing through tools, menus, form fields), and sufficient color contrast.
- **Mobile Viewport:** Ensure usability on smaller screens, perhaps by collapsing sidebars into drawers or modals, and optimizing touch controls for the canvas.
**9. SAMPLE DATA (Mock JSON for `elements` array):**
```json
[
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"type": "line",
"parameters": { "x1": 50, "y1": 100, "x2": 250, "y2": 100 },
"style": { "color": "#1F2937", "strokeWidth": 2 },
"constraints": []
},
{
"id": "b2c3d4e5-f6a7-8901-2345-67890abcdef1",
"type": "circle",
"parameters": { "cx": 150, "cy": 200, "r": 50 },
"style": { "color": "#3B82F6", "strokeWidth": 2 },
"constraints": []
},
{
"id": "c3d4e5f6-a7b8-9012-3456-7890abcdef12",
"type": "rectangle",
"parameters": { "x": 300, "y": 150, "width": 100, "height": 80 },
"style": { "color": "#1F2937", "strokeWidth": 1 },
"constraints": []
},
{
"id": "d4e5f6a7-b8c9-0123-4567-890abcdef123",
"type": "arc",
"parameters": { "startX": 450, "startY": 200, "midX": 500, "midY": 150, "endX": 550, "endY": 200, "radius": 50 },
"style": { "color": "#EF4444", "strokeWidth": 3 },
"constraints": []
},
{
"id": "e5f6a7b8-c9d0-1234-5678-90abcdef1234",
"type": "line",
"parameters": { "x1": 100, "y1": 350, "x2": 400, "y2": 350 },
"style": { "color": "#1F2937", "strokeWidth": 2 },
"constraints": []
}
]
```
**Initial Project State (for loaded view):**
```json
{
"id": "initial-project-uuid",
"name": "My First Project",
"createdAt": "2024-01-01T10:00:00Z",
"updatedAt": "2024-01-01T10:05:00Z",
"elements": [
// Use sample data elements here
],
"viewState": { "zoom": 1, "panX": 0, "panY": 0, "mode": "2d" }
}
```
**10. DEPLOYMENT NOTES:**
- **Build Command:** Use `vite build` for production builds.
- **Environment Variables:** Use `.env` files for API endpoints (if applicable later) and other configurations. Vite supports environment variables starting with `VITE_`.
- **Static Hosting:** The application is designed to be deployed as static assets on platforms like Netlify, Vercel, GitHub Pages, or any standard web server.
- **Performance Optimizations:**:
- Code Splitting: Vite handles this automatically to some extent.
- Lazy Loading: Load components (especially less critical ones) only when needed.
- Image Optimization: If any images are used, optimize them.
- Canvas Performance: For complex 2D/3D scenes, optimize drawing operations. Consider debouncing input handlers and efficient state updates. Use `requestAnimationFrame` for animations.
- **HTTPS:** Ensure the application is served over HTTPS in production.
- **Caching:** Configure appropriate cache headers for static assets.
This comprehensive prompt provides all the necessary details for an AI assistant to generate the initial structure and core functionality of the web-based CAD application. The focus is on a functional MVP using React and Tailwind CSS, with clear paths for future expansion.