Frontend React Development

Component Patterns

File Structure

components/
├── layout/         # TopBar, Sidebar — structural, always visible
├── editor/         # CanvasEditor, LayerPanel, PropertiesPanel — editor-specific
├── export/         # ExportModal — export flow
└── ui/             # Button, Badge, Tooltip, Modal — reusable primitives

Naming Conventions

• Components: PascalCase — LayerPanel.jsx, ExportModal.jsx
• Hooks: camelCase with use prefix — useCanvas.js, useLayers.js
• Utils/Libs: camelCase — apiClient.js, psdExporter.js
• Stores: camelCase with Store suffix — editorStore.js