File size: 3,660 Bytes
25f22bf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
# 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 |