File size: 8,419 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
# 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.