# 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
│   ├── 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
- 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. **Analytics**: Dashboard with overview and analytics
5. **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 task scheduler (True/False)
- `PORT` - Port to run the application on (default: 5000)

## Development URLs

- **Frontend**: http://localhost:3000
- **Backend API**: http://localhost:5000