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
