| # Lin - Community Manager Assistant for LinkedIn | |
| ## Project Overview | |
| Lin is a comprehensive community management tool designed to help users automate and streamline their LinkedIn activities. The project follows a modern full-stack architecture with: | |
| - **Frontend**: React application with Vite build system, utilizing Tailwind CSS for styling and Redux for state management | |
| - **Backend**: Flask-based REST API with SQLAlchemy for database operations and Supabase for authentication | |
| - **Key Features**: LinkedIn OAuth integration, content scheduling, post management, and analytics | |
| ## Project Structure | |
| ``` | |
| Lin/ | |
| ├── package.json # Root package.json with combined scripts | |
| ├── frontend/ # React frontend application | |
| │ ├── package.json # Frontend-specific dependencies | |
| │ ├── src/ # React source code | |
| │ ├── public/ # Static assets | |
| │ └── build/ # Build output | |
| ├── backend/ # Flask backend API | |
| │ ├── app.py # Main application file | |
| │ ├── requirements.txt # Python dependencies | |
| │ ├── api/ # API endpoints | |
| │ ├── models/ # Data models | |
| │ ├── scheduler/ # APScheduler service | |
| │ ├── services/ # Business logic | |
| │ └── utils/ # Utility functions | |
| └── README.md # Project documentation | |
| ``` | |
| ## Building and Running | |
| ### Prerequisites | |
| - Node.js (v16 or higher) | |
| - Python (v3.8 or higher) | |
| - npm (v8 or higher) | |
| ### Installation | |
| **Option 1: Using the root package.json (Recommended)** | |
| ```bash | |
| # Install all dependencies | |
| npm install | |
| # Setup the project | |
| npm run setup | |
| # Start both frontend and backend | |
| npm start | |
| ``` | |
| **Option 2: Manual installation** | |
| ```bash | |
| # Install frontend dependencies | |
| cd frontend | |
| npm install | |
| # Install backend dependencies | |
| cd ../backend | |
| pip install -r requirements.txt | |
| ``` | |
| ### Development Servers | |
| - `npm run dev:frontend` - Start frontend development server | |
| - `npm run dev:backend` - Start backend development server | |
| - `npm run dev:all` - Start both servers concurrently | |
| - `npm start` - Alias for `npm run dev:all` | |
| ### Build & Test | |
| - `npm run build` - Build frontend for production | |
| - `npm run preview` - Preview production build | |
| - `npm run test` - Run frontend tests | |
| - `npm run test:backend` - Run backend tests | |
| - `npm run lint` - Run ESLint | |
| - `npm run lint:fix` - Fix ESLint issues | |
| ## Development Conventions | |
| ### Frontend | |
| - Built with React and Vite | |
| - Uses Tailwind CSS for styling | |
| - Implements Redux for state management | |
| - Follows responsive design principles with mobile-first approach | |
| - Uses React Router for navigation | |
| - Implements proper error boundaries and loading states | |
| ### Backend | |
| - Built with Flask | |
| - Uses Supabase for authentication and database | |
| - Implements JWT for token-based authentication | |
| - Uses SQLAlchemy for database operations | |
| - Uses APScheduler for task scheduling | |
| - Follows REST API design principles | |
| ### UI Components | |
| The application features several key UI components: | |
| 1. **Header**: Contains the application logo and user profile/logout functionality | |
| 2. **Sidebar**: Navigation menu with links to different sections of the app | |
| 3. **Responsive Design**: Adapts to different screen sizes with special handling for mobile devices | |
| ### Key Features | |
| 1. **Authentication**: Login and registration functionality with JWT tokens | |
| 2. **LinkedIn Integration**: OAuth integration for connecting LinkedIn accounts | |
| 3. **Content Management**: Create, edit, and schedule posts | |
| 4. **Automated Scheduling**: Uses APScheduler for reliable task scheduling | |
| 5. **Analytics**: Dashboard with overview and analytics | |
| 6. **Responsive UI**: Mobile-friendly design with optimized touch interactions | |
| ## Environment Setup | |
| ### Frontend Environment | |
| ```bash | |
| # Copy environment file | |
| cd frontend | |
| cp .env.example .env.local | |
| # Edit environment variables | |
| # Open .env.local and add your required values | |
| ``` | |
| **Required Frontend Variables**: | |
| - `REACT_APP_API_URL` - Backend API URL (default: http://localhost:5000) | |
| ### Backend Environment | |
| ```bash | |
| # Copy environment file | |
| cd backend | |
| cp .env.example .env | |
| # Edit environment variables | |
| # Open .env and add your required values | |
| ``` | |
| **Required Backend Variables**: | |
| - `SUPABASE_URL` - Your Supabase project URL | |
| - `SUPABASE_KEY` - Your Supabase API key | |
| - `CLIENT_ID` - LinkedIn OAuth client ID | |
| - `CLIENT_SECRET` - LinkedIn OAuth client secret | |
| - `REDIRECT_URL` - LinkedIn OAuth redirect URL | |
| - `HUGGING_KEY` - Hugging Face API key | |
| - `JWT_SECRET_KEY` - Secret key for JWT token generation | |
| - `SECRET_KEY` - Flask secret key | |
| - `DEBUG` - Debug mode (True/False) | |
| - `SCHEDULER_ENABLED` - Enable/disable APScheduler (True/False) | |
| - `PORT` - Port to run the application on (default: 5000) | |
| ## Scheduler Documentation | |
| For detailed information about the APScheduler implementation, see: | |
| - `APSCHEDULER_SETUP.md` - Complete setup and usage guide | |
| - `MIGRATION_TO_APSCHEDULER.md` - Migration guide from Celery | |
| - `APSCHEDULER_IMPLEMENTATION_SUMMARY.md` - Technical implementation summary | |
| ## Development URLs | |
| - **Frontend**: http://localhost:3000 | |
| - **Backend API**: http://localhost:5000 |