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. |