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