# Lin Frontend - Vite + React + Tailwind CSS

This is the frontend application for Lin, a LinkedIn community manager built with Vite, React, and Tailwind CSS.

## Features

- ⚡️ Fast development with Vite
- 🎨 Modern UI with Tailwind CSS
- 🔄 Redux Toolkit for state management
- 🛣️ React Router for navigation
- 📱 Responsive design
- 🔧 TypeScript support
- 🧪 ESLint for code quality

## Getting Started

### Prerequisites

- Node.js (v18 or higher)
- npm or yarn
- Python 3.8+ (for backend)
- Docker (optional, for containerized deployment)

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd frontend
```

2. Install dependencies:
```bash
# Install frontend dependencies
npm install

# Install backend dependencies
npm run install:all
```

3. Set up environment variables:
```bash
# Frontend environment (Windows Command Prompt)
copy .env.example .env.local

# Frontend environment (PowerShell)
Copy-Item .env.example .env.local

# Backend environment (Windows Command Prompt)
cd ../backend
copy .env.example .env

# Backend environment (PowerShell)
cd ../backend
Copy-Item .env.example .env
```

4. Configure backend environment variables:
```env
# Supabase configuration
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key

# LinkedIn OAuth configuration
CLIENT_ID=your_linkedin_client_id
CLIENT_SECRET=your_linkedin_client_secret
REDIRECT_URL=your_redirect_url

# Hugging Face configuration
HUGGING_KEY=your_hugging_face_key

# JWT configuration
JWT_SECRET_KEY=your_jwt_secret_key

# Application configuration
SECRET_KEY=your_secret_key
DEBUG=True
SCHEDULER_ENABLED=True
PORT=5000
```

### Development

#### Option 1: Run both services simultaneously
```bash
# Start both frontend and backend
npm run dev:all
```

#### Option 2: Run individual services
```bash
# Start frontend only
npm run dev:frontend

# Start backend only (in another terminal)
npm run dev:backend
```

The frontend will be available at `http://localhost:3000` and the backend at `http://localhost:5000`.

## Available Scripts

- `npm run dev` - Start development server
- `npm run dev:frontend` - Start frontend only
- `npm run dev:backend` - Start backend only
- `npm run dev:all` - Start both services simultaneously
- `npm run build` - Build for development
- `npm run build:prod` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
- `npm run lint:fix` - Fix ESLint issues automatically
- `npm run install:all` - Install both frontend and backend dependencies
- `npm run test` - Run linting and build tests

## Environment Variables

### Development
Create a `.env.development` file in the root directory:

```env
VITE_API_URL=http://localhost:5000/api
VITE_NODE_ENV=development
VITE_DEBUG=true
VITE_API_TIMEOUT=10000
```

### Production
Create a `.env.production` file in the root directory:

```env
VITE_API_URL=/api
VITE_NODE_ENV=production
VITE_DEBUG=false
VITE_API_TIMEOUT=30000
```

## Project Structure

```
frontend/
├── public/                 # Static assets
├── src/
│   ├── components/        # Reusable components
│   ├── pages/            # Page components
│   ├── services/         # API services
│   ├── store/            # Redux store
│   ├── App.js            # Main App component
│   ├── index.css         # Global styles
│   └── index.js          # Entry point
├── index.html            # HTML template
├── vite.config.js        # Vite configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── postcss.config.js     # PostCSS configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Project dependencies
```

## Configuration

### Vite

The Vite configuration is in [`vite.config.js`](./vite.config.js):
- React plugin
- Path aliases (`@/` → `./src/`)
- Development server proxy for API calls
- Build optimization

### Tailwind CSS

Tailwind CSS is configured in [`tailwind.config.js`](./tailwind.config.js):
- Custom color palette (primary: #910029, secondary: #39404B, accent: #ECF4F7)
- Content scanning in `src/` directory
- PostCSS with autoprefixer

### TypeScript

TypeScript is configured in [`tsconfig.json`](./tsconfig.json):
- Strict mode enabled
- Path aliases for imports
- Modern JavaScript features

## Development

### Hot Module Replacement (HMR)

Vite provides HMR out of the box. Changes to your code will automatically update in the browser without a full page reload.

### API Proxy

During development, API calls to `/api/*` are proxied to `http://localhost:5000` to avoid CORS issues.

### Building for Production

To build the application for production:

```bash
npm run build
```

The built files will be in the `dist/` directory.

## Docker Development

### Development Environment
```bash
# Start all services including frontend, backend, and database
docker-compose --profile dev up

# Start with database only
docker-compose up supabase
```

### Production Environment
```bash
# Build and start production services
docker-compose --profile prod up -d

# Stop production services
docker-compose --profile prod down
```

## Deployment

### Static Hosting

The `dist/` directory contains static files that can be deployed to any static hosting service (Netlify, Vercel, GitHub Pages, etc.).

### Environment Variables

For production, update the `VITE_API_URL` in your environment configuration to point to your production API endpoint.

## API Integration

The frontend is configured to communicate with the backend through Vite's proxy in development:

- All API requests are proxied from `/api` to `http://localhost:5000/api`
- WebSocket connections are supported for real-time features
- CORS is properly configured for development

## Troubleshooting

### Common Issues

1. **CORS Errors**
   - Ensure the backend is running on port 5000
   - Check that the backend CORS configuration includes `http://localhost:3000`

2. **Connection Refused**
   - Make sure both services are running
   - Check that ports 3000 and 5000 are available

3. **Environment Variables Not Loading**
   - Verify the `.env` file is in the correct directory
   - Check that variable names are correct

4. **Build Errors**
   - Run `npm install` to ensure all dependencies are installed
   - Check for TypeScript errors if using TypeScript

### Windows-Specific Issues

1. **File Copy Commands**
   - Use `copy` command in Command Prompt or `Copy-Item` in PowerShell
   - Avoid using Unix-style `cp` command which doesn't work on Windows

2. **Path Issues**
   - Use forward slashes `/` in paths (Windows Command Prompt and PowerShell both support this)
   - Or use backslashes `\` but escape them as `\\` in strings
   - Example: `cd ../backend` works in both Windows Command Prompt and PowerShell

3. **Permission Issues**
   - If you encounter permission errors, try running your terminal as Administrator
   - Or check file permissions on the project directory

4. **Node.js/npm Issues**
   - If npm commands fail, try running as Administrator
   - Clear npm cache: `npm cache clean --force`
   - Delete `node_modules` and `package-lock.json`, then run `npm install` again

5. **Python Backend Issues**
   - Ensure Python is added to your system PATH
   - Try using `python` instead of `python3` if you have Python 3.x installed
   - If `pip` fails, try `python -m pip install -r requirements.txt`

6. **Port Conflicts**
   - Windows might have other services using ports 3000 or 5000
   - Use `netstat -ano | findstr :3000` to check what's using port 3000
   - Use `netstat -ano | findstr :5000` to check what's using port 5000
   - Change ports in configuration if needed

### Debug Mode

Enable debug mode by setting `VITE_DEBUG=true` in your environment file. This will:
- Log all API requests and responses
- Show detailed error messages
- Enable request/response logging in the console

### Getting Help

If you encounter issues not covered here:
1. Check the browser console for errors
2. Verify your environment variables are set correctly
3. Ensure the backend server is running
4. Check the Docker logs if using Docker containers

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

## License

This project is licensed under the MIT License.