| # React Component Architecture | |
| ## Overview | |
| This document outlines the component architecture for the React frontend of the Lin application. The components are organized hierarchically to promote reusability and maintainability. | |
| ## Component Hierarchy | |
| ### App Component | |
| ``` | |
| App | |
| βββ Header | |
| βββ Sidebar | |
| βββ Routes | |
| β βββ Login | |
| β β βββ LoginForm | |
| β β βββ RegisterForm | |
| β βββ Register | |
| β β βββ RegisterForm | |
| β β βββ LoginForm | |
| β βββ Dashboard | |
| β β βββ SourceManager | |
| β β β βββ SourceList | |
| β β β βββ AddSourceForm | |
| β β βββ PostManager | |
| β β β βββ PostList | |
| β β β βββ PostGenerator | |
| β β β βββ PostForm | |
| β β βββ Scheduler | |
| β β βββ ScheduleList | |
| β β βββ ScheduleForm | |
| β βββ Sources | |
| β β βββ SourceList | |
| β β βββ AddSourceForm | |
| β βββ Posts | |
| β β βββ PostList | |
| β β βββ PostGenerator | |
| β β βββ PostForm | |
| β βββ Schedule | |
| β βββ ScheduleList | |
| β βββ ScheduleForm | |
| βββ Footer | |
| ``` | |
| ## Component Details | |
| ### App | |
| - Root component that manages global state | |
| - Handles routing between pages | |
| - Manages authentication state | |
| ### Header | |
| - Navigation bar at the top of the application | |
| - Contains application title and user menu | |
| - Shows current user information | |
| - Provides logout functionality | |
| ### Sidebar | |
| - Navigation menu on the left side | |
| - Links to main sections (Dashboard, Sources, Posts, Schedule) | |
| - Responsive design for mobile devices | |
| ### Login | |
| - Page for user authentication | |
| - Contains LoginForm component | |
| - Provides link to registration page | |
| ### LoginForm | |
| - Form for user login | |
| - Email and password fields | |
| - Submit button | |
| - Validation and error handling | |
| ### Register | |
| - Page for user registration | |
| - Contains RegisterForm component | |
| - Provides link to login page | |
| ### RegisterForm | |
| - Form for user registration | |
| - Email, password, and confirm password fields | |
| - Submit button | |
| - Validation and error handling | |
| ### Dashboard | |
| - Main dashboard page | |
| - Overview of all features | |
| - Quick access to main functions | |
| - Summary statistics | |
| ### SourceManager | |
| - Component for managing RSS sources | |
| - Lists existing sources | |
| - Provides form to add new sources | |
| - Allows deletion of sources | |
| ### SourceList | |
| - Displays list of sources in a table | |
| - Shows source URL and category | |
| - Provides delete functionality for each source | |
| - Responsive design for different screen sizes | |
| ### AddSourceForm | |
| - Form for adding new sources | |
| - Source URL input field | |
| - Submit button | |
| - Validation and error handling | |
| ### PostManager | |
| - Component for managing posts | |
| - Lists existing posts | |
| - Provides post generation functionality | |
| - Allows creation and publishing of posts | |
| ### PostList | |
| - Displays list of posts in a table | |
| - Shows post content and status | |
| - Provides publish and delete functionality for each post | |
| - Filter by published status | |
| ### PostGenerator | |
| - Component for AI-powered post generation | |
| - Button to trigger generation | |
| - Display area for generated content | |
| - Ability to edit generated content | |
| ### PostForm | |
| - Form for creating new posts | |
| - Text content input (textarea) | |
| - Image upload functionality | |
| - Schedule posting option | |
| - Submit button | |
| ### Scheduler | |
| - Component for managing post schedules | |
| - Lists existing schedules | |
| - Provides form to create new schedules | |
| ### ScheduleList | |
| - Displays list of schedules in a table | |
| - Shows schedule time and associated account | |
| - Provides delete functionality for each schedule | |
| ### ScheduleForm | |
| - Form for creating new schedules | |
| - Day selection (multiple days) | |
| - Time selection (hour and minute) | |
| - Account selection | |
| - Submit button | |
| ### Footer | |
| - Footer component at the bottom of the application | |
| - Contains copyright information | |
| - Links to documentation or support | |
| ## State Management | |
| ### Global State (Redux Store) | |
| - User authentication state | |
| - Current user information | |
| - Social media accounts | |
| - Sources | |
| - Posts | |
| - Schedules | |
| ### Component State | |
| - Form input values | |
| - Loading states | |
| - Error messages | |
| - UI-specific state (e.g., open/closed modals) | |
| ## Data Flow | |
| 1. **Authentication Flow** | |
| - User submits login form | |
| - LoginForm calls authService.login() | |
| - authService makes API call to /api/auth/login | |
| - API returns JWT token | |
| - Token is stored in localStorage | |
| - User state is updated in Redux store | |
| - User is redirected to dashboard | |
| 2. **Source Management Flow** | |
| - User submits AddSourceForm | |
| - AddSourceForm calls sourceService.addSource() | |
| - sourceService makes API call to /api/sources | |
| - API returns new source data | |
| - Source is added to Redux store | |
| - SourceList is automatically updated | |
| 3. **Post Management Flow** | |
| - User clicks "Generate Post" button | |
| - PostGenerator calls postService.generatePost() | |
| - postService makes API call to /api/posts/generate | |
| - API returns generated content | |
| - Content is displayed in PostGenerator | |
| - User can edit content and submit PostForm | |
| - PostForm calls postService.createPost() | |
| - postService makes API call to /api/posts | |
| - API returns new post data | |
| - Post is added to Redux store | |
| - PostList is automatically updated | |
| 4. **Scheduling Flow** | |
| - User submits ScheduleForm | |
| - ScheduleForm calls scheduleService.createSchedule() | |
| - scheduleService makes API call to /api/schedules | |
| - API returns new schedule data | |
| - Schedule is added to Redux store | |
| - ScheduleList is automatically updated | |
| ## Styling | |
| ### CSS Strategy | |
| - CSS Modules for component-specific styles | |
| - Global CSS variables for consistent theming | |
| - Responsive design with media queries | |
| - Mobile-first approach | |
| ### Theme | |
| - Primary color: #910029 (Burgundy) | |
| - Secondary color: #39404B (Dark Gray) | |
| - Background color: #ECF4F7 (Light Blue) | |
| - Text color: #2c3e50 (Dark Blue-Gray) | |
| - Accent color: #800020 (Dark Burgundy) | |
| ## Responsive Design | |
| ### Breakpoints | |
| - Mobile: 0px - 768px | |
| - Tablet: 769px - 1024px | |
| - Desktop: 1025px+ | |
| ### Adaptations | |
| - Sidebar becomes collapsible on mobile | |
| - Tables become card-based layouts on mobile | |
| - Forms stack vertically on mobile | |
| - Font sizes adjust for different screen sizes |