| # Frontend Structure Plan | |
| ## Directory Structure | |
| ``` | |
| frontend/ | |
| ├── package.json # Project dependencies and scripts | |
| ├── public/ # Static assets | |
| │ ├── index.html # Main HTML file | |
| │ └── favicon.ico # Application icon | |
| ├── src/ # Source code | |
| │ ├── index.js # Application entry point | |
| │ ├── App.js # Root component | |
| │ ├── App.css # Global styles | |
| │ ├── components/ # Reusable components | |
| │ │ ├── Header/ # Navigation header | |
| │ │ ├── Sidebar/ # Navigation sidebar | |
| │ │ ├── Auth/ # Authentication components | |
| │ │ │ ├── LoginForm.js | |
| │ │ │ └── RegisterForm.js | |
| │ │ ├── Dashboard/ # Dashboard components | |
| │ │ ├── Sources/ # Source management components | |
| │ │ ├── Posts/ # Post management components | |
| │ │ └── Scheduler/ # Scheduling components | |
| │ ├── pages/ # Page components | |
| │ │ ├── Home.js # Home page | |
| │ │ ├── Login.js # Login page | |
| │ │ ├── Register.js # Registration page | |
| │ │ ├── Dashboard.js # Main dashboard | |
| │ │ ├── Sources.js # Source management page | |
| │ │ ├── Posts.js # Post management page | |
| │ │ └── Schedule.js # Scheduling page | |
| │ ├── services/ # API service layer | |
| │ │ ├── api.js # Axios instance and interceptors | |
| │ │ ├── authService.js # Authentication API calls | |
| │ │ ├── sourceService.js# Source management API calls | |
| │ │ ├── postService.js # Post management API calls | |
| │ │ └── scheduleService.js# Scheduling API calls | |
| │ ├── store/ # Redux store | |
| │ │ ├── index.js # Store configuration | |
| │ │ ├── actions/ # Action creators | |
| │ │ └── reducers/ # Reducers | |
| │ ├── hooks/ # Custom hooks | |
| │ │ └── useAuth.js # Authentication hook | |
| │ ├── utils/ # Utility functions | |
| │ │ └── helpers.js # Helper functions | |
| │ └── styles/ # CSS styles | |
| │ ├── variables.css # CSS variables | |
| │ ├── auth.css # Authentication styles | |
| │ ├── dashboard.css # Dashboard styles | |
| │ ├── sources.css # Source management styles | |
| │ ├── posts.css # Post management styles | |
| │ └── schedule.css # Scheduling styles | |
| └── README.md # Frontend documentation | |
| ``` | |
| ## Key Components | |
| ### App.js | |
| - Main application component | |
| - Routing configuration | |
| - Authentication state management | |
| - Layout structure (Header, Sidebar) | |
| ### Components | |
| - Reusable UI components | |
| - Presentational components with minimal logic | |
| - Styled with CSS modules or styled-components | |
| ### Pages | |
| - Page-level components that compose multiple components | |
| - Route-specific logic | |
| - Data fetching and state management | |
| ### Services | |
| - API communication layer | |
| - Request/response interceptors | |
| - Error handling | |
| - Authentication token management | |
| ### Store | |
| - Redux store configuration | |
| - State management for the entire application | |
| - Actions and reducers for each feature | |
| ### Hooks | |
| - Custom React hooks for reusable logic | |
| - Custom authentication hook | |
| - Data fetching hooks | |
| ### Styles | |
| - CSS files organized by feature | |
| - Global styles and variables | |
| - Responsive design considerations |