149 lines
4.2 KiB
Markdown
149 lines
4.2 KiB
Markdown
# Frontend Documentation
|
|
|
|
## UI Framework and Library
|
|
|
|
**Framework**: React
|
|
**Styling**: Tailwind CSS
|
|
**Additional UI Libraries**: Headless UI (for accessible components)
|
|
|
|
## Design Philosophy
|
|
|
|
The application follows a minimalistic, modern design inspired by Apple's design language with:
|
|
- Clean, uncluttered interfaces
|
|
- Ample white space
|
|
- Subtle animations and transitions
|
|
- Focus on content and functionality
|
|
- Support for both light and dark mode
|
|
|
|
## Navigation Structure
|
|
|
|
The application uses a sidebar navigation layout with the following primary sections:
|
|
|
|
1. **Dashboard** - Overview of user activity and saved strategies
|
|
2. **Strategy Builder** - Main interface for creating strategies
|
|
3. **My Strategies** - Library of saved and generated strategies
|
|
4. **Community** - Social features and shared strategies
|
|
5. **Settings** - Account management and preferences
|
|
|
|
Mobile view will use a collapsible hamburger menu to ensure responsiveness.
|
|
|
|
## State Management
|
|
|
|
**Solution**: Zustand
|
|
|
|
Zustand is selected for state management due to its:
|
|
- Simplified API compared to Redux
|
|
- Strong performance for complex state
|
|
- Minimal boilerplate code
|
|
- Good compatibility with React's concurrent features
|
|
- Ability to handle complex nested state required for strategy configurations
|
|
|
|
## Component Structure
|
|
|
|
### Core Components
|
|
|
|
1. **StrategyBuilder**
|
|
- Main component for strategy creation
|
|
- Contains sub-sections for each framework part
|
|
- Houses the visual indicator selection interface
|
|
|
|
2. **IndicatorSelector**
|
|
- Allows selection from pre-built indicators
|
|
- Provides customization controls for indicator parameters
|
|
- Displays visual representation of indicator behavior
|
|
|
|
3. **StrategyViewer**
|
|
- Displays the complete strategy with all selected components
|
|
- Provides export options
|
|
- Shows educational content about strategy components
|
|
|
|
4. **CodeExporter**
|
|
- Generates PineScript code
|
|
- Toggles between minimal and commented code
|
|
- Provides copy functionality
|
|
|
|
5. **AIStrategyGenerator**
|
|
- Interface for API key management
|
|
- Controls for AI-based strategy generation
|
|
- Displays generated strategies with explanations
|
|
|
|
6. **StrategyVersionControl**
|
|
- Manages different versions of strategies
|
|
- Provides comparison tools
|
|
- Allows reverting to previous versions
|
|
|
|
### Shared Components
|
|
|
|
1. **Header**
|
|
- App logo and navigation
|
|
- User profile and account menu
|
|
- Theme toggle (light/dark mode)
|
|
|
|
2. **Sidebar**
|
|
- Main navigation menu
|
|
- Collapsible on mobile devices
|
|
|
|
3. **Modal**
|
|
- Reusable modal component for alerts, confirmations, etc.
|
|
|
|
4. **Toast**
|
|
- Notification system for success/error messages
|
|
|
|
5. **Button**
|
|
- Consistent button styles across the application
|
|
- Various states (primary, secondary, disabled)
|
|
|
|
6. **Card**
|
|
- Container for strategy items and content blocks
|
|
|
|
## Forms and Inputs
|
|
|
|
1. **API Key Management Form**
|
|
- Secure input for LLM API keys
|
|
- Validation for proper key format
|
|
- Test connection functionality
|
|
|
|
2. **Strategy Parameters Form**
|
|
- Number inputs with min/max validation
|
|
- Toggle switches for boolean options
|
|
- Dropdown selects for pre-defined options
|
|
|
|
3. **Filter and Search Forms**
|
|
- Used in strategy library and community sections
|
|
- Quick filtering by strategy type, performance, etc.
|
|
|
|
## Responsive Design
|
|
|
|
The application will follow a mobile-first approach with specific breakpoints for:
|
|
- Mobile (< 640px)
|
|
- Tablet (640px - 1024px)
|
|
- Desktop (> 1024px)
|
|
|
|
Tailwind's responsive classes will be utilized for consistent responsive behavior.
|
|
|
|
## Theme Management
|
|
|
|
The application will support both light and dark modes:
|
|
- System preference detection by default
|
|
- User toggle option
|
|
- Persistent preference storage
|
|
- Smooth transition between themes
|
|
|
|
## Performance Considerations
|
|
|
|
1. **Code Splitting**
|
|
- Route-based code splitting
|
|
- Dynamic imports for heavy components
|
|
|
|
2. **Lazy Loading**
|
|
- Defer loading of non-critical components
|
|
- Implement for community features and advanced settings
|
|
|
|
3. **Memoization**
|
|
- Use React.memo for complex component renders
|
|
- Implement useMemo for expensive calculations
|
|
|
|
4. **Asset Optimization**
|
|
- Optimize images and icons
|
|
- Use SVGs where possible for crisp rendering at all sizes
|